archivo ixd - ida · 2016-03-07 · archivo ixd biblioteca estandarizada de módulos de...

Archivo IxDBiblioteca estandarizada de módulos de interacción para el trabajo con wireframes

El siguiente documento presenta a modo de archivo las unidades de trabajo

estandarizadas o módulos de interacción web con los que trabajamos en IDA.

El Archivo IxD corresponde a un repositorio siempre creciente de elementos

de interfaz que pueden ser aplicados en diferentes situaciones y proyectos,

por las áreas de Arquitectura de Información y Diseño de Interacción.

Si bien en cada caso se podrán ajustar tamaños y otros atributos, el objetivo

es promover la reutilización de estos patrones para agilizar los procesos de

trabajo, dejando plena libertad al diseño de interfaz de proponer las

caracterísitcas diferenciadoras en cada proyecto, en base a las normas

gráficas y el tipo de propuesta requerida.

E q u i p o d e A r q u i t e c t u ra d e I n f o r m a c i ó n

Canvas

Grillas

Títulos

Inputs

Wysiwyg

Comentarios

Pasos

Login

Menús

Breadcrumbs

Botones

Sidebars

Redes sociales

Pestañas

Acordeón

Paginadores

Videos

Imágenes

Galerías

Destacados

Listas

Tablas

Lightbox

Personas

Tablet ver*cal: 768 px


Móvil: 320 px


Archivo IxD | Intro

Encabezados

Corresponde a recomendaciones de tamaños tipográficos y sus variaciones

al transformarse el tamaño de la pantalla. Cada proyecto puede variar estas

características pero el comportamiento y las jerarquías de los títulos y

elementos de texto deberán ser consecuentes transversalmente en el sitio o

software.

H1 Lorem ipsumHelvética Neue 50 Medium

Character 0, Line 61

#4A4A4A

Helvética Neue 40 Regular


#4A4A4A

H2 Lorem ipsum H2

Extracto Lorem ipsum

P Párrafo regular Lorem ipsum



#4A4A4A

H3 Lorem ipsum

Helvética Neue 26 Light


#4A4A4A


Character 0, Line 25, Paragraph 20

#4A4A4A

H4 Lorem ipsum



#4A4A4A

Escritorio 1280 y Tablet horizontal 1024

H1 Lorem ipsumHelvética Neue 40 Medium


#4A4A4A



#4A4A4A

H2 Lorem ipsum H2





#676767

H3 Lorem ipsum H3



4A4A4A



#4A4A4A

H4 Lorem ipsumHelvética Neue 22 Regular


#4A4A4A

Tablet vertical 768

H1 Lorem ipsum H1Helvética Neue 24 Medium


#4A4A4A o #FFFFFF (de acuerdo al fondo)

Helvética Neue 22 Medium


#4A4A4A

H2 Lorem ipsum



Helvética Neue 20 Bold


#4A4A4A

H3 Lorem ipsum



4A4A4A



#4A4A4A

H4 Lorem ipsum

Helvética Neue 18 Bold


#4A4A4A

Móvil 320

Archivo IxD | Intro

FormularioInputs

Wysiwyg

Comentarios

Pasos

Login

Etc

Tipos de campos

Esta sección presenta tipos de inputs mediante los cuales el usuario puede

ingresar información al sistema. En general estos se encuentran dentro de

formularios complejos, con varios campos de diferente índole.

Nombre del input *

Ingrese ...

Ejemplo mitad de ancho *

Ingrese una ciudad


Ingrese su teléfono

Máx. 500 caracteres.

Text area *

Escriba su comentario…

Lorem ipsum FiltrarMostrar

Dropdown

Lorem ipsum

Filtrar

Nombre del input *

Ingrese ...


Ingrese una ciudad


Ingrese su teléfono

Text area *

Escriba su comentario…

Máx. 500 caracteres.

Campos de texto | Escritorio 1280 px Móvil 320 px

Lorem ipsum *

Seleccione lorem ipsum

+ Agregar lorem ipsum

- Eliminar lorem ipsum

Amet consecte…Dolor sit AdipiscingLorem ipsum Buscar

Amet consectetur

Lorem ipsum

Dolor sit

Buscar

Adipiscing

Celular *

-

Archivo IxD | Formulario


Radio button y checkbox

Lorem ipsum dolor sit amet

consectetur adipiscing

Aliquam id libero

Activar recordatorio

Caja de texto editable

B I ABC 123



Aliquam id libero



Aliquam id libero



Aliquam id libero

Valoración

Me gusta

Desactivar recordatorio

Adjunte documento

Formatos Doc, Docx, Xls, Xlsx, Ppt, Pptx, Pdf, Jpg, Gif Tamaño máximo 5Mb.

Seleccionar archivo

Campos especiales

Adjunte documento

Eliminar archivo seleccionado

C:Loremipsum/dolorsit/ametconsectetur/adipiscin...

Código de Verificación *

Ingrese el código de verificaciónGWWv rR


Comentaros

Deje su comentario

Nombre *

Ingrese su nombre

Email * (no será publicado)

Ingrese su email

Comentario *

Comentar

Las cajas de comentarios permiten a los usuarios interactuar con los

sistemas, dejando una ventana abierta para ingresar información y expresar

sus opiniones. Se suelen usar en páginas dinámicas como noticas, eventos y

