View
219
Download
0
Category
Preview:
Citation preview
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
1/24
Cmo organizar los contenidos en la webArquitectura de la informacin
/basado en textos de Juan Carlos Camus, Poynter.com y otros aut
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
2/24
Cada edificio sirve para propsitos diferentes y nicos.Su arquitectura, diseo, tipo de construccin, sus muebles, sus habitanteTodos estos factores juegan un rol juntos en la experiencia total del espaEl todo es mayor que la suma de sus partes.
ARQUITECTURA DE LA INFOR
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
3/24
1. Una combinacin de organizacin, etiquetas, bsquedas ynavegacin en sitios webs o intranets.
2. El arte y ciencia de dar forma a los productos de la inform
experiencias para apoyar la usabilidad y la accesibilidad.
3.Disciplina emergente y prctica comunitaria enfocada en t
principios del diseo y la arquitectura al paisaje digital.
DEFINICIONES: Arquitectura de la in
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
4/24
Estructurar : definir informacin especfica de un sitio y decidir cm
Organizar : agrupar los contenidos y componentes de tu sitio de ungenere significado y categorasdistintivas.
Etiquetar : resolver cmo nombrar categoras, links y navegaciones
a ellas.Bsqueda y gestin: el sitio falla si los usuarios no pueden encontranecesitan en una combinacin de navegacin, bsqueda y pregunta
Arte y ciencia: Metodologa, experiencia, intuicin y creatividad.
CONCEPTOS B
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
5/24
1. El mapa d
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
6/24
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
7/24
2. Wir* Dibujos simples que muestran donde se encuentran los elementos en una pgi
*Es un primer paso para crear un sitio, sin distracciones acerca de colores, tipogelementos de diseo. La idea es concentrarse en los porcentajes de espacio que
elemento dentro de un sitio. Estos elementos incluyen:
Navegacin: Los botones para las secciones principales de tu sitio.
El logo
Las reas de contenido: donde estarn las distintas secciones de contenid
rea de bsqueda (buscar)
Login usuario
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
8/24
WIREFRAMES
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
9/24
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
10/24
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
11/24
Existe una variedad de formas de crear un wireframe:
-----------------------------------------------------------------------------Dibujarlo a mano
----------------------------------Usando Adobe Photoshop, Illustrator, u otros software para
------------------------------------------------Usando software creados especficamente para real
www.gliffy.com http://www.mockflow.com/
http://www.axure.com/
mvil http://iphonemockup.lkmc.ch/
http://iphonemockup.lkmc.ch/http://www.axure.com/http://iphonemockup.lkmc.ch/http://www.axure.com/http://www.mockflow.com/http://www.gliffy.com/7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
12/24
Cmo organizar los contenidos en la webArquitectura de la informacin
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
13/24
contenidosinteractivosactualizadosmultimedialesno lineales
Cmo escribir en espacios digital
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
14/24
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
15/24
fcil de comunicar:de escuchar, escribir y leer: no utilice letras que
explicacin, evite los nmeros
fcil de recordar: no tenga ms de diez letras
representar el contenido: esto adems ayudar a la indexacin del motores de bsqueda para los temas
funcionar sin las www: para facilitar uso del dominio, permita acce
pginas cuando se escriba su nombre con y sin las www
Nombre del si
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
16/24
Se descubri que hay un cierto orden para mirar el contenido de unDespus de mirar el contenido en la esquina superior izquierda o principales los movimientos de ojos de los participantes usualmcontemplaban revisiones hacia arriba y debajo de las pginas, paracuadrante superior derecho.Ojo: a diferencia de los impresos, las fotografas noson un punto dpginas ya que los usuarios prefieren los textos.
LECTURA DIAGONAL: eye
TTULOS CONTEXTO E
https://www.youtube.com/watch?v=ylPLFoIyR3Qhttps://www.youtube.com/watch?v=O6DRl6tTjCUhttps://www.youtube.com/watch?v=ylPLFoIyR3Q7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
17/24
1. El ttulo debe ser comprensible sin contexto: debe ser Auto-explicativo
2. Las palabras del ttulo deben apoyar el clic del usuario: se debe considerar la inclusinusuario - clic al enlace-- ir hacia la informacin
3. El ttulo debe sostenerse en el tiempo: los ttulos deben plantearse en trminos neutralespara que no queden amarrados a una fecha en particular.
4. El ttulo debe tener un largo adecuado: para ser adecuadamente indexado en los buscadotener un mximo 64 caracteres (incluyendo espacios)
5. El ttulo debe usarse segn el estndar web, en dos zonas de cada pgina.1)como elemento del encabezado o a travs de la etiqueta 2) como parte del a travs del uso de la etiqueta que permite indicar que se trat
principal de la pgina, ya que describe su contenido.
TTULOS: CONTEXTO E
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
18/24
titulares auto-explicativos
no dependientes del contextopara ser entendi
motiven al usuario a hacer clicpara saber mextensinpermita aparecer en resultados de los bus
TIT
TIPOGRAFA LA LETRA CORRECTA
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
19/24
1. TIPO DE LETRAS:usuarios prefieren letras sans-serif a las que tienen serif, nueva generacin de letras h
2. NEGRITAS Y CURSIVAS:para destacar ciertas palabras en los prrafo en recorrido visual de la informa
3. NMERO DE COLUMNAS: una columna mejor que tres
4. INTERLINEADO DEL TEXTO: uso de espacio blanco promedio entre prrafos produce mayores niveles
5. ANCHO DE LA COLUMNA:velocidad de lectura es mejor con un ancho de columna en torno 80 a 100 caradeber tener lmites concretos en su ancho y no estirarse junto con el sitio.
6.LARGO DEL TEXTO:aunque no hay reglas estrictas, se recomienda limitar el scroll y ofrecer sumarios al que el lector se interese por todo el contenido. Opciones:- Enlaces en el comienzo (anclas) hacia las diferentes partes del texto, para que el usuario elija y accedanecesidad de leer todo el contenido.
- botones de accin PDF.
TIPOGRAFA: LA LETRA CORRECTApara todos
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
20/24
;
CUNTO ES
https://www.youtube.com/watch?v=wkoX0pEwSCw7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
21/24
Jacob Weisberg dice que las personas deben escribir distinto para el web:
...La escritura nativa del web es diferente
El tono de una buena escritura para e
el correo electrnico. Es ms directo, personal, urgente, ingenioso, eficiente; no te
tiempo. Refleja el compromiso, la receptividad y el apuro de los usuarios del web e
pasividad textos impresos. Integra el uso de enlaces al proceso creativo e intelec
abordarlo despus de dicha etapa. Yusa la multimedia en forma orgnica, ms qu
ornamental.
CUNTO ES
RECOMENDACIONES
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
22/24
RECOMENDACIONESSER SUCINTO: mitad de las palabras y ahorrar expresiones para lasideas.
ESCRIBIR PARA LA COMPRENSIN: ofrecer en el caso del primer prrafo de un texto laresumen del tema.
USAR VERBOS DIRECTOS: menos palabras y directo para expresar laaccin. Preferir modo Infinitivo al Presente Perfecto o cualquier otrocompuesto.
EVITAR LAS EXPLICACIONES NEGATIVAS: exafirmativos
ESTABLECER JERARQUAS DE INFORMACIN: utilizar Pirmideinvertida, lo ms importante primero, luego elementoscomplementarios.
PREFERIR LOS HECHOS A LOS DISCURSOS:discursos descriptivos.
CREAR SUBTTULOS DESTACADOS: ideal que los subttulos sean unresumen de los prrafos a continuacin DESTACAR PALABRAS SIGNIFICATIVAS: comvisual de la pgina. Con moderacin.
CREAR LISTAELEMENTOS: si estos requieren mayor explicacin,pueden ir enlazado hacia otras pginas con texto ms detallado
OFRECER ENLACES HACIA OTRAS PGINAS:sitios externos que aporten al tema.
EVITAR LAS ABREVIACIONES Y LA JERGA TCNICA: a menos que se tratede instituciones muy conocidas, evitar el uso de siglas, acrnimos o
abreviaciones.
CLARIDAD Y PRECISIN
ESCRIBIR PARA LA WEB R
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
23/24
ESCRIBIR PARA LA WEB - RLOS CONTENIDOSConoce a tu audiencia: Los lectores no leen, escanean el contenido (eye tracking). Se directo, preciso y claro Ttulo: 64 caracteres mx.
Bajada informativa / 150-160 caracteres Subttulos informativos Usar negritas en nombre propios y puntos importantes Usar listados Prrafos cortos No ms de 800 palabras de largo Usar verbos directos y activos:menos palabras y directo para expresar la accin. Preferir modo Infinitivo al P
cualquier otro compuesto. Evitar sobre uso de adjetivos y adverbios Explica: tus lectores no slo quieren las 5w, quieren saber razones, por qu la historia es importante. Textos escaneables y divididos- Escaneables: resaltar palabras claves o frases para destacar algn punto.- Divididos: divide la informacin en links que tambin estn desplegados en orden y estilo pirmide invertida. Usa links para contenidos relacionados que aporten al tema, para amplificar contenido sin usar palabras de m Tener fotos o grfica. Recordar la mxima ve el caballo, no nombres al caballo.
Tipografa: sans-serif
ESCRIBIR PARA LA WEB R
7/23/2019 Arquitectura Info, Wireframes y Escribir Para La Web PDF
24/24
ESCRIBIR PARA LA WEB - RLAS FORMASCmo escribimos y cmotrabajamos las historias son dos cosas diferentes. Escribepara dar o agregar profundidad a una historia, por qu es importante. Permite a tu audiencia escuchar o verel drama humano, o la accin. Engancha a tus lectores de forma interactiva con grfica u otros elementos (mapas, lneas de tiempo) que sum
a tu historia. Las galeras de fotos, con o sin audio con explicaciones al pie cuando se trate de imgenes de fuerte contenid Agregar siempre crditos del fotgrafo o archivo desde donde proviene la imagen. Posibilidad de agregar encuesta o diccionario de trminos para algn tema. Analizar si la informacin que estoy presentando en largos textos estara mejor y ms claramente presentada
tabla.
Link, link, link!: que funcione, que aporte, que relacione contenidos internos y externos.* Interactuar orgnicamente con contenido multimedia complementando el texto, ocupando la narrativa y lenguaje denriqueciendo la experiencia del usuario.FUENTES_http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-stillhttp://tienes5segundos.cl/
http://tienes5segundos.cl/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/http://tienes5segundos.cl/http://www.poynter.org/how-tos/newsgathering-storytelling/writing-tools/83326/writing-for-the-web-the-basics-still-apply/Recommended