viernes, 4 de julio de 2014
DIA VEINTITRES 04/07/2014
Hoy hemos seguido con usabilidad, subido todo al blog y toda la documentación,lo cual ha llevado varias horas de trabajo, posteriormente hemos empezado a instalar unos cuantos programas que teníamos pendientes para empezar a tratar otros temas del curso, también vino la profesora de diseño gráfico y nos dió el resultado del examen, la parte del análisis de la imagen. Estoy contenta, saqué un notable bajo y bueno por fallos tontos, tengo que mantener mejor los márgenes, sintetizar, expresarme mejor ya que doy pie a malentendido del contenido etc
USABILIDAD WEB
¿Qué es?
La facilidad con la que los usuarios pueden acceder a las distintas herramientas de una página
Características principales
Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.
Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las caractersticas y forma de uso de un sistema para volver a utilizarlo a futuro.
Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.
Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.
Áreas relacionadas
Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad.
Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las demás facetas.
Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios ms complejos (imágenes, sonidos, animaciones), esto se debe equilibrar con los demás valores del diseño emocional.
Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan.
Accesible: los sitios Web deben ser accesibles a las personas con discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno ya es un requisito normativo.
Creíble: la credibilidad es uno de los factores más importantes de tener en cuenta y por ello se deben revisar los elementos de diseño que afectan la confianza que nos tienen los usuarios.
Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.
Consejos o puntos a tener en cuenta
1. Accesibilidad
Hay que tener en cuenta los distintos factores que impiden al usuario acceder satisfactoriamente a nuestra página
1.1 Tiempo de carga razonable: La velocidad de carga ayuda al posicionamiento, a parte, el usuario está acostumbrado a páginas rápidas, por lo tanto no va a estar dispuesto a exceder su límite de tiempo de espera.
1.2 Contraste de textos con el fondo: Algunos contrastes de colores del texto respecto del fondo no permite legibilidad, es recomendable por tanto usar contrastes altos, a poder ser de negro sobre blanco.
1.3 Tamaño y espacio entre caracteres: La letra demasiado pequeña o junta impide una legibilidad adecuada, lo mismo con el interlineado. No obstante, tampoco deberán estas demasiado separadas las palabras o las líneas unas de otras dado que produce el mismo efecto.
1.4 Flash: El flash puede quedar muy visual y estético, no obstante las páginas elaboradas con flash tardan en cargar, por lo tanto, no es cuestión de negar su uso, pero no de abarcarlo en toda la extensión de la página. Además, concretamente para los usuarios ciegos, es imposible navegar por ellas de forma adecuada, deberán llevar algo adicional para que sepan qué hay en ellas
1.5 ALT: no solamente para los usuarios invidentes es importante éste contenido, sino también para el posicionamiento de la página respecto a su búsqueda
1.6 Página 404 personalizada: Deberemos personalizar ésta página de error que aparece por defecto con enlaces para que el usuario no se pierda, a parte de la buena imagen que esto proporciona
2. Identidad
Una pregunta importante que se hace todo usuario al llegar a una página es ¿Quienes son?Hay que proporcionar por tanto una información veraz, adecuada y confiable
2.1 Logo: El usuario espera ver el logo de la empresa arriba a la izquierda y, al hacer click en él, ir a la página principal
2.2 ¿Qué hacemos?: Hay que proporcionar información clara acerca de aquello a lo que se dedica nuestra empresa
2.3. Página principal sencilla: Fácil de entender y con pocos elementos, es una presentación del resto de contenidos de nuestra página y no debemos recargarla de información, es recomendable poner el resto en distintas secciones ordenadas en un menú visible y fácil de acceder desde cada punto de nuestra página.
2.4 ¿Quienes somos?: Alguien que desea comprar uno de nuestros productos o establecer una relación comercial con nosotros, se preguntará quienes somos y si somos confiables, por lo tanto, como en los anteriores puntos acerca de nuestra imagen corporativa, deberemos dar información veraz y confiable
2.5 Contactar: debe encontrarse fácilmente y aparecer de forma clara la página de contacto
3. Navegación
De una vez el usuario sabe quienes somos y qué hacemos, deberemos facilitarle la navegación por el resto de la información que deseamos mostrarle sin opción a que pueda perderse en ningún momento.
3.1 Navegación principal:
Siempre debe existir un menú de navegación principal para evitar que el usuario se pierda
3.2 Simplicidad:
Ser claro y conciso es la clave, no es necesario una sección que se llame "comunícate con nuestro equipo", "contactar" ocupará menos y será más entendible
3.3 Número de elementos:
Los psicólogos no se ponen de acuerdo con el numero máximo de elementos que el cerebro puede procesar de forma inconsciente y ágil, pero el número suele estar de 4 a 7. Así pues, los enlaces o botones de los menús, que se limiten a esos varemos, o mejor pensar en otra distribución.
3.4 Link del logo a homepage:
Como dijimos, el usuario espera que sea así, a parte facilitaremos la navegación
3.5 Enlaces coherentes e identificables:
deberán guardar la misma estética para distinguirlos bien y no enviarnos a una sección o página diferente a la que especifican
3.6 Búsqueda:
El formulario de búsqueda no solo debe ser visible, sino que los resultados deben ser relevantes y tan cuidados como cualquier otra sección de la web.
4.Contenido
Un buen contenido debe ser fresco, relevante, coherente, organizado y de fácil acceso
4.1 Encabezados:
Prácticamente ningún usuario lee una web, a no ser que se trate de un web de contenidos, como blogs, revistas o prensa. En las páginas corporativas, nadie lee de arriba a abajo las paginas, sino que suelen hacer una lectura en diagonal, fijándose en los
encabezados, inicios de párrafos, listas y negritas, buscando lo que les interesa. Así pues,
usemos las etiquetas H pensando en ese comportamiento.
4.2 Información importante antes del scroll:
La mayoría de mortales tienen un monitor de 1024×768. Piensa en eso cuando diseñes o organices la información, y mantén la información critica e importante por “encima” del scroll. Es decir, que el usuario no tenga que utilizar las barras de desplazamiento verticales ni, por supuesto, horizontales.
4.3 Coherencia en los estilos:
Elige un estilo y cíñete a él. Colores, fuentes y cualquier estilo. No cambies el tipo de color
de los encabezados, enlaces o párrafos de una sección a otra, o uses plantillas distintas,
ya que puede confundir al usuario.
4.4 Negrita:
Intentando destacar demasiada información, no destacas nada. Si colocas demasiado
texto en negrita, al final no se aprecia lo que realmente es importante. Lo mismo con las
novedades de la web. Si la mitad de los apartados del menú están acompañadas por un
“nuevo!” parpadeante en rojo, ya nada es nuevo.
4.5 Anuncios y pop-ups:
Los anuncios deben estar muy bien integrados en el contenido de la web, sin
“confundirlos” con el mismo. Tampoco fuerces auncios encima del contenido, ni pop-ups
intrusivas. El usuario odia ese tipo de comportamiento.
4.6 Se conciso y explicativo:
Mira tu homepage. ¿Puedes decir lo mismo con la mitad de palabras? Pues hazlo. Se
conciso y descriptivo, y evita argot innecesario. A nadie le importa que “busques la
excelencia de la productividad” o que “aproveches sinergias interdepartamentales”.
4.7 URL amigables:
Las URLs deben ser compresibles y significativas. Ya sabemos que funciona muy bien
con el SEO, pero también para la experiencia del usuario.
4.8 Títulos auto explicativos:
Los títulos de cada página (los de la etiqueta TITLE) deben ser descriptivos, únicos
y relevantes. No solamente una retahíla de palabras clave embutidas. No solo los
buscadores los pueden ver “sospechosos”, sino también los usuarios, que ante esa
posibilidad, pasaran la siguiente web de la página de resultados.
Hasta ahí esos 25 puntos clave, básicos y tan importantes. Como os decía, el checklist
es de UserEffect, y os podéis bajar el PDF aquí. Evidentemente, es ampliable y
personalizable en función de las necesidades de cada cliente, pero es un buen punto de
partida. Lo mejor es que lo paséis a Excel, y los modifiquéis según convenga.
Herramientas útiles
Comprobar estado del dominio y seguridad http://sucuri.net/
Herramientas webmaster http://www.google.
Google developers, make the web faster https://developers.
jueves, 3 de julio de 2014
MAQUETACIÓN
¿Qué es?
elementos. Es la forma de ocupar el espacio del plano de la página.
Todo diseñador gráfico, cuando inicia su carrera, se encuentra con el problema de
cómo disponer el conjunto de elementos de diseño impresos (texto, titulares
imágenes) dentro de un determinado espacio, de tal manera que se consiga un
equilibrio estético entre ellos.
Maquetar un diseño, consiste en dar un formato a los documentos, a todo el conjunto
de elementos que lo componen, las imágenes, los textos, etc
Definir el documento
Lo primero que se lleva a cabo antes de empezar a maquetar es definir el documento,
es decir, definir el área sobre la que desarrollaremos el trabajo.
Existen dos características muy importantes sobre el papel: la primera es el tamaño y
la segunda la orientación. Este puede ser horizontal o vertical y el tamaño puede
cambiar entre diversas medidas, siendo la más corriente y habitual la DIN A4.
Crear la retícula compositiva
Todos los trabajos de maquetación, deben llevar una guía para conseguir una
estructura y tamaños fijos. Para ello se utiliza la retícula compositiva que será la
plantilla base sobre la que se asienten los elementos gráficos, con la finalidad de
conseguir un orden y una estética en la publicación. Las retículas se subdividen a su
vez en superficies bidimensionales o tridimensionales, en campos más pequeños en
forma de reja.
El problema con el que se encuentra el diseñador es encontrar el equilibrio entre el
orden que impone la estructura reticular, y la necesidad de evitar la monotonía e
inyectar una cierta dosis de creatividad a la maquetación. Aún así, una retícula
siempre impondrá un orden, una uniformidad y coherencia. Una página con retícula
transmite estructura y una cierta mecánica, frente a algo desordenado,
desestructurado o caótico.
La retícula hace también que, la lectura se efectúe con mayor rapidez, se visualicen
los contenidos a distancias más lejanas y se retenga con más facilidad en nuestra
memoria la información que estamos recibiendo.
Para su creación, lo primero que todo diseñador gráfico debe definir es el objetivo de
comunicación gráfica que se pretende. Así, por ejemplo, la retícula quedará
condicionada a las características del documento gráfico de que se trate, de tal
manera que un libro de lectura tendrá una retícula muy distinta a una revista de
modas, un periódico o un folleto publicitario. Adicionalmente, la cantidad de fotografías
o ilustraciones a utilizar en la página y la tipografía serán condicionantes en el proceso
de creación de la retícula.
Retículas simples, de 2 y 4 columnas y de 3 a 6 columnas
La retícula más simple es la de una sola columna con márgenes iguales en todos sus
bordes. Sobre esta base de una sola columna el diseñador puede elegir diferentes
variantes en el tamaño de los márgenes, en función del documento gráfico de que se
trate o de consideraciones como la facilidad de lectura, elegancia en la representación
de los bloques de texto o requisitos de encuadernación. Normalmente, este se usa
para libros tradicionales de lectura, como novelas, aunque, tiene otras aplicaciones.
- De 2 a 4: Es una retícula muy utilizada por los diseñadores, ya que les permite componer una distribución equilibrada, aunque en alguna ocasión,puedan sugerir algunas composiciones simétricas.
- De 3 a 6: Habitualmente se considera esta retícula como la más acertada para el diseño de los folletos publicitarios. Proporciona anchas y columnas muy legibles, y además se tiene la opción, que la de tres columnas se puede subdividir a su vez, en 6 columnas.
- Simple: se encuentran casi en todos los etiquetados, envasados,periódicos, novelas...
Las posibilidades de disposición de elementos gráficos en una retícula de una sola
columna son muy limitadas y, en general, se muestra más rígida que otras variantes
de retícula. Lo que, en todo caso, el diseñador debe tener en cuenta es que la
variedad de opciones, entre las que puede elegir con respecto a los márgenes de los
bordes para retículas de una sola columna, crearán en cada caso sensaciones de lujo,
tensión, formalidad o informalidad y proporcionarán al tema expuesto énfasis
diferentes.
La fórmula de dos columnas, que puede ajustarse fácilmente a cuatro, con la
anteriormente descripta, son las más utilizadas en trabajos de diseño gráfico. En
general, cuando el número de columnas es par se consigue una distribución más
equilibrada en la página, aunque, por otra parte, puede resultar carente de
originalidad. Un número impar de columnas en la retícula suele proporcionar un estilo
diferente e incluso más original pero, por otra parte, puede resultar más difícil
conseguir un cierto nivel de equilibrio
Los elementos del diseño en la retícula
Los tres elementos fundamentales del diseño en la página son los títulos, el texto y
las imágenes. Todos deben combinarse en la retícula para formar un conjunto
armonioso, en el que los elementos se refuerzan unos a otros.
De hecho, como ya hemos podido comprobar, la necesidad de disponer de una
retícula base proviene del deseo de conseguir un equilibrio en la disposición de estos
tres elementos. En la mayoría de las publicaciones el texto, los títulos y las imágenes
están dispuestos de tal forma que sugieren la existencia de una retícula base.
Tamaños y formas del papel
En el proceso de compaginación y en la elección del diseño de la retícula base es
necesario hacer una consideración previa sobre el tipo y formato de papel a utilizar. El
uso económico del papel es una decisión esencial que corresponde al diseñador.
Los formatos de papel más habituales según la norma DIN son los siguientes:
.jpg)
AO = 841 X 1189 mm A1 = 594 X 841 mm
A2 = 420 X 594 mm A3 = 297 X 420 mm
A4 = 210 X 297 mm A5 = 148 X 210 mm
A6 = 105 X 148 mm A7 = 74 X 105 mm
A8 = 52 X 74 mm A9 = 37 X 52 mm
A 10 = 26 X 37 mm
La elección de un tipo de papel en particular y su tamaño condicionarán
decisivamente los costes y el aspecto del trabajo. También el formato del papel
condiciona el estilo y tipo de retícula a utilizar, haciendo inconvenientes unas y
apropiadas otras. Así, por ejemplo, cada clase de papel ofrece un nivel distinto de
absorción de la tinta, variando así el aspecto de los colores, e igualmente una
diferencia en la calidad del papel puede suponer una considerable diferencia en el
coste sin un aumento proporcional de la calidad del conjunto. También el diseñador
debe prever qué impacto en el proceso de impresión tendrá la elección de diseño y
compaginación que ha realizado. Cuando un folleto se imprime, las páginas no se
imprimen una a una, sino que se agrupan para ahorrar tiempo y para aprovechar al
máximo los materiales pudiendo incluirse en cada plancha de impresión 3, 6, 8 e
incluso más páginas, según el formato de página elegido. Si el número de páginas del
folleto exige más de una plancha, el diseñador puede combinar las páginas en el
proceso de compaginación para conseguir ahorros en el número de impresiones en
función de los colores que deban aparecer. Así como un arquitecto en su proyecto
debe tener en cuenta los materiales y el impacto en el proceso de construcción, el
diseñador gráfico no puede olvidar que su trabajo debe ser impreso y que ello tiene
que conseguirse con la mayor eficiencia de tiempo y costes para la calidad elegida.
Maqueta base, o página maestra
Son muchas las definiciones que se le pueden dar: página maestra, maqueta base,
máster, plantilla, etc. Pero todas hacen referencia a la misma idea, la primera página,
donde aparece el estilo y todas las características ideadas para toda la publicación. Se
consigue así que todas las páginas que forman una revista, catálogo o bien un libro,
tengan siempre el mismo estilo y presentación.
Los elementos de la maqueta base pueden ser:
1. La orientación del papel: Horizontal o Vertical
2. El número de columnas: Número de columnas y el tamaño que van a tener en
nuestra hoja.
3. La separación entre columnas: Tendremos que definir la separación que va a
existir entre las columnas del documento; a esta separación se la denomina medianil.
4. Los titulares, las cabeceras, los pies de las imágenes, el formato del texto,
tipografías o fuentes, tamaños de los textos, el color de los textos etc.
5. Los elementos ornamentales, filetes decorativos, uso de imágenes como
fondo en todas las páginas, marcas de agua.
6. Numeración de las páginas
Diseño de la página base
La retícula base se hace en dos páginas enfrentadas, en la página de la derecha y en
la página de la izquierda. Se hace así para poder observar el resultado final en
conjunto de cómo va a quedar la publicación final.
Pero la importancia de realizar una página maestra se encuentra en el enorme ahorro
de tiempo que se consigue, ya que el resto de las páginas de la publicación utilizarán
los mismos estilos, formatos, fuentes, etc., no teniendo que organizar y definir las
características de cada página del documento una por una. Además, se logra así que
la publicación presente un mismo estilo y se aprecie en la presentación una línea
clara, que es lo que distingue unas publicaciones y otras.
Distribución de los elementos y de los espacios en una maquetación
Otra tarea importante que tenemos que tener en cuenta a la hora de maquetar un
documento es pensar en los espacios, y todos los demás elementos y su distribución.
Para realizar esta tarea se puede usar la técnica que se usaba antaño, que es la de
dibujar las distribuciones posibles en un papel, es decir hacer posibles bocetos
con diferentes distribuciones de los espacios de los que disponemos hasta que
encontremos la distribución adecuada y que se ajuste a lo que queremos conseguir.
También existen programas informáticos en los que nos resultará muy sencillo crear
posibles elementos como textos, imágenes etc. Y distribuirlos de manera sencilla y lo
que es más importante cambiar de nuevo la distribución en unos segundos.
Los dos elementos básicos en los que tenemos que pensar a la hora de la
maquetación son el texto y las imágenes.
• Texto: Titulares, subtitulares o entradillas (copetes), bloques de texto, y pies de
foto o imagen. En los anuncios publicitarios hay algunos elementos diferentes
en cuanto a texto se refiere como eslóganes etc.
• Imágenes: Fotografías, ilustraciones, espacios en blanco, logotipos.
El Titular de un documento se considera el elemento más importante, ya que es el
más atractivo y en el que más se fija el lector que precisamente es la labor que tiene,
captar la atención del lector e intentar que se introduzca en el tema para leer el resto
del texto.
No existe una ley o regla invariable a la hora de definir como va a ser el titular pero si
que existe la recomendación de escribir, frases y palabras cortas, que estén
compuestos por mayúsculas y minúsculas, que el texto no esté en negativo, que no se
empleen signos de puntuación.
Estas recomendaciones son válidas a grandes rasgos, sin embargo cualquier titular
que consiga llamar la atención y transmitir un mensaje rápidamente será un buen
titular.
Los subtítulos: Se colocan debajo de los títulos principales, y aportan una
información complementaria a la del primer titular principal. Los subtítulos, se crearon,
por que los titulares suelen ser muy resumidos y escuetos, y no aportan toda la
información necesaria para captar la atención del lector.
El cuerpo del texto es el elemento al que menos atención se presta, esto es debido a
que en muchas ocasiones el lector ya ha recibido el mensaje casi en su totalidad con
la información que le ha aportado el titular y la imagen o fotografía.
Algunos expertos afirman, que el orden de lectura de los documentos es de la
siguiente forma:
- Titular.
- Pies de la imagen.
- Texto, este en último término si los tres primeros elementos son interesantes para el
lector.
Los pie de las fotografías tienen más importancia que el texto en muchas ocasiones,
por lo que los elementos de la maquetación deben ser analizados y estudiados hasta
en el último detalle.
Sin embargo aunque el bloque de texto sea el que menos atención recibe, es muy
importante cuidarlo ya que aquél lector que lo lea estará interesado en el tema, y por
tanto debemos hacerlo claro, legible, lo menos pesado posible.
Si pensamos en un bloque de texto que intenta vender algún producto, éste puede ser
la mejor estrategia para venderlo, ya que como hemos dicho antes aunque sea el que
menor atención capta, si es leído, es leído por una persona interesada en él.
El pie de imagen o pie de fotografía se coloca debajo de ellas aportando alguna
información adicional a las mismas. Debería ser corto y breve y aportar la información
necesaria para que el lector capte el mensaje que queremos darle con la imagen.
Las imágenes: Son unos de los elementos de la composición que más atraen la
atención del lector, ya que visualmente son más rápidas y atractivas de ver que el
texto. Estas a su vez, deben contener la información relacionada con el texto que las
acompaña, ya que de lo contrario, podríamos confundir al público lector.
Se pueden utilizar de manera más flexible, invadiendo varias columnas, incluso en
ocasiones superando los límites de las retículas. No hay restricciones en cuanto a
tamaño ya que pueden llegar a ocupar una página entera en un color, dos o a todo
color o por el contrario estar contorneadas por el texto produciendo efectos visuales
atractivos y dándole mayores oportunidades creativas al diseñador.
También pueden introducirse otro tipo de gráficos como por ejemplo dibujos,
ilustraciones, caricaturas etc. Ya sea con el objetivo de aportar un ligero tono
humorístico, o de explicar gráficamente una información que puede ser más fácilmente
comprensible por medio de imágenes que por medio de densos datos.
Los espacios: Los espacios que se encuentran en blanco, no significan nada, pero la
composición permite que el texto se lea de una forma más clara y que la composición
produzca un efecto visual agradable.
Los márgenes
En un documento existen cuatro márgenes:
• El Margen Superior
• El Margen Inferior
• El Margen Interior
• El Margen Exterior
Dependiendo de los márgenes que escojamos para nuestro documento estos pueden
ayudarnos a dotarlo de una sensación de formalidad, informalidad, lujo, tensión, o
darle distintos énfasis a determinados elementos de la composición.
En cuestión de márgenes no hay una regla que indique una medida fija, sin embargo
en el campo de la maquetación, los profesionales suelen usar unos márgenes
predefinidos para cada clase de maquetación que se va a realizar.
Para aplicar una buena medida de los márgenes podemos seguir las siguientes
indicaciones:
• Aplicamos un espaciado coherente para el margen superior del documento.
• El 0,75 del espaciado del margen superior se lo aplicamos al margen interior.
• El doble del margen interior se lo aplicamos al margen exterior.
• Y el doble del margen superior en el margen inferior.
Existen razones estéticas y prácticas por las que dependiendo de que tipo de
documento sea, se apliquen unos márgenes u otros, por ejemplo la razón por la que
se aplica un margen inferior del doble que el margen superior en muchas ocasiones es
una cuestión práctica ya que esa zona es dónde descansa la vista del lector cuando
acaba de hojear la página. De la misma manera el resto de márgenes evitan que el
lector se agobie proporcionándole espacios en blanco para descansar la vista y
facilitando así la lectura.
Las tabulaciones del texto
Cuando realizamos una composición podemos ilustrarla con textos, imágenes, formas
etc. Pero a la hora de pensar en la maquetación de esa composición debemos
plantearnos la alineación del texto como aspecto a tener en cuenta.
Las posibles alineaciones de texto que nos podemos plantear son:
• Alineación del texto a la izquierda: De todas las alineaciones es la forma
más conveniente y más natural para los textos largos, este tipo de alineación
del texto crea además una sensación de espaciado entre palabras que facilita
mucho la lectura.
• Alineación del texto a la derecha: Este tipo de alineación dificulta mucho la
lectura, por los que es usada en la mayoría de los casos para los textos
pequeños, poco extensos y en casos especiales.
• Alineación de texto justificado: El texto resulta más legible, aporta mayor
facilidad de lectura normalmente si los espacios entre letras y palabras son
uniformes, pero en el caso de la justificación de un texto en ocasiones deja
huecos entre palabras que pueden llegar a conseguir entorpecer la lectura.
• Alineación centrada del texto: La alineación centrada de un texto resulta
ideal para frases muy cortas y muy concretas como por ejemplo títulos,
titulares, citas, poemas, frases célebres etc.
• Alineación asimétrica del texto: Una alineación asimétrica del texto suele
emplearse para darle a la composición un aspecto más expresivo, más
creativo, centrar la atención en determinadas áreas etc., pero sería muy
incómodo o muy costoso leer una gran extensión de texto con este tipo de
alineación.
Proyectos 2o Técnico Superior en Gráfica Publicitaria
Errores frecuentes en la maquetación de textos
Palabra suelta en la última línea de un párrafo
Muchas veces podemos ver en la última línea de un párrafo una palabra suelta, sin
embargo lo que se debería hacer cuando sucede esto maquetando un texto, es ajustar
el interletrado para que esa palabra suba a la línea anterior, o la última palabra de la
línea anterior baje a la última línea del párrafo. Tampoco sería muy correcto poner un
monosílabo al final de una línea.
Los llamados ríos
Los ríos son espacios en blanco que quedan entre las palabras, pero que unidos a los
espacios de líneas superiores e inferiores forman caminos blancos en el texto y
dificultan la legibilidad.
Estos ríos son normalmente originados por el tracking y el kerning de las tipografías, la
justificación y el tamaño que estemos empleando en el texto. La justificación total por
ejemplo, suele crear grandes ríos, ya que este tipo de justificación fuerza al máximo a
la tipografía a ajustarse a un espacio que no es el suyo natural.
Las particiones de palabras al final de una línea
Las particiones son aquellos puntos donde se separan las sílabas de una palabra. En
algunas ocasiones, podemos encontrarnos con columnas cortas en las que tenemos
que usar palabras largas y este es uno de los pocos casos en los que podría ser
óptimo dividir una palabra en silabas, ya que incluso podría solucionar problemas con
los ríos y anchos de línea muy desproporcionados y desiguales. Sin embargo lo que si
que nunca debe hacerse es dejar una silaba sola, en una línea. Por este motivo nunca
se deberían dividir palabras de dos silabas, y si tenemos que dividir a la fuerza una
palabra de tres silabas, la silaba suelta quedará en la línea superior y nunca en la
inferior.
El ancho de columnas y líneas
Un texto que está distribuido en varias columnas, será mucho más fácil de leer que
uno con líneas mas largas, ya que a nuestro ojo le costará mas trabajo saltar del final
de una línea larga al principio de la siguiente. El interlineado no debe ser demasiado
pequeño, ya que cuando es así, es frecuente que nuestra vista al acabar de leer una
línea, se vaya a una línea que no es la siguiente a la que estábamos leyendo, y por lo
tanto interrumpimos la lectura momentáneamente o incluso conseguimos que el lector
no siga visualizando el texto.
Elegir la tipografía.
Las tipografías sin serif dan un aire más moderno a una composición, y por ello en
muchas ocasiones muchos diseñadores se decantan por ellas, sin embargo las
tipografías con serif facilitan la lectura en textos largos, ya que crean una línea base
imaginaria que ayuda al lector a reconocer tanto, la línea en la que se encuentran,
como la anterior y posterior dotándolo de mayor fluidez. Además existen también
tipografías de mucha calidad estética, y que hacen las palabras más redondeadas
pero en ocasiones también las hacen más largas. Esto no es un problema muy grave,
pero debido a que nuestra vista lee a base de "saltos", cuando las palabras son más
alargadas, nuestro ojo debe dar más saltos por línea, lo que hace que la lectura sea un
poco más pesada.
Por supuesto también hay que decir, que no es lo mismo saltarse algunas de estas
reglas en algún momento de las composiciones, que saltárselas sistemáticamente por
desconocimiento o por dejadez, porque es entonces cuando estaríamos hablando de
un mal diseño, ya que de lo que se trata es de maquetar estéticamente, pero
reduciendo al máximo las interferencias del mensaje que transmitimos al lector.
DIA VEINTIDÓS 03/07/2014
Hoy hemos empezado y acabado la teoría de usabilidad y hemos estado buscando páginas que no cumplirían los criterios necesarios, las había bastante nefastas no sólo en lo tocante a estética sino también comprensión, navegación etc, de hecho, como curiosidad, voy a añadir un enlace que encontré de distintas páginas bastante malas en estos aspectos, aún con todo, hubo compañeros que las encontraron peores.
http://www.cssblog.es/50-sitios-web-incorrectamente-disenados/
El examen de diseño gráfico al final no fue tan difícil como esperaba, tuvimos veinte preguntas de tipo test y luego tuvimos que hacer un comentario de una imagen de una página de revista o libro que nos puso en la pantalla,hablar acerca de todo lo que se nos ocurriese. Ahora de hecho nos quedó hasta tiempo después de ello así que voy a aprovechar para subir apuntes
http://www.cssblog.es/50-sitios-web-incorrectamente-disenados/
El examen de diseño gráfico al final no fue tan difícil como esperaba, tuvimos veinte preguntas de tipo test y luego tuvimos que hacer un comentario de una imagen de una página de revista o libro que nos puso en la pantalla,hablar acerca de todo lo que se nos ocurriese. Ahora de hecho nos quedó hasta tiempo después de ello así que voy a aprovechar para subir apuntes
DIA VEINTIUNO 02/07/2014
Hoy hemos hecho las validaciones de diferentes páginas para,finalmente redactar un informe a los propietarios o los que gestionen una de ellas en concepto de informar acerca de los errores encontrados. También acabé de subir la teoría respecto accesibilidad, mañana ya daremos usabilidad y ya la subiré.
Por fin acabé el logo definitivo de la pastelería cafetería, lo llamé cookie bunny, lo hice en un folio en horizontal, con trazos claros y pintada adecuadamente. Mañana ya tenemos examen de diseño gráfico.
Antes de irnos vimos un pedazo de una entrevista a Steve Jobs, bastante interesante
Por fin acabé el logo definitivo de la pastelería cafetería, lo llamé cookie bunny, lo hice en un folio en horizontal, con trazos claros y pintada adecuadamente. Mañana ya tenemos examen de diseño gráfico.
Antes de irnos vimos un pedazo de una entrevista a Steve Jobs, bastante interesante
miércoles, 2 de julio de 2014
INFORME DE VALIDACIÖN
Muy
buenos días:
Me
dirijo a usted para informarle que soy una alumna del curso de diseño
y confección de páginas web, que ahora mismo estamos con la unidad
formativa 1302 y estamos tratando el tema de accesibilidad, por lo
tanto he procedido a analizar con el programa Total Validator su
página http://www.empleacantabria.com/es/portal.do?TR=C&IDR=246
para comprobar si reúne los requisitos necesarios según la norma
UNE 139803:2004 y de obligado cumplimiento debido a su póstumo real
decreto 1494/2007.
Le
adjunto aquí una página web en la que puede informarse más al
respecto http://es.m.wikipedia.org/wiki/Accesibilidad_web
Le
informo pues que he encontrado en su página distintas
irregularidades en lo tocante a su accesibilidad, las cuales son de
verdadera relevancia para algunos usuarios ya que no podrán acceder
satisfactoriamente a los contenidos. Procedo entonces a explicarle
dichos errores:
Existe
un error de análisis en esta línea
583 <a href = "http://www.empleacantabria.com/es/portal.do?IDM=41 y NM = 1 "rel =" external ">
dado que no se debe utilizar el carácter & n valores de atributos, ya que puede ser confundido con el inicio de las referencias de caracteres. Este error también puede aparecer si se utiliza una referencia de carácter, y no lo termina con un punto y coma.
Podemos apreciar además errores como <label for="textobusqueda">, en este caso, la etiqueta label no tiene nombre, quizás se auto rellene de forma dinámica, no obstante para un usuario ciego es un inconveniente dado que no puede saber qué hay escrito ahí.La
etiqueta <label> se
utiliza para adjuntar información a los controles.
El valor
del atributo for debe
ser igual al valor id del
elemento input para que los reconozca como asociados. Un ejemplo
sería éste: <label
for="html">HTML</label>
Saludos
cordialesVALIDACIÓN DE ACCESIBILIDAD
Procedo ahora a analizar varias páginas de distinto tipo y temática (administración pública, contenidos, comercio al por menor, agencia de viajes y una de temática libre, yo personalmente escogí la página de alsa) con el programa Total Validator y he encontrado distintas irregularidades, símplemente basándome en las de tipo A.
En esta página encontramos diversos
elementos que no reúnen los requisitos necesarios:
Existe un error de análisis en esta
línea
583 <a href = "http://www.empleacantabria.com/es/portal.do?IDM=41 y NM = 1 "rel =" external ">
dado que no se debe utilizar el carácter & n valores de atributos, ya que puede ser confundido con el inicio de las referencias de caracteres. Este error también puede aparecer si se utiliza una referencia de carácter, y no lo termina con un punto y coma.Encontramos además errores como <label for="textobusqueda">, en este caso, la etiqueta label no tiene nombre, quizás se auto rellene de forma dinámica, no obstante para un usuario ciego es un inconveniente dado que no puede saber qué hay escrito ahí.El valor
del atributo for debe
ser igual al valor id del
elemento input para que los reconozca como asociados. Un ejemplo
sería éste: <label
for="html">HTML</label>La
etiqueta <label> se
utiliza para adjuntar información a los controles.-Página: http://www.barceloviajes.com/ofertas/vuelos/agencias-de-viajes-online.jsp
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E885 - 15 pieza (s): Asociar etiquetas correctamente con sus controles. Ver http://www.w3.org/TR/WCAG20-TECHS/F68.html (que aparece en una nueva ventana)
E894 - 33 pieza (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
P871 - 8 pieza (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
W860 - 1 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
W863 - 1 instancia (s): Dado que los grupos de botones de opción y casillas de verificación son múltiples controles, es particularmente importante que se pueden agrupar semánticamente para que puedan ser más fáciles de tratar como un único control. Ver http://www.w3.org/TR/WCAG20-TECHS/H71.html (que aparece en una nueva ventana)
W864 - 1 instancia (s): Siempre se debe identificar el idioma principal de un documento. Ver http://www.w3.org/TR/WCAG20-TECHS/H57.html (que aparece en una nueva ventana)
W868 - 2 instancia (s): Si usted tiene diferentes enlaces con el mismo texto de enlace que puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un atributo 'title' única para cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
E899 - 4 de instancia (s): Si usted tiene diferentes enlaces con el mismo texto del enlace y 'title' puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un "título" único a cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
P892 - 2 instancia (s): Etiquetas que se utilizan puramente para crear un efecto de presentación visual no deben ser utilizados. Usted debe usar CSS para controlar la maquetación y la presentación para que los usuarios y sus accesorios pueden controlarlo. Ver http://www.w3.org/TR/WCAG20-TECHS/G140.html (que aparece en una nueva ventana)
W860 - 1 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
W865 - 5 instancia (s): El primer elemento dentro de la <fieldset> debe ser un <legend>, que proporciona una etiqueta o instrucciones para el grupo. Ver http://www.w3.org/TR/WCAG20-TECHS/H71.html (que aparece en una nueva ventana)
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E894 - 2 instancia (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
P871 - 26 de instancia (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
P883 - 23 pieza (s): elementos de encabezado se debe pedir correctamente. Por ejemplo, los elementos H2 deberían seguir a los elementos H1, los H3 deberían seguir a los elementos H2, etc Los desarrolladores no debe saltarse niveles o usar títulos para efectos de presentación. Ver http://www.w3.org/TR/WCAG20-TECHS/F43.html (que aparece en una nueva ventana)
W860 - 2 instancia (s): Al utilizar <img>, es válido tener un 'alt' vacío de atributos para las imágenes que no tienen contenido; tales como separadores y partes de las imágenes más grandes que se han roto o utilizados para otros fines de diseño. Es posible que desee comprobar que en este caso el texto alt simplemente no ha sido olvidado. Ver http://www.w3.org/TR/WCAG20-TECHS/F30.html (que aparece en una nueva ventana)
E872 - 1 instancia (s): Usted debe proporcionar un mecanismo que permita a los usuarios solicitar explícitamente cambios de contexto. El uso previsto de un botón de envío es generar una petición HTTP que envía los datos introducidos en un formulario, por lo que es un control apropiado utilizar para provocar un cambio de contexto. Ver http://www.w3.org/TR/WCAG20-TECHS/H32.html (que aparece en una nueva ventana)
E885 - 1 instancia (s): Asociar etiquetas correctamente con sus controles. Ver http://www.w3.org/TR/WCAG20-TECHS/F68.html (que aparece en una nueva ventana)
E894 - 15 pieza (s): ID deben ser únicos en un documento para garantizar que las páginas web pueden ser interpretadas de forma coherente. Ver http://www.w3.org/TR/WCAG20-TECHS/F62.html (que aparece en una nueva ventana)
E899 - 27 de instancia (s): Si usted tiene diferentes enlaces con el mismo texto del enlace y 'title' puede ser confuso para el usuario. Por lo que debe o bien cambiar el texto del enlace o añadir un "título" único a cada enlace. Ver http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html (que aparece en una nueva ventana)
P871 - 2 instancia (s): Describa el propósito de un enlace al proporcionar un texto descriptivo como el contenido del elemento <a>. La descripción permite al usuario distinguir el enlace de otros enlaces en la página web y ayuda al usuario a determinar si seguir el enlace. El URI de destino generalmente no es suficientemente descriptivo. Ver http://www.w3.org/TR/WCAG20-TECHS/H30.html (que aparece en una nueva ventana)
P883 - 16 de instancia (s): elementos de encabezado se debe pedir correctamente. Por ejemplo, los elementos H2 deberían seguir a los elementos H1, los H3 deberían seguir a los elementos H2, etc Los desarrolladores no debe saltarse niveles o usar títulos para efectos de presentación. Ver http://www.w3.org/TR/WCAG20-TECHS/F43.html (que aparece en una nueva ventana)
Suscribirse a:
Entradas (Atom)