posts (artículos) de blogs.

Comentarios

Nombre Apellido12.01.2016Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor mi non efficitur euismod. Cras in

consectetur mauris. Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui

tortor. Integer eleifend massa at pellentesque porta. Integer condimentum nec tellus sit amet

scelerisque.

Responder

Luis Rodríguez12.01.2016Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui tortor. Integer

eleifend massa at pellentesque porta. Integer condimentum nec tellus sit amet scelerisque.

Responder

Jorge Silva12.01.2016Duis mauris felis, molestie semper condimentum ut, congue eget felis. Nunc ac dui

tortor. Integer eleifend massa at pellentesque porta. Integer condimentum nec tellus

sit amet scelerisque.

Responder


Pasos o explicaciones

Corresponden a divisiones en los procesos o formularios complejos, que

ayudan a separar en etapas el desarrollo completo de una actividad.

En ocasiones sólo basta con una indicación visual de cuántos pasos hay y en

cuál estoy, mientas que a veces será necesario crear un módulo o caja con los

pasos encapsulados.

Nombre del proceso

1 2 3 4

1 Lorem ipsum dolor sit amet consectetur



Nombre(s) *

Ingresa tu(s) nombre(s)

Apellido paterno *

Ingresa tu apellido paterno

Apellido materno

Ingresa tu apellido materno

Mail *

Ingresa tu mail

Confirmar mail *

Confirma tu mail

RUT *

Ej: 12345678-X

Celular *

-

Teléfono fijo

-

Siguiente


Login

Ejemplos de pasos estándar para procesos de autenticación.

Ingresar a la lorem ipsum

Para acceder a la documentación debe ingresar el nombre de usuario y contraseña.

¿Ha olvidado sus datos? Lo invitamos a recuperar su contraseña

Nombre de usuario

Ingrese el nombre de usuario

Contraseña

Ingrese la contraseña

Ingresar

Correo electrónico

Ingrese su correo electrónico

Recuperar contraseñaIngrese el correo electrónico asociado a esta cuenta para recibir las instructiones para recuperar su contraseña

¿No ha perdido su contraseña? Vuelva a la página de inicio

Confirmar

Hemos enviado intrucciones al correo electrónico

[email protected]

Para continuar, revise su correo electrónico y restablezca su contraseña.


NavegaciónMenús

Breadcrumbs

Botones

Paginadores

Pestañas

Etc

Menús

Los menús de navegación suelen ubicarse en el header o encabezado de

página. Pueden tener diferentes jerarquías de contenido. A continuación

algunos ejemplos.

Link destacado Link auxiliar 1 | Link auxiliar 2 | Link auxiliar 3 | Link auxiliar 4 | Link auxiliar 5Menú desplegable

El menú top permite agregar enlaces de 2º o 3º nivel de relevancia con

información principalmente auxiliar, como contacto, redes sociales,

preguntas frecuentes y otros contenidos que ayudan en la navegación pero

no representan la información central del sitio o software.

Nombre del servicio

Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hĳasMenú 1

Nombre del servicio

Menú 2 Menú nombre largo

Menú nombre largo 2

Menú sin páginas hĳas

Acceso destacado Otro

Menú 1

La parte central del header contendrá información sobre la identidad del

servicio (nombre y logo) además de los accesos a contenidos centrales

mendiante el menú primario y secundario y otros accesos posibles en casos

de sitios muy grandes o complejos.

Menú secundadio 1 Menú sescundario 2 Link externo

Nombre del servicioMenú 1 Menú nombre

largo 2Menú sin páginas hĳas

Menú 2 Menú nombre largo

Comportamiento de header en otros formatos

En pantallas intermedias (tablet horizontal 1024 px) el header tiende a

privilegiar el contenido principal del menú (jerarquía 1), escondiendo los

menús secundarios y otros enlaces destacados dentro del botón de menú

para móviles. En pantallas menores como tablet vertical y teléfono móvil

(768 px y 320 px respectivamente) se mantiene solamente la imagen

corporativa del servicio mediante su logo, el acceso a la búsqueda (cuando es

pertinente) y el botón de menú que ahora aloja todos los links del header.

Opción menú 2Opción menú 1 Opción menú 4Opción menú 3 Opción menú 5Nombre o logo del servicio

Archivo IxD | Navegación

Menú 1

Menú 2

Menú nombre largo



Menú top desplegable

Link auxiliar 1

Link auxiliar 2

Link auxiliar 3

Link auxiliar 4

Link auxiliar 5

Link destacado

Presenta caso extremo con menú de

primera jerarquía, accesos destacados,

menú secundario, menú desplegable (en el

top del header) y links auxiliares.

Menú 1

Menú 2

Menú nombre largo



Menú secundario 1

Menú secundario 2

Link externo

Menú desplegable (top)

Link auxiliar 1

Link auxiliar 2

Link auxiliar 3

Link auxiliar 4

Link auxiliar 5

Otro

Acceso destacado

Presenta caso intermedio con menú de

primera jerarquía, menú desplegable (en

el top del header), link destacado y links

auxiliares.

Presenta caso simple con menú de

primera jerarquía, un link destacado y 3

links auxiliares.

Menú 1

Menú 2

Menú nombre largo



Link destacado

Link auxiliar 1

Link auxiliar 2

Link auxiliar 3

Despliegues de menú


Nombre del servicio

Menú 2 Menú nombre largo Menú nombre largo 2 Menú sin páginas hĳasMenú 1

Lorem ipsum

Dolor sit amet consectetur

Adipiscing

Elit dolor lorem

Ipsum sit amet

Consectetur

Menú 1

Link destacado Link auxiliar 1 | Link auxiliar 2 | Link auxiliar 3 | Link auxiliar 4 | Link auxiliar 5

Link a categoría mayor 1Lorem ipsum texto introductorio a los enlaces presentados a continuación

Sublink

Sublink

Sublink

Sublink más largo

Sublink más largo

•••••

Link a categoría mayor 2

Sublink

Sublink

Sublink

Sublink más largo

Sublink más largo

•••••

Sublink

Sublink

Sublink

Sublink más largo

Sublink más largo

•••••

Sublink

Sublink más largo

Sublink más largo

•••

Sublink

Sublink

Sublink

Sublink más largo

Sublink más largo

•••••

Menú desplegable

Link destacado Link auxiliar 1 | Link auxiliar 2 | Link auxiliar 3 | Link auxiliar 4 | Link auxiliar 5Menú desplegable

Link a servicio con ícono grande

Link a servicio con nombre largo

Link a servicio con nombre largo

Otro servicio Otro servicio Otro servicio

Sitio 1

Lorem ipsum dolor sit amet consectetur adiìscing elit. Integrer eleifend.

www.santotomas.cl

Sitio 2Lorem ipsum dolor sit amet consectetur adiìscing elit. Integrer eleifend.

www.ust.cl

Sitio 3Lorem ipsum dolor sit amet consectetur adiìscing elit. Integrer eleifend. Lorem ipsum dolor sit amet consectetur.

www.ipcftst.cl

Sitio 4Lorem ipsum dolor sit amet consectetur adiìscing elit. Integrer eleifend. Lorem ipsum dolor sit amet consectetur.

www.postgradosst.cl

Sitio 5Lorem ipsum dolor sit amet consectetur adiìscing elit. Integrer eleifend.

www.colegiosst.cl

Opción menú 2Opción menú 1 Opción menú 4Opción menú 3 Opción menú 5Nombre o logo del servicio

Lorem ipsum Dolor sit amet conse Adipiscing Elit dolor lorem Ipsum sit amet

Consectetur

Ipsum sit amet


consectetur adipiscing elit.

Dolor sit amet consectetur

adipiscing elit integrer

eleifend sim non.

Adipiscing elit integrer

eleifend sim non. Lorem

ipsum.

Elit dolor lorem integrer

eleifend sit amet

consectetur adipiscing elit

lorem.


consectetur adipiscing elit.Dolor sit amet consectetur

adipiscing elit integrer

eleifend sim non.

Opción menú 1


Despliegues de menú

Botones y complementos de la navegación

Además de los elementos de navegación transversales, también se apoya la

navegación con botones y breadcrumbs que dan libertad de desplazamiento

por el sitio y dentro de la página.

Enviar

Botones

Comentar

Volver

Publicar Finalizar

Los botones asociados a finalización de procesos son negros,

mientras que las acciones de continuidad son grises.ContinuarSiguiente

Inicio > Nivel 1 > Nivel 2 > Nivel 3 > Página actual

El breadcrumb (o miga de pan) permite volver atrás y visualizar la ubicación

actual en el sitio mediante la contextualización de los niveles de navegación.

Sus atributos tipográficas son:

Breadcrumbs

Helvética Neue Regular | 11 pt | #9B9B9B | Line 16

Volver Volver al inicioSubirContinuar Bajar

Sidebar

Nombre de página

Nombre de página más larga

Nombre de página más larga con doble línea

Otro nombre de página

Nombre de página

Nombre de página más larga con doble línea

Título de la sección

1. Nombre de página

2. Nombre de página más larga

3. Otro nombre de página


5. Nombre de página más larga

6. Otro nombre de página larga

7. Otro nombre


9. Otro ejemplo de nombre

Ejemplo de contenido visitado

Ejemplo de contenido activo

Ejemplo de contenido por visitar

Contenido por visitar

Contenido por visitar

Ejemplo de contenido por visitar

Título de la sección• Subcontenido 1

• Otro ejemplo de contenido hĳo

• Subcontenido 2

• Ejemplo de contenido hĳo

• Otro ejemplo de contenido hĳo

• Subcontenido 3

• Subcontenido 4

Buscar


Comparte en

Contáctanos

¿Tienes dudas? Te llamamos

Horarios de atención

Contáctanos

Conversemos en Facebook

Conversemos en Twitter

600 444 4444


Encabezado con invitación

¿Quieres saber más?Lorem ipsum dolor sit amet consectetur

adipiscing elit. Integrer eleifend, sem non

pulvinar sagittis.

Visita el sitio lorem ipsum

Recomendamos visitar• Lorem ipsum dolor sit

• Amet consectetur adipiscing

• Ipsum dolor sit amet consectetur adipiscing elit interpret.

Nombre publicación

Por Nombre Autor el 20/01/2015

CATEGORÍA

Nombre de la edición destacada lorem ipsum dolor sit amet consectetur adipiscing. Intergrer eleifend sei non

ISSUU

Ver todas las ediciones >

Haz click para leer

Twitter

@Lorem_Ipsum Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim non lorem ipsum dolor sit amet consectetur

@Lorem_Ipsum Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim non

@Lorem_Ipsum Lorem ipsum dolor sit amet consectetur adipiscing. Integrer eleifen asim non lorem ipsum dolor sit amet consectetur

Lorem ipsum dolor sit amet consectetur adipìscing elit. Integrer eleifend sem non pulvinar sagittis.

NewsletterSuscríbete a nuestro newsletter y recibe semanalmente en tu email todas las novedades de Lorem Ipsum Dolor.

Ingrese su nombre

Suscribirme ahora

Ingrese su emailSíguenos en Facebook

Síguenos en Twitter

Síguenos en YoutubeDescarga lorem ipsum dolor sit amet consectetur

Noticias relacionadas

Clínica Kinésica de la UST realiza atención a domicilio a pacientes postrados de Valdivia

VINCULACIÓN CON EL MEDIO

Por DEC Valdivia el 03/09/2015

Primera jornada de células madre en Unviersidad Santo Tomás

MUNDO SANTO TOMÁS

Por DEC UST Santiago el 28/08/2015

Ver todas las noticias >

Eventos

23DIC

Exposición fotográfica "Amor y Libertad"

23/12/2014 al 20/01/2015Lugar: IP/CFT Chillán

05ENE

3° temporada de Conciertos de Verano de la Orquesta Filarmónica de Temporada 201505/01/2015Lugar: Teatro Municipal de Arica

Ver todas los eventos >

Breve detalle del dato destacado para

entregar más información

Dato relevante

Navegación contextual

Módulos de navegación usualmente ubicados en las barras laterales de páginas interiores.

Nombre de página844 Me gusta

Sé el primero de tus amigos en indicar que te gusta esto

Me gusta esta página Compartir

Nombre de página3 de febrero a las 17:!5

Lorem ipsum dolor sit amet consectetur http://loremipsum.cl


Lorem isum Dolor sit AdipiscingAmet consectetur


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales libero quis nisi ultricies suscipit. Donec tortor

metus, consectetur id rhoncus sed, mollis eget orci. Nunc blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices

mollis. Ut efficitur bibendum turpis, at accumsan tortor cursus elementum. Praesent porttitor dui vitae eleifend vulputate.

Aenean at ligula in eros dignissim dapibus eu vitae augue. Fusce accumsan elit ut turpis lacinia vehicula. Morbi nec

pellentesque turpis. In eleifend ante tellus, in pharetra elit rhoncus ac. Morbi vitae interdum ante, non convallis turpis.

Amet consectetur

Solor sit

Lorem ipsum

Adipìscing

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Integer sodales libero quis nisi

ultricies suscipit. Donec tortor metus,

consectetur id rhoncus sed, mollis eget orci.

Nunc blandit vel justo ut fringilla. Nulla quis

tortor quis nisi ultrices mollis. Ut efficitur

bibendum turpis, at accumsan tortor ...


Sit amet consectetur adipiscing

Lorem ipsum dolor sit amet consectetur adipiscing elit

Integer sodales libero quis nisi ultricies suscipit. Donec tortor metus, consectetur id rhoncus sed, mollis eget orci. Nunc

blandit vel justo ut fringilla. Nulla quis tortor quis nisi ultrices mollis. Ut efficitur bibendum turpis, at accumsan tortor cursus

elementum. Praesent porttitor dui vitae eleifend vulputate. Aenean at ligula in eros dignissim dapibus eu vitae augue. Fusce

accumsan elit ut turpis lacinia vehicula. Morbi nec pellentesque turpis. In eleifend ante tellus, in pharetra elit rhoncus ac.

Morbi vitae interdum ante.

Elit integrer

Eleinfend sem non

Lorem ipsum dolor sit

Lorem ipsum dolot

Descargar el programa de la asignatura

Navegación al interior del contenido

Elementos que permiten agrupar grandes cantidades de información y

navegarla dentro de una página.

Sit amet consectetur adipiscing

Lorem ipsum dolor sit amet consectetur adipiscing elit

Integer sodales libero quis nisi ultricies

suscipit. Donec tortor metus, consectetur

id rhoncus sed, mollis eget orci. Nunc

blandit vel justo ut fringilla. Nulla quis tortor

quis nisi ultrices mollis. Ut efficitur

bibendum turpis, at accumsan tortor

cursus elementum. Praesent porttitor dui

vitae eleifend vulputate. Aenean at ligula in

eros dignissim dapibus eu vitae augue.

Fusce accumsan elit ut turpis lacinia

vehicula. Morbi nec pellentesque turpis. In

eleifend ante tellus, in pharetra elit rhoncus

ac. Morbi vitae interdum ante.

Elit integrer

Eleinfed sem non


Lorem ipsum dolor

Descargar el programa de la asignatura

Tab o Pestañas

Acordeón


< 1 2 3 4 5 >

1 2 3 4 5 < anterior siguiente >

< 1 2 3 4 … 10 >

cargando cargando

Para dividir un contenido muy extenso,

se recomienda el uso de paginador o de

carga de contenidos parciales (al hacer

scroll). Para móviles es preferible

cargar el contenido.

Resultados de búsqueda: Trabajos de verano (4 de 12 resultados)

Estudiantes ovallinos de Santo Tomás participan en trabajos voluntarios de Verano

Revista Conexión (ex Nexos)

Categoría 3 Categoría 4Categoría 2Categoría 1 Todo

El Sistema Binominal Chileno y sus posibles modificacionesEl sistema binominal chileno, por lo tanto, corresponde a un sistema proporcional para las elecciones parlamentarias en Chile,

de acuerdo a la Ley Orgánica Constitucional 18.700 de votaciones y escrutinios populares, de 1988, que refiere a la elección

del Senado. http://www.dncsantotomas.cl/blog-expertos/jose-diaz-nieva/El-sistema-binominal-chileno…

Un grupo de estudiantes de la sede de Ovalle de la Universidad Santo Tomás, participaron en trabajos voluntarios de verano,

como una forma reforzar sus vínculos con la comunidad y conocer de cerca la realidad de la zona.

http://www.dncsantotomas.cl/galerías/Estudiantes-de-ovalle-participan-en-trabajos-de-verano.

http://www.dncsantotomas.cl/publicaciones/revista-conexión

La Revista Conexión le informará sobre las instituciones Santo Tomás Viña del Mar, Universidad, Instituto Profesional y Centro

de Formación Técnica

Ingresa tu búsqueda aquí



Aliquam id libero



Aliquam id libero



Búsqueda avanzada

Buscar


Búsqueda avanzada

Buscar


Búsqueda avanzada

Buscar



Aliquam id libero



Aliquam id libero



< 1 2 3 4 5 >


Paginador

Buscador

Resultado de búsqueda

ContenidosVideos

Imágenes

Galerías

Tablas

Listas

Lightbox

Imágenes y videos

Desktop 1280: 690 x 410 px

Video y/o foto

Tablet 1024: 550 x 325 px

Tablet 768: 545 x 320 px

Mobile 320: 300 x 178 px

Los elementos de imagen y video se adaptan dependiendo del

ancho de la pantalla donde serán presentados. Cuando se

representa un video, se debe incorporar el ícono y botón de

Play al centro de la imagen, como se muestra en el caso

desktop. Este botón no varía su tamaño al usarse en tablet o

mobile.

Video y/o foto

Video y/o foto

Video y/o foto

Archivo IxD | Contenidos

Video y/o foto

Texto de la caja, como máximo tiene una

extensión de 140 caracteres Lorem

ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas elemen

Título de la imagen

Video y/o foto

Título largo de la imagen de dos líneas en mobile

Texto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen

Título de la imagen

Video y/o fotoVideo y/o foto

Título largo de la imagen de dos líneas

Video y/o fotoVideo y/o foto

Imágenes o videos con descripción

Mobile

Título: Helvética bold 16, Line 20

Texto: Helvética light 15, Line 20, Paragraph 15

Desktop

Título: Helvética bold 17, Line 20

Texto: Helvética light 16, Line 20, Paragraph 15

Descripción de la imagen desplegada

lorem ipsum dolor sit amet, consectetur

adipiscing elit. Maecenas elemen

x

i


Video y/o foto

i

Galerías de imágenes

Lorem ipsum dolor sit amet consectetur

Categoría

Por autor el 27/01/2015

Lorem ipsum dolor sit amet consectetur

Categoría

Por autor el 27/01/2015

1 / 15

En esta foto, el Rector de la sede, Héctor López, junto a la Directora académica, Marcela Castillo Rojas, entregaron un galvano de reconocimiento a los colaboradores destacados.


Video y/o foto

i

Galerías de imágenes mobile

i i

Descripción de la imagen desplegada lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elemen

x

1 / 15

En esta foto, el Rector de la sede, Héctor López, junto a la Directora académica, Marcela Castillo Rojas, entregaron un galvano de reconocimiento a los colaboradores destacados.

x

1 / 15

i

Deslice para ver otras imágenes


Destacados

Desktop 1280 | Imagen: 790 x 440 px | Caja: 410 x 440 px

Título: Helvética regular 35, Line 35

Texto: Helvética light 18, Line 25, Paragraph 15, máximo 140 caracteres

Botón: 320 x 60 px

Tablet 1024 | Imagen: 630 x 350 px | Caja: 330 x 350 px



Botón: 260 x 60 px

Lorem ipsum dolor sit ametTexto de la caja, como máximo tiene una

extensión de 140 caracteres Lorem ipsum

dolor sit amet, consectetur adipiscing elit.

Maecenas elemen


Imagen

Texto de la caja, como máximo

tiene una extensión de 140

caracteres Lorem ipsum dolor sit

amet, consectetur adipiscing elit.

Maecenas elemen



Imagen


Tablet 768 | Imagen: 484 x 270 px | Caja: 200 px (alto variable)



Botón: 260 x 60 px

Mobile 320 | Imagen: 300 x 172 px |

Caja: 250 px (alto variable)


Texto: Helvética light 16, Line 20,

Paragraph 15, máximo 140 caracteres

Botón: 270 x 60 pxTablet 768 | Imagen: 734 x 410 px (main amplio sin sidebar) | Caja: 180 px (alto variable)



Botón: 260 x 60 px

Lorem ipsum dolor sit ametTexto de la caja, como máximo tiene una extensión de 140 caracteres Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Imagen



Imagen




Imagen

Numeradas

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit

2. Ut laoreet quam id pretium auctor. Sed nisl turpis, ultrices vitae pretium dapibus, dapibus ac orci. In lorem

metus, commodo vestibulum scelerisque vitae, placerat nec nunc

3. Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales

lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae

4. Pellentesque non accumsan tortor. Quisque ut justo dictum, aliquet orci id, interdum urna. Integer blandit orci

nec posuere sagittis. Vestibulum consequat porttitor molestie. Pellentesque in diam sed nibh scelerisque

venenatis. Donec feugiat venenatis dolor, eget cursus quam aliquam vel

5. Proin in quam tortor. Sed semper, mauris ut scelerisque vestibulum, quam turpis gravida dui, et

condimentum sapien mi et lacus. Vivamus vel viverra urna.

• Morbi sem nisl, fringilla ut scelerisque et, hendrerit a velit. Etiam euismod nec lectus non aliquet. Duis sodales

lectus sed est molestie, vitae laoreet urna rhoncus. Ut interdum massa est, ut posuere nulla facilisis vitae

• Pellentesque non accumsan tortor. Quisque ut justo dictum, aliquet orci id, interdum urna. Integer blandit orci

nec posuere sagittis. Vestibulum consequat porttitor molestie. Pellentesque in diam sed nibh scelerisque

venenatis. Donec feugiat venenatis dolor, eget cursus quam aliquam vel

• Proin in quam tortor. Sed semper, mauris ut scelerisque vestibulum, quam turpis gravida dui, et

condimentum sapien mi et lacus. Vivamus vel viverra urna.

1. Lorem ipsum dolor sit amet, consectetur

adipiscing elit

2. Ut laoreet quam id pretium auctor. Sed

nisl turpis, ultrices vitae pretium dapibus,

dapibus ac orci. In lorem metus,

commodo vestibulum scelerisque vitae,

placerat nec nunc

3. Morbi sem nisl, fringilla ut scelerisque et,

hendrerit a velit. Etiam euismod nec

lectus non aliquet. Duis sodales lectus

sed est molestie, vitae laoreet urna

rhoncus. Ut interdum massa est, ut

posuere nulla facilisis vitae

• Morbi sem nisl, fringilla ut scelerisque et,

hendrerit a velit. Etiam euismod nec

lectus non aliquet. Duis sodales lectus

sed est molestie, vitae laoreet urna

rhoncus. Ut interdum massa est, ut

posuere nulla facilisis vitae

• Pellentesque non accumsan tortor.

Quisque ut justo dictum, aliquet orci id,

interdum urna. Integer blandit orci nec

posuere sagittis. Vestibulum consequat

porttitor molestie. Pellentesque in diam

sed nibh scelerisque venenatis. Donec

feugiat venenatis dolor, eget cursus

quam aliquam vel

No numeradas

Listas

Listas mobile

Las listas mantienen los atributos del textos, con las siguientes

características:

Las listas en mobile tienen las

siguientes características:

Helvética Neue Light | 16 pt | #4A4A4A | Line 25 | Paragraph 15Helvética Neue Light | 15 pt |

#4A4A4A | Line 20 | Paragraph 10


Tablas

Opción A

Contenido 1A

Contenido 2A

Contenido 3A

Contenido 4A

Contenido 5A

Contenido XA

Opción B

Contenido 1B

Contenido 2B

Contenido 3B

Contenido 4B

Contenido 5B

Contenido XB

Opción C

Contenido 1C

Contenido 2C

Contenido 3C

Contenido 4C

Contenido 5C

Contenido XC

Contenido 1D

Contenido 2D

Contenido 3D

Contenido 4D

Contenido 5D

Contenido XD

Opción D

Contenido 1E

Contenido 2E

Contenido 3E

Contenido 4E

Contenido 5E

Contenido XE

Opción E

Opción A

Contenido 1A

Contenido 2A

Contenido 3A

Contenido 4A

Contenido 5A

Contenido XA

Opción B

Contenido 1B

Contenido 2B

Contenido 3B

Contenido 4B

Contenido 5B

Contenido XB

Opción C

Contenido 1C

Contenido 2C

Contenido 3C

Contenido 4C

Contenido 5C

Contenido XC

Contenido 1D

Contenido 2D

Contenido 3D

Contenido 4D

Contenido 5D

Contenido XD

Opción D

Contenido 1E

Contenido 2E

Contenido 3E

Contenido 4E

Contenido 5E

Contenido XE

Opción E

Desktop 1280

Ancho máximo: 890 px

Encabezado: Helvética medium 16 #FFF

Texto: Helvética light 16 #484848

Tablet 1024




Datos cortos


Mobile 320




Para versión móvil, una alternativa para tablas sencillas de

datos cortos es repetir el encabezado y desglosar la tabla

en sus filas, donde cada fila, será un módulo de la tabla,

desplegando los datos de forma vertical.

Datos cortos mobile

Opción A

Opción B

Opción C

Opción D

Opción E

Contenido 1A

Contenido 1B

Contenido 1C

Contenido 1D

Contenido 1E

Opción A

Opción B

Opción C

Opción D

Opción E

Opción A

Opción B

Opción C

Opción D

Opción E

Contenido 3A

Contenido 3B

Contenido 3C

Contenido 3D

Contenido 3E

Opción A

Opción B

Opción C

Opción D

Opción E

Opción A

Opción B

Opción C

Opción D

Opción E

Contenido 5A

Contenido 5B

Contenido 5C

Contenido 5D

Contenido 5E

Opción A

Opción B

Opción C

Opción D

Opción E

Contenido 2A

Contenido 2B

Contenido 2C

Contenido 2D

Contenido 2E

Contenido 4A

Contenido 4B

Contenido 4C

Contenido 4D

Contenido 4E

Contenido XA

Contenido XB

Contenido XC

Contenido XD

Contenido XE

Opción A

Contenido 1A

Contenido 2A

Contenido 3A

Contenido 4A

Contenido 5A

Contenido XA

Opción B

Contenido 1B

Contenido 2B

Contenido 3B

Contenido 4B

Contenido 5B

Contenido XB

Opción C

Contenido 1C

Contenido 2C

Contenido 3C

Contenido 4C

Contenido 5C

Contenido XC

Contenido 1D

Contenido 2D

Contenido 3D

Contenido 4D

Contenido 5D

Contenido XD

Opción D

Contenido 1E

Contenido 2E

Contenido 3E

Contenido 4E

Contenido 5E

Contenido XE

Opción E

Tablet 768

Ancho máximo: 734 px (main amplio sin sidebar)




Datos largos

Nombre

Fernando Ricardo

Adriana Margarita

Sergio Esteban

María Eugenia

12.049.334-7

10.743.964-8

9.034.244-9

Rut

11.367.245-0 Asistente de medicina Veterinaria

Supervisor de obras

Académica de Universidad


Cargo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum, ligula a malesuada vehicula, erat lectus porta ex, id tincidunt justo elit a nisl. Nam interdum congue orci vitae venenatis. Aenean at tempor mi, a semper sem. Fusce pharetra quam vel interdum interdum.

ComentarioApellidos

Valenzuela Reyes

Rubio Echeverría

Ossandón Jorquera

Nombre

Fernando Ricardo

Adriana Margarita

Sergio Esteban

María Eugenia

12.049.334-7

10.743.964-8

9.034.244-9

Rut

11.367.245-0 Asistente de medicina Veterinaria

Supervisor de obras



Cargo




ComentarioApellidos

Valenzuela Reyes

Rubio Echeverría

Ossandón Jorquera

Desktop 1280


La altura de cada fila se ajusta al

alto máximo de cada elemento

que contenga.

Tablet 1024 y 768


El ancho total de la tabla se ajusta y se comprime

cada columna proporcionalmente.


Mobile 320


En tablas con contenidos extensos, existe más de un modo de

visualizar en pantallas móviles. En el caso superior, sigue la

primera estructura presentada, donde se desarma la tabla en

sus filas y el encabezado se repite a cada vez.

Mobile 320

Otra alternativa es dejar el encabezado fijo en una capa

superior al lado izquierdo, y delizar los otros elementos

de la tabla de forma horizontal. Esta alternativa funciona

bien si el total de altura de la tabla no excede la altura del

teléfono móvil, ya que sino simultáneamente se debería

hacer slide de izquierda a derecha y scroll de arriba a

abajo, caso que no es recomendado.

Sergio Esteban

Rubio Echeverría

12.049.334-7

Supervisor de obras


DESLIZAR PARA VER TABLA

Nombre

Apellidos

Rut

Cargo

Comentario

María Eugenia

Ossandón Jorquera

10.743.964-8



DESLIZAR PARA VER TABLA

Fernando Ricardo

Valenzuela Reyes

11.367.245-0

Asistente de medicina Veterinaria

Nombre

Apellidos

Rut

Cargo

Comentario

Adriana Margarita

9.034.244-9



Nombre

Apellidos

Rut

Cargo

Comentario

Fernando Ricardo

Valenzuela Reyes

11.367.245-0

Asistente de medicina Veterinaria

Nombre

Apellidos

Rut

Cargo

Comentario

Nombre

Apellidos

Rut

Cargo

Comentario

Sergio Esteban

Rubio Echeverría

12.049.334-7

Supervisor de obras


Nombre

Apellidos

Rut

Cargo

Comentario

María Eugenia

Ossandón Jorquera

10.743.964-8



Datos largos en mobile


Doble encabezado

Aspecto

Género

Rango de edad

Año de egreso enseñanza media

Tipo de dependencia

Categoría

Femenino

Masculino

2010 o antes

2011

2012

2013

18

19-20

21-22

23-24

25 y más

Municipalizado

Particular-Subvencionado

Particular pagado

Corporación privada

72,3%

27,7%

28,9%

72,3%

28,9%

28,9%

28,9%

28,9%

28,9%

72,3%

27,7%

28,9%

72,3%

2014

72,3%

27,7%

Aspecto

Género

Rango de edad

Año de egreso enseñanza media

Tipo de dependencia

Categoría

Femenino

Masculino

2010 o antes

2011

2012

2013

18

19-20

21-22

23-24

25 y más

Municipalizado


Particular pagado


72,3%

27,7%

28,9%

72,3%

28,9%

28,9%

28,9%

28,9%

28,9%

72,3%

27,7%

28,9%

72,3%

2014

72,3%

27,7%

Desktop 1280


La altura de cada fila se ajusta al

alto máximo de cada elemento

que contenga.

Tablet 1024 y 768


El ancho total de la tabla se ajusta y se comprime

cada columna proporcionalmente.


Doble encabezado en mobile

Aspecto

Género

Rango de

edad

Año de

egreso

enseñanza

media

Tipo de

dependencia

Categoría

Femenino

Masculino

2010 o antes

2011

2012

2013

18

19-20

21-22

23-24

25 y más

Municipalizado

Particular-

Subvencionado

Particular

pagado

Corporación

privada

72,3%

27,7%

28,9%

72,3%

28,9%

28,9%

28,9%

28,9%

28,9%

72,3%

27,7%

28,9%

72,3%

2014

72,3%

27,7%

Mobile 320


En los casos donde las tablas tienen

información precisa con pocas

columnas, se puede comprimir el ancho

hasta el máximo de móvil 300 px en la

medida que no afecte la legibilidad.

Aspecto: Género

Categoría

2014

Categoría

2014

Femenino

72,3%

Masculino

27,7%

Aspecto: Rango de edad

18

28,9%

19-20

28,9%

21-22

28,9%

23-24

28,9%

25 y más

28,9%

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Aspecto: Año de egreso enseñanza media

2010 o antes

72,3%

2011

27,7%

2012

28,9%

2013

72,3%

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Aspecto: Año de egreso enseñanza media

2010 o antes

72,3%

2011

27,7%

2012

28,9%

2013

72,3%

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Aspecto: Año de egreso enseñanza

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

Aspecto: Tipo de dependencia

Categoría

2014

Categoría

2014

Categoría

2014

Categoría

2014

2010 o antes

72,3%


27,7%

Particular pagado

28,9%


72,3%

Mobile 320


Con encabezados dobles (primera fila y

primera columna de la tabla) también se

sugiere dividir la tabla en base a cada fila

mayor, en este caso ‘Aspecto’, donde cada

contenido interior de cada Aspecto se

vuelve una tabla pequeña separada.


Mensajes emergentes

Título del lightboxLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis

euismod est, non hendrerit arcu fermentum eu. Donec ac sodales quam

est, non hendrerit arcu fermentum eu.

Mensajes de texto

Lightbox 1280


Encabezado H3 Helvética Regular 30

Párrafo regular Helvética Light 16, Line 25, Paragraph 15

Lightbox 1024




Lightbox 768


Encabezado H3 (mobile) Helvética Bold 19


Lightbox 320





Título del lightboxLorem ipsum dolor sit amet, consectetur adipiscing elit.

Etiam lobortis euismod est, non hendrerit arcu fermentum

eu. Donec ac sodales quam est, non hendrerit arcu

fermentum eu.

Título del lightbox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam

lobortis euismod est, non hendrerit arcu fermentum eu. Donec

ac sodales quam est, non hendrerit arcu fermentum eu.


Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Etiam

lobortis euismod est, non hendrerit

arcu fermentum eu. Donec ac

sodales quam est, non hendrerit arcu

fermentum eu.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis euismod est, non

hendrerit arcu fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu.

Video y/o foto

Video y/o foto

Título del lightboxLorem ipsum dolor sit amet,

consectetur adipiscing elit. Etiam

lobortis euismod est, non hendrerit

arcu fermentum eu. Donec ac sodales

quam est, non hendrerit arcu

fermentum eu.

Título del lightboxLorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lobortis euismod est, non hendrerit arcu

fermentum eu. Donec ac sodales quam est, non hendrerit arcu fermentum eu.

Video y/o foto

Mensajes con imagen y texto (lightbox)

Lightbox imagen 1280 y 1024


Tamaño imagen: 762 x 448 px


Párrafo regular Helvética Light 16, Line 25,

Paragraph 20

Lightbox imagen 768





Lightbox imagen 320






Personas

Los siguientes módulos presentan a personas en diferentes contextos.

Cada proyecto puede requerir información variada de las personas, por lo

tanto las cajas deben ser ajustadas y personalizadas.

Vicerrector de Investigación y Postgrado

Ver curriculum

Sebastián Rodríguez Rivera Directora Nacional de

Comunicaciones. Dra en Lenguaje y expresión escrita PUC.

Ver curriculum

Magdalena HermannSubdirector de Comunicaciones.

Ver curriculum

Alejandro Valdivia

Vicerrector de

Investigación y Postgrado

Ver curriculum

Sebastián Rodríguez Rivera Directora Nacional de

Comunicaciones. Dra en

Lenguaje y expresión

escrita PUC.

Ver curriculum

Magdalena HermannSubdirector de

Comunicaciones.

Ver curriculum

Alejandro Valdivia

Directora Nacional de

Comunicaciones

Magdalena Hermann

(2) 2376 34 00

Av. Andrés Bello 277,

edificio La Industria piso 31,

Santiago

Subdirector de

Comunicaciones

Alejandro Valdivia

(2) 2376 34 00

Av. Andrés Bello 277,

edificio La Industria piso 31,

Santiago

[email protected]

Willie CarvajalCopiapó

i

Willie CarvajalCopiapó

Encargado de Extensión y

Comunicaciones

x

(2) 2376 34 00 - (52) 235 21 00

Río Copiapó Sur 2351, Copiapó

[email protected]


archivo ixd - ida · 2016-03-07 · archivo ixd biblioteca estandarizada de módulos de...

Documents