Universidad Tecnolgica de Ciudad Jurez.

Ingeniera de Software II.

Grupo:
TSM51.

Integrantes:
Jonathan Aarn Chico Amaya.
Spencer Jacob Macas Zermeo.





Profesor: Alejandro Sols. Fecha: 24/05/2014.




Introduccin.

El presente trabajo explica como es que se desarrollaron las interfaces que se usaran en el
proyecto de desarrollo de software II, para eso nosotros nos basamos en las guas de estilo
que se aplican dicho proyecto. Por ultimo nosotros explicamos la justificacin de por que es
que diseamos cada parte de la interfaz y su uso.




















Contenido
Introduccin. ....................................................................................................................................... 2
Estndares para Interfaces. ................................................................................................................ 4
Guas de estilo. ................................................................................................................................... 7
Caractersticas de una Gua. ........................................................................................................... 7
Creacin de una Gua. .................................................................................................................... 8
Guas de estilo para la Web. ........................................................................................................... 8
Internacionalizacin. ........................................................................................................................... 9
Ordenaciones. ................................................................................................................................. 9
Diseo. ............................................................................................................................................ 9
Gua de Estilo para la Documentacin del Proyecto. ........................................................................ 11
Diseo para el Acceso Rpido. ..................................................................................................... 12
Bl oque de navegaci n ar r i ba: ............................................................................................. 13
Combinacin de los anteriores: ..................................................................................................... 13
Diseando la estructura. ............................................................................................................... 14
Presentacin de los contenidos. .................................................................................................... 14
Tipografas. ................................................................................................................................... 14
Formatos Imgenes ...................................................................................................................... 15
Guardar imgenes para web. ........................................................................................................ 15
Imgenes con texto. ...................................................................................................................... 16
Texto alternativo de las imgenes. ................................................................................................ 16
Enlaces web. ................................................................................................................................. 16
Mens desplegables. .................................................................................................................... 17
Formularios web. ........................................................................................................................... 17
Diseo de los elementos de un formulario. .................................................................................... 18
Tablas. .......................................................................................................................................... 18
Animaciones.................................................................................................................................. 19
Otros contenidos posibles. ............................................................................................................ 19
Normas para Incorporar Elementos Grficos y Multimediales. .......................................................... 20
Interoperabilidad. .......................................................................................................................... 21
Estndares Internacionales............................................................................................................... 21
Validacin de HTML. ..................................................................................................................... 21
Validacin de CSS. ....................................................................................................................... 21
Guas de estilo para la Web. ......................................................................................................... 22
La eleccin del color. ..................................................................................................................... 22
Navegabilidad. .............................................................................................................................. 22
Control del usuario. ....................................................................................................................... 23
Contenido. ..................................................................................................................................... 23
Imgenes. ..................................................................................................................................... 23
Color. ............................................................................................................................................ 23
Diseo. .......................................................................................................................................... 23
Tecnologas y Mercado. ............................................................................................................... 24
Hojas de estilos. ............................................................................................................................ 24
Formularios. .................................................................................................................................. 24
Diseo de interfaz de la aplicacin.................................................................................................... 25
Justificacin de las interfaces. .......................................................................................................... 28
Referencias. .................................................................................................................................. 36


















Estndares para Interfaces.
La publicacin de estndares de la interfaz es un tema relativamente reciente, aunque es una
preocupacin desde hace muchos aos. En este tema probablemente la organizacin para hacer
estndares internacionales ISO, ha sido la ms activa.
Mencionaremos la existencia de estndares de iure que estn relacionados con el diseo de
sistemas interactivos. De stos, algunos estn ya completamente publicados, mientras que otros
estn en proceso de elaboracin, ya que tal y como se mencion con anterioridad, la creacin de un
estndar es un proceso complejo y largo en el que los documentos van pasando por diferentes
estados.
En la tabla 4.1., y a modo de ejemplo, se reflejan los diferentes estados implicados en el proceso de
desarrollo de un estndar ISO.






Guas de estilo.
Una Gua de estilo es un documento que recoge normativas y patrones bsicos relacionados con el
aspecto de un interfaz para su aplicacin en el desarrollo de nuevas pantallas dentro de un
entorno concreto.
Las Guas de Estilo, generalmente se centran en el aspecto, puntos como diseo y maquetacin
(colores, tipografas y pxeles), y apenas incluye criterios o casustica para aplicar en el proceso de
diseo de interfaz (Significado). A menudo se confunde el trmino Gua de Estilo con Gua de
Usabilidad y un cambio de diseo lleva a definirse como una nueva usabilidad. Hay personas que
identifican aspecto y usabilidad: esto lleva a que dos aplicaciones pueden ser radicalmente opuestas
en usabilidad cumpliendo ambas las pautas de una Gua de Estilo. Para que una Gua de Estilo
pueda convertirse en un manual de usabilidad debera tocar puntos relacionados con significado
ofreciendo criterios para, dentro de un estilo definido, seleccionar las caractersticas que se adapten
al destino final de una aplicacin.
Las Guas de Estilo son creadas inicialmente como documentos voluminosos muy vistosos que
ilustran sobre la apariencia de la interfaz de un sistema. Su problema ms grave es su falta de
usabilidad.
Estn pensadas desde una perspectiva de diseo y marketing y no tienen en cuenta las
necesidades de sus verdaderos destinatarios: Diseadores y Programadores de interfaz.
Una buena Gua de Estilo, debe integrarse de manera eficiente en el proceso de trabajo de un
programador ofreciendo criterios y ayudando en la toma de decisiones en aspectos de diseo de
interfaz.
No deben ser una carga: han de ir acompaadas por acciones de promocin y formacin y
materiales de apoyo que ahorren trabajo al programador.

Caractersticas de una Gua.
Una Gua de Estilo debera abordar la perspectiva del significado de la interfaz:
Usable. Invitar al uso. Debe integrarse de forma cmoda en el proceso de trabajo de un
desarrollador dndole respuestas a situaciones propias dentro de la construccin de la interfaz de
una aplicacin.
Visual. Huir del texto. Por experiencia, una Gua de Estilo no se usa, y esta probabilidad se reduce
drsticamente cuando se basa en texto lo que lleva a una desactualizacin y abandono.
Educativa. Rica en ejemplos aplicables que permitan desarrollar criterios mnimos de usabilidad y
esttica al personal tcnico.
Actualizada: Debe contener ejemplos tiles, actuales y materiales para su aplicacin directa
disponibles a travs de repositorios.
Sin embargo la experiencia demuestra que los equipos de desarrollo no se apoyan en las Guas de
Estilo para realizar su trabajo. A continuacin se muestran algunas razones:
Resultan demasiado abstractas y simplistas. Se crean desde reas (marketing, negocio) que
carecen de visin de la complejidad del trabajo del desarrollador obviando su problemtica cotidiana.
Falta de adecuacin a los mtodos de desarrollo. El desarrollador no tiene tiempo para leer ni
asimilar una documentacin que adems de ser voluminosa, le resulta ajena.
Demasiado detalle. La documentacin entra en cuestiones de detalle (pixeles de separacin entre
elementos, tipografas, colores y valores hexadecimales) impropias del trabajo de un desarrollador.
Falta de mantenimiento consistente. No existe una poltica de mantenimiento del manual con una
visin integradora de todo el proceso de desarrollo
Falta de apoyo. La Gua se publica sin acciones de promocin, formacin y apoyo.
No tienen utilidad real. No se promueve la reutilizacin de soluciones (conocimiento, componentes)
entre los diferentes equipos de desarrollo.

Creacin de una Gua.
Desarrollar una Gua de Estilo es un primer paso hacia un cambio cultural en las metodologas de
desarrollo que deriva en la adopcin de tcnicas de Diseo Centrado en el Usuario. Es necesario un
equipo nico de especialistas en interfaz de usuario con visin horizontal integradora del conjunto de
sistemas y procesos de desarrollo que garanticen un entorno de aplicaciones consistente. Los
cometidos de este equipo son:
Documentar. Crear documentacin de carcter visual, compuesta de literatura esencial, ejemplos
razonados.
Formar. Dar charlas introductorias, cursos breves peridicos con el objetivo de desarrollar un criterio
de usabilidad.
Dar soporte. Desde el arranque hasta el cierre del proyecto resolviendo dudas, detectando nuevas
necesidades que se puedan plantear e incorporndolas a la Gua.
Deteccin de patrones. Identificacin de patrones que puedan derivar en componentes de interfaz
reutilizables para su uso por los diferentes equipos de desarrollo. Para abstraer al programador de
tareas de diseo, estos objetos deben llevar embebidos aspectos visuales y estticos. Deben ser
puestos a disposicin de los equipos de programacin a travs de un repositorio nico actualizado.
Investigacin e innovacin: tener identificados patrones reutilizables y componentes libera recursos
de realizar tareas repetitivas y de escaso valor aadido para la deteccin de lneas de mejora del
interfaz, metodologa y procesos de desarrollo. Adecuacin a estndares tcnicos, accesibilidad,
mejoras, tecnologas alternativas. Programar y realizar tests y pruebas con usuarios. Conocer la
apreciacin de los usuarios de las soluciones incorporadas permitir realizar correcciones e
introducir mejoras.

Guas de estilo para la Web.
Disear para la Web es diferente de disear interfaces de usuario para el software tradicional,
aunque tambin hay similitudes: ambos son sistemas interactivos y ambos son diseo de software,
no diseo de objetos fsicos. Es por ello, que algunos de los principios de diseo de interfaces de
usuario tradicionales pueden ser directamente aplicables, pero obviamente la Web exige otra serie
de consideraciones, partiendo del hecho de que la metfora empleada para la Web ya no est
basada en la metfora del escritorio como en las interfaces grficas tradicionales.
Una caracterstica importante de la Web es la falta de interfaces de usuario comunes, ya que
normalmente la prioridad es conseguir una interfaz atractiva, diferenciada de las otras, para que los
usuarios visiten el sitio Web y lo vuelvan a visitar.

Internacionalizacin.
Se denomina internacionalizacin al desarrollo de un diseo que se pueda usar en todo el mundo,
mientras que la configuracin regional hace referencia a la creacin de una versin especfica para
una regin o zona especfica. El proceso de crear un conjunto de elementos especficos de un pas o
regin se llama localizacin. La internacionalizacin implica minimizar en la interfaz elementos que
sean dependientes de un pas o cultura.
La configuracin regional por otro lado suele implicar la traduccin y adaptacin del programa. Un
programa que contemple la localizacin permite modificar cualquier elemento dependiente de la
lengua o contexto cultural de un pas o regin, como por ejemplo clips de audio, texto, grficos,
formatos de nmeros, fechas, monedas y otros sistemas operativos como Windows o Linux incluyen
caractersticas que ayudan al programador a separar aquellos elementos susceptibles de necesitar
ser localizados de aquellos otros que pertenecen al cuerpo principal del programa.
En el caso concreto de diseo de sitios Web se han convertido en la principal herramienta de
difusin de informacin para una audiencia variada y de gran tamao que requiere de un
procesamiento de informacin sencillo. La informacin que se muestra al usuario est compuesta de
partes diferentes que han de trabajar en conjunto de forma coordinada para que la informacin sea
accesible y universal, es decir, estas partes que integran la Web han de funcionar bajo cualquier
circunstancia, en cualquier pas, con cualquier idioma y cultura. Por este motivo la
internacionalizacin podra definirse como un proceso a travs del cual se van a disear sitios Web
adaptables a diferentes idiomas y regiones sin necesidad de realizar cambios en el cdigo. La
utilizacin de formatos y protocolos que no establezcan barreras a los diferentes idiomas, sistemas
de escritura, cdigos y otras convenciones locales, es esencial para hablar de internacionalizacin
en un sitio Web.

Ordenaciones.
Las ordenaciones son importantes en el proceso de internacionalizacin, y un tema complejo. En un
principio, la regla que siguen las ordenaciones de caracteres es ir de la A a la Z, maysculas
primero, y despus las minsculas. Los nmeros se ordenan de 0 a 9. Este tipo de regla se complica
por ejemplo cuando tenemos letras que se componen de dos caracteres. As, en castellano, ch es un
doble carcter que se trata como un slo carcter y se ordena despus de la c y antes de la d.

Diseo.
Los diseadores han de considerar las necesidades a corto y largo plazo de la audiencia a la que se
dirigen durante el desarrollo. El diseo est centrado en el usuario y fundamentado en las tareas que
ste realiza en la aplicacin a la que el apoyo en lnea respalda. El diseador ha de tener
fundamentalmente dos perspectivas a la hora de iniciar su trabajo. Las Cuestiones de Diseo Global
son detalladas en tabla 4.7., y las Cuestiones de diseo local son detalladas en la tabla 4.8.










Gua de Estilo para la Documentacin del Proyecto.



Diseo para el Acceso Rpido.

Una de las caractersticas que hace tan popular a la tecnologa web es su facilidad para mostrar
contenidos de manera grfica y para vincular de manera fcil documentos de diferentes orgenes. No
obstante, para que esta simpleza pueda darse efectivamente, es necesario que quienes desarrollen
sitios y contenidos en esta plataforma, cumplan con ciertos estndares que aseguren que la mayor
parte de los usuarios podrn ver lo que se publica. Para ello, es de suma importancia que los sitios
que se construyan cumplan efectivamente con ciertas caractersticas de publicacin que permitan
conseguir dos objetivos muy concretos:
Que las pginas se desplieguen rpidamente y sin dificultades tcnicas en los computadores de los
usuarios.
Que las pginas puedan ser visualizadas por los usuarios de la misma manera en que sus autores
las han construido.
Para conseguir ambos objetivos, es necesario que quienes construyan los sitios web hagan uso de
un conjunto de buenas prcticas que se han obtenido de la experiencia en la construccin de este
tipo de contenidos digitales, y tambin, que se aseguren de cumplir con estndares mundiales en
este mbito, los que sern presentados en este captulo.


Peso de las Pginas.
Los sitios web deben tener un peso mximo permitido por pgina que no supere una cantidad
razonable de kilobytes (kb) que impidan su visualizacin. En este sentido, lo razonable depender
directamente del tipo de sitio que se est desarrollando y de la conexin con la que cuente la mayor
parte de los usuarios.
Las normas internacionales al respecto indican que un usuario no esperar ms de:
5 segundos para que aparezca algo visible en la pantalla.
10 segundos para que aparezca algo legible en la pantalla.
30 segundos hasta hacer un click hacia otra parte del sitio o hacia otro sitio.


Diagramacin de las Pginas.
Uno de los aspectos ms importantes de las estructura de una pgina web es decidir dnde
posicionaremos los mens de navegacin y enlaces a otras pginas web y dnde posicionaremos el
contenido que van a consultar los navegantes. Existen diversos tipos de estructuras estndares de
pginas web que especifican la posicin de los mens de navegacin y el contenido, mantenindose
esta estructura y diseo durante toda la navegacin por el sitio web.
Sin que sea sorprendente, los mens de navegacin acostumbran a posicionarse en los mrgenes
de la pgina, dejando los contenidos en el centro. Por defecto, las estructuras estndares posicionan
los mens de navegacin arriba o en los laterales, pero tambin existen otras posibilidades.

Bl oque de navegaci n arri ba:

Ideal si el sitio web no tiene demasiadas secciones. Los mens se sitan en lnea y ocupan mucho
espacio. Es fcil si los mens se despliegan con otros submens (es ms fcil la navegacin que si
los submens se abren lateralmente).


Combinacin de los anteriores:

Si tenemos muchos enlaces a presentar, siempre podemos utilizar cualquier combinacin de los
anteriores (arriba e izquierda; izquierda y derecha; arriba, izquierda y derecha;), sobre todo si los
mens se pueden agrupar en dos o tres grandes grupos.

Diseando la estructura.
Conociendo las estructuras web ms utilizadas, ya podemos empezar a dibujar la estructura
especfica de nuestra pgina web, dibujando y posicionando a nuestro gusto los bloques de mens,
contenido, grficos, y los sub-bloques dentro de cada uno de los anteriores. Cada diseador tendr
su propio mtodo para plasmar la estructura imaginada de una pgina web a la pantalla de su
ordenador. Aqu transcribimos el mtodo de trabajo especfico de un diseador: Comienzo por
bosquejar algunos posibles diseos sobre papel. Despus de unos pocos de estos bocetos, decido
cual me gusta ms o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o
freehand), y uso la herramienta de rectngulo para bloquear las reas que he marcado en mi papel.
Una vez que he definido mi diseo, experimento con los colores de fondo y de los rectngulos hasta
tener un esquema de color slido. Y sigo trabajando con pxeles hasta que, finalmente, tengo un
borrador para mostrar al cliente.
Presentacin de los contenidos.
Ahora podemos empezar a disear los muebles, es decir, disear en contenido en cada uno de los
bloques o recuadros anteriormente mencionados.
Tipografas.
Tradicionalmente, el uso de tipografas en el diseo web ha sido un problema. Por defecto, los
navegadores web solo podan presentar el texto con las tipografas que el usuario tenga instaladas
en su sistema operativo (Windows, Mac, Linux,). Actualmente esta limitacin se ha solucionado,
pero los efectos web que se pueden realizar a las tipografas (negrita, subrayado, alienacin)
continan siendo muy limitados.
De todos modos, la mayora de programadores web siguen utilizando las llamadas tipografas
seguras, definiendo un listado de tipografas que se van a intentar utilizar en orden establecido (Si la
primera fuente no est disponible en el ordenador del usuario, la segunda fuente ser utilizada y as
sucesivamente). Los grupos de fuentes ms utilizados son los siguientes:
Verdana, Geneva, sans-serif.
Georgia, Times New Roman, Times, serif.
Courier New, Courier, monospace.
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif.
Trebuchet MS, Arial, Helvetica, sans-serif.
Arial Black, Gadget, sans-serif.
Times New Roman, Times, serif.
Palatino Linotype, Book Antiqua, Palatino, serif .
Lucida Sans Unicode, Lucida Grande, sans-serif.
MS Serif, New York, serif.
Lucida Console, Monaco, monospace.
Comic Sans MS, cursive.
Con independencia de la tipografa utilizada, deberemos definir su tamao. Normalmente, las
tipografas se trabajan en pxeles, que son equivalentes a puntos cuando la resolucin de la pantalla
es de 72 PPP (pxeles por pulgada). A modo de orientacin, trabajar con 11 o 12 pxeles facilita la
lectura de la mayora de las tipografas, y casi nunca se trabaja con tipografas menores a 8 o 9
pxeles.
Opcionalmente, en vez de trabajar con pxeles, podemos definir el tamao de una tipografa como un
porcentaje de la tipografa "media" definida en el ordenador del usuario.
Formatos Imgenes
Los formatos de imgenes que cualquier navegador web puede presentar son: .gif, .jpg y .png.
GIF: Es un formato que conserva cada pixel de la imagen original, muy eficiente para grficos
sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con mayor detalle a
medida que el navegador la descargue. Permite crear animaciones y transparencias del 100%.
PNG: Es un formato similar al GIF pero no permite crear animaciones. En cambio permite
degradados de transparencias.
JPG: Comprime mucho ms las imgenes que los anteriores formatos. Excelente para trabajar con
fotografas de muchos colores y texturas, porqu mantiene la calidad percibida con pesos de imagen
mucho ms bajos. No permite transparencias ni animaciones.
Teniendo en cuenta los formatos admitidos, las imgenes no pueden ser vectoriales ni contener
capas. Solo se trabaja con pxeles.

Guardar imgenes para web.
Actualmente, la mayora de programas de tratamiento de imgenes tienen la opcin "guardar para
web". Estas opciones permiten definir transparencias, tamao y disminuir la calidad de la imagen y
sus colores.
Idealmente se tienen que guardar al tamao que se va a presentar en la pgina web, o no ser que
vayamos a permitir que la imagen se presente ms grande en navegadores con ms resolucin. Es
importante recordar que, con las conexiones de internet actuales, podemos calcular muy
orientativamente que por cada incremento de peso de 500Kb a 1Mb, una pgina tarda un segundo
ms a descargarse y abrirse. Para evitar pesos muy elevados de pginas con muchas imgenes,
puede ser positivo trabajar con imgenes pequeas que se ampliaran cuando el usuario las
seleccione o clique. Si una imagen contiene texto, antes de guardarla es mejor ponerle el efecto anti-
aliasing, un ligero desenfoque en los bordes curvos que har ms suaves las transiciones entre los
colores.
Imgenes con texto.
Una posible solucin a este problema con las tipografas es utilizar imgenes, lo cual nos permitir
crear cualquier efecto que queramos a las tipografas.

Texto alternativo de las imgenes.
Para que el web est bien posicionado en los buscadores, es importante pasar las imgenes al
maquetador junt con el texto alternativo que las define. Los buscadores toman este texto alternativo
como la descripcin o contenido de la imagen.
Enlaces web.
Los enlaces web pueden ser texto o imgenes. Para diferenciarlos de otros elementos que no son
enlaces, el puntero (o ratn) cambia de la forma fecha a mano cuando se pasa por encima. De todos
modos, el diseo de la pgina web tambin debe de diferenciar los enlaces utilizando colores
distintos, subrayados, tipografas distintas, Por ejemplo, debemos evitar que los enlaces no
parezcan enlaces o que el texto resaltado se parezca a enlaces.
Por defecto, podemos definir imgenes diferentes o efectos de tipografa diferentes segn distintos
eventos relacionados con el enlace:
El enlace no ha estado visitado por el usuario con anterioridad.
El enlace ha estado visitado por el usuario con anterioridad.
El puntero del usuario pasa por encima del enlace (eso sirve para iluminar o destacar ms el enlace).
El usuario clica sobre el enlace. Eso puede suceder tan rpido en algunos navegadores que a la
prctica no es se utiliza este evento.

Mens desplegables.
Opcionalmente se puede programar que al pasar el puntero del usuario por encima de un enlace (o
al clicarlo) se abra un bloque situado por encima de los otros bloques (o tambin se puede hacer que
el nuevo bloque se haga espacio entre los otros bloques). Eso permitir disear un men
desplegable con nuevos enlaces listados en el bloque abierto. Deberemos definir en qu posicin se
va a presentar el nuevo bloque y la animacin que tendr al abrirse.
Formularios web.
Los formularios web se utilizan para interactuar con el usuario de un modo ms personalizado y
obtener informacin proporcionada por l mismo. Un formulario siempre capta la informacin y la
enva a un programa web que la trata, aadindola a una base de datos, enviando un correo
electrnico o presentando nueva informacin al usuario en funcin de la informacin introducida.
Un formulario web puede estar compuesto por los siguientes elementos:
Campo de texto: una lnea para introducir texto a la cual se puede especificar longitud de caracteres
a presentar, longitud mxima de caracteres a introducir, texto que aparece al inicio (normalmente se
presenta en blanco). Se puede definir como contrasea, de modo que el texto introducido no se vea.
rea de texto: diversas lneas en las que se puede introducir texto. Se puede especificar longitud en
caracteres de la lnea, nmero de caracteres por lnea, texto o valor inicial. Opcionalmente el campo
de texto se puede presentar con opciones que permitan disear el formato de la tipografa, insertar
imgenes, presentar enlaces de modo que el programa que capte la informacin la pueda tratar
como codificacin HTML o web (ejemplo editor HTML rea: http://www.dynarch.com
/projects/htmlarea/).
Botn: Se utiliza para enviar la informacin o para realizar otras opciones (por ejemplo, poner en
blanco todos los campos introducidos, comprobar la informacin como paso previo). Por defecto
se le define el nombre a presentar y la accin a realizar.
Casilla de verificacin: Pequeo recuadro que se puede marcar o desmarcar.
Botn de opcin: Pequeo crculo que se puede marcar o desmarcar (siempre tiene que existir un
circulo de la lista marcado).
Lista / men: Listado de opciones que se pueden marcar (una o varias). El listado puede estar
desplegado, mostrando todas las opciones o se puede desplegar cuando el usuario clique sobre el
listado.
Campo de archivo o imagen: Similar al campo de texto, pero tiene un botn al lado para que el
usuario pueda explorar sus directorios y seleccionar un archivo o imagen a enviar. Se pueden definir
los mismos valores que en el campo de texto y botn.
Campo oculto: A veces es necesario enviar informacin que el usuario no necesita ver, junto a la
que introduzca el mismo. En este caso se utilizan campos ocultos, que lgicamente no se tienen que
disear. Interesante artculo sobre los aspectos a tener en cuenta en el diseo de formularios web:
http://www.javajan.com/news.php?id=307-guia

Diseo de los elementos de un formulario.
Los distintos elementos de un formulario mencionados tienen un diseo por defecto que muchas
veces no encajar con diseos elaborados de una pgina web. As pues, cada uno de los elementos
se puede disear como si se tratara de un bloque (mrgenes, bordes, colores de fondo,) y el texto
se puede presentar con los mismos efectos definidos en la tipografa.

Tablas.
Aunque las tablas son unos elementos especficos frecuentemente utilizados en las pginas web, se
pueden disear contemplando las mismas posibilidades y limitaciones que los bloques secundarios,
los cuales sern posicionados unos al lado de otros, creando filas. Al mismo tiempo, las filas se irn
posicionando unas debajo de las otras.
Ejemplos de diferentes diseos para tablas:

Animaciones.
Todos los efectos mencionados anteriormente (posiciones de bloques, efectos de las tipografas,)
se pueden modificar de acuerdo a la secuencia temporal que queramos o de acuerdo a una
secuencia de acciones generadas por el usuario. Adems de modificar las caractersticas de los
bloques, de las tipografas, imgenes dentro de la secuencia temporal (o de las acciones del
usuario) tambin se pueden presentar nuevos bloques o eliminar de existentes.
Las posibilidades son infinitas, nicamente limitadas por la imaginacin (y el trabajo de
maquetacin). Esta gran flexibilidad que permite animar los mdulos y las caractersticas de
cualquier elemento web ha provocado que la mayora de maquetadores estn dejado de trabajar en
flash, bsicamente porqu existen dispositivos que no reproducen el flash y porqu las animaciones
tambin sern reconocidas por los buscadores (no ocurra con el flash).
Otros contenidos posibles.
A parte de imgenes, texto, formularios, tablas, animaciones los bloques web tambin permiten
insertar:
Vdeos: Se pueden enlazar vdeos de YouTube, Vimeo o se pueden presentar vdeos alojados
junto al web. Si el video est alojado junto al web, se pueden disear o personalizar los enlaces de
"play", "stop", "pause" aunque la maquetacin o programacin se puede complicar. Muchos
recomiendan no empezar el video hasta que el usuario no lo seleccione.
Msica: Se puede poner msica en la web, con sus botones de "play", "stop", "pause", seleccin de
cancin Es necesario tener los derechos de reproduccin o tener una cancin sin derechos.
Muchos recomiendan no activar la msica al cargar la pgina, que sea el usuario quien tome la
iniciativa.
Calendarios: Se pueden actualizar automticamente a partir los calendarios de Google, Microsoft
Outlook El usuario tambin puede actualizar sus calendarios a partir del calendario web.
Chat: Aplicacin para conversar on-line con otro usuario.
Elementos de redes sociales: Facebook, Twitter, google+...
Mapas de google.
Otros: Cualquier aplicacin existente en Internet se puede aplicar a su diseo web. Si tiene en mente
otra aplicacin no existente, consulte con su maquetador.
Nuevas posibilidades: CSS3 y HTML5
Las posibilidades web estn en evolucin constante. Existen posibilidades ya definidas (CSS3 y
HTML5) que progresivamente van a ser reconocidas por todos los navegadores. Algunas
simplemente facilitaran el trabajo de maquetacin mientras que otras permitirn nuevas posibilidades
en el diseo. Javajan toma el compromiso de mantener actualizado este libro con las nuevas
tecnologas que se vayan implantando y que amplen las posibilidades en el diseo web.
En teora, cualquier diseo, efecto, o posibilidad que usted vea navegando por Internet, se puede
realizar. Por ejemplo, actualmente el CSS3 permite deformar bloques y transformarlos en rombos o
trapezoides (ejemplo http://www.paulrhayes.com/experiments/cube/multiCubes.html), rotar bloques y
texto (ejemplo: http://samples.webmatze.de/rotating_image_gallery.htm), y muchas otras opciones y
ejemplos que se pueden consultar en: http://www.1stwebdesigner.com/css/50-awesome-css3-
animations/.
Normas para Incorporar Elementos Grficos y Multimediales.

Cuando en un Sitio Web se incorporan elementos grficos y multimediales, se deben seguir normas
muy concretas para evitar que su peso afecte el desempeo de la pgina cuando sea solicitada por
los usuarios del Sitio Web.
A continuacin entregamos algunas recomendaciones tendientes a asegurar la correcta inclusin de
dichos elementos:

Optimizar el peso de las imgenes: se debe bajar al mximo posible el peso de las imgenes;
cuando esto no sea posible hacerlo por su tamao, se debe reducir el nmero de colores disponibles
y la resolucin (72 dpi es la norma).
Elegir el formato adecuado: ante un mismo tamao de imagen, el peso vara dependiendo de si son
procesadas para desplegarse en formato GIF respecto del formato JPG. Normalmente una imagen
con colores planos (como un icono) tendr un peso menor si se guarda en GIF respecto de si es
guardada en JPG. Lo contrario ocurrir con una imagen
con muchos colores diversos (como una foto). Se recomienda probar ambos formatos para
determinar el ptimo.
Ubicacin de imgenes: se recomienda usar un solo directorio para almacenar las imgenes
repetidas, tales como los iconos y otros elementos grficos que son utilizados en diferentes pginas
del sitio. Al ubicarlos en un directorio nico se puede aprovechar la funcin de cach del programa
visualizador para mejorar el rendimiento de las pginas. Para efectos de seguridad, se recomienda
impedir que un programa visualizador pueda ver el contenido de dicho directorio o cualquier otro
dentro del sitio.
Usar el atributo ALT en imgenes: en el cdigo HTML se debe usar el atributo ALT
(texto alterno) en las imgenes para que ste se despliegue antes que las imgenes y facilite de esta
forma la comprensin del contenido a los usuarios.
Imgenes con alto y ancho: las imgenes (dibujos, fotos, iconos, botones) deben tener tamao para
el ancho y el alto, para que el programa visualizador pueda dejar reservado el espacio para dicho
contenido antes de que se realice su despliegue visual.
Ofrecer plug-ins: cuando se utilizan archivos multimediales que requieren el uso de plugins
(programas visualizadores especiales) para revisarlos, se recomienda poner el programa para ser
bajado u ofrecer un enlace a lugares donde obtenerlo. Esto es especialmente vlido En sitios que
ofrecen presentaciones de portada en tecnologa Flash, las cuales deben ser Anunciadas para que el
usuario tenga la opcin de verlas o avanzar directo al sitio.
Indicar el peso de los archivos: cuando se ofrecen elementos grficos o audiovisuales para que
sean bajados al computador personal por el usuario (especialmente en Video, Audio, Flash u otros),
se recomienda indicar el peso de los mismos, con el objeto de ofrecerle informacin til para efectuar
la operacin.



Interoperabilidad.

Dado que los sitios web pueden ser accedidos sin problemas desde computadores que utilizan
diferentes sistemas operativos, en un sitio de Gobierno Electrnico se debe cuidar ese aspecto de la
diversidad. Para ello se debe asegurar de que desde la mayor parte de ellos las pginas pueden
verse sin mayores contratiempos.
Para asegurar esto, las recomendaciones son las siguientes:
Utilizar cdigo HTML estndar, no mejorado para un visualizador en especial.
Probar el sitio con las versiones para diferentes sistemas operativos de diversos visualizadores de
pginas (browsers); especialmente hacerlo con versiones de Microsoft Internet Explorer, Netscape
Communicator, Mozilla, Opera y Safari.
Asegurarse de que el sitio puede ser visualizado de alguna forma cuando no se cumplen ciertas
condiciones mnimas, por ejemplo, cuando se usan versiones antiguas de un programa visualizador
que no soporta las nuevas caractersticas del lenguaje HTML (por ejemplo Netscape Navigator
versin 4.6).
Estndares Internacionales.

Adems de las buenas prcticas basadas en la experiencia, la tecnologa web cuenta con un
conjunto de estndares que deben ser respetados para obtener la certificacin que acredita al sitio
respecto de su conformidad con ellos.
La entidad encargada del tema es el Word Wide Web Consortium (http://www.w3c.org/) que se
encarga de velar por las mejoras en la tecnologa y por hacer avanzar los estndares y que los
programas visualizadores cumplan efectivamente con mostrar lo que el lenguaje HTML permite
construir.
Dentro de los estndares que ms interesa cumplir, se cuentan dos que tienen que ver con la forma
de hacer la presentacin de contenidos en un Sitio Web y que se detallan a continuacin:

Validacin de HTML.

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://validator.w3.org/) y
que permite detectar errores en la forma de utilizar el lenguaje HTML y XML en la construccin de un
Sitio Web. Lo interesante del programa es que muestra en detalle los errores del cdigo en la pgina
que se pruebe, con lo cual se puede llegar a una directa correccin de los problemas que se hayan
detectado. La importancia de tener un cdigo correctamente validado es que se asegura, a partir de
esa certificacin, que la pgina web puede ser vista sin problemas, desde cualquier programa
visualizador que cumpla con los estndares internacionales en la materia.


Validacin de CSS.

Es un sistema basado en Internet y presentado en el propio sitio del W3C (http://jigsaw.w3.org/css-
validator/) mediante el cual se puede validar la sintaxis de una Hoja de Estilo en Cascada (Cascade
Style Sheet o CSS, en ingls), mediante la cual se describe la forma de presentar contenidos en una
pgina web.
Este programa muestra en detalle los errores del CSS en la pgina que se pruebe, con lo cual se
pueden aislar los problemas y hacer la correccin correspondiente.
Cabe indicar que la ventaja de usar la tecnologa CSS es que facilita la mantencin de un sitio
mediante la separacin de la presentacin (diseo) del contenido.


Guas de estilo para la Web.

Disear para la Web es diferente de disear interfaces de usuario para el software tradicional,
aunque tambin hay similitudes: ambos son sistemas interactivos y ambos son diseo de software,
no diseo de objetos fsicos. Es por ello, que algunos de los principios de diseo de interfaces de
usuario tradicionales pueden ser directamente aplicables, pero obviamente la Web exige otra serie
de consideraciones, partiendo del hecho de que la metfora empleada para la Web ya no est
basada en la metfora del escritorio como en las interfaces grficas tradicionales.

Una caracterstica importante de la Web es la falta de interfaces de usuario comunes, ya que
normalmente la prioridad es conseguir una interfaz atractiva, diferenciada de las otras, para que los
usuarios visiten el sitio Web y lo vuelvan a visitar.

La eleccin del color.

Desde el punto de vista del diseo, el color es un factor clave, probablemente el elemento grfico
ms rpidamente identificable y diferenciador, y supone una directa y rpida llamada de atencin.
Cuando se aade color a un diseo, casi siempre ste se convierte en el principal punto de atencin,
el que ms afecta inmediatamente a nuestra memoria. La utilidad fundamental del color en la interfaz
es su capacidad de resaltar las informaciones relevantes en detrimento del resto, para identificarlas
rpidamente.

Los colores tienen asociados significados en la mayor parte de las culturas. En la cultura occidental
el negro es un color asociado con el luto y funerales, mientras que el blanco est asociado con el
matrimonio y el nacimiento. Entre los chinos en cambio, el blanco es el color asociado al luto. Por lo
que es necesario comprobar en cada caso si hemos utilizado colores en nuestra interfaz que
pueden resultar inapropiados en otras culturas o regiones.

Navegabilidad.

URI. Intente que la URI de entrada al sitio sea tan corta como pueda.
Barra de navegacin. Ofrezca en la cabecera de la pgina slo la navegacin mnima necesaria.
Recursos externos. Intente que los enlaces a recursos externos sean los mnimos posibles.
Navegacin. Ofrezca mecanismos de navegacin consistentes.
Equilibrio de enlaces. Valore el tener muchos vnculos en una pgina y que el usuario tenga que
seguir muchos enlaces hasta encontrar lo que busca.
Teclas de acceso. Proporcione atajos de teclado (accesskeys) a los enlaces de navegacin y a
las funciones ms usadas.
Enlaces. Identifique de forma clara el destino de cada enlace. No cambie el formato de los enlaces
a menos que sepa que el dispositivo es compatible con la modificacin.
Mapas de imagen. No utilice mapas de imagen a menos que sepa que el dispositivo los soporta.
En cualquier caso, piense en vas alternativas para poder mostrar la informacin.
Ventanas emergentes (Pop-Up). No utilice ventanas emergentes. No cambie la ventana actual sin
informar al usuario.

Control del usuario.

Recarga automtica.
No haga que las pginas se recarguen automticamente cada cierto tiempo, a menos que se
informe al usuario de ello y se ofrezca una forma para poder detener dicha accin.
Re direccionamiento. No utilice cdigo que redireccione automticamente las pginas. En lugar de
eso, configure el servidor para que encargue de re direccionarlas.
Pulsaciones de teclas. Intente que las teclas que tenga que pulsar el usuario sean las mnimas
necesarias.

Contenido.

Adecuacin. Compruebe que el contenido es apropiado para su uso en un contexto mvil.
Claridad. Use un lenguaje claro y simple.
Limitacin. Limite el contenido al que el usuario solicita.
Ttulos de las pginas. Cree ttulos de pginas cortos pero descriptivos.
Consistencia. Cercirese de que el contenido es consistente cuando se accede desde diferentes
dispositivos.
Jerarqua semntica. Verifique que el contenido ms importante de la pgina aparece antes que el
contenido secundario

Imgenes.

Imgenes. No use imgenes para lograr el posicionamiento de elementos, crear espacios, etc.
Tamao de imgenes. No utilice imgenes que no puedan mostrarse en el dispositivo. Evite
imgenes grandes o detalles de alta resolucin. Defina el tamao de las imgenes en el marcado si
poseen una medida especfica.
Imgenes de fondo. Cuando utilice imgenes de fondo, verifique que el contenido sigue siendo
legible.
Escalado de imgenes. Si se deben escalar las imgenes a una medida especfica,
redimensinelas desde el servidor.

Color.

Uso del color. Compruebe que la informacin transmitida por medio del color sigue estando
disponible sin l.
Contraste del color. Compruebe que los colores de primer plano y del fondo contrastan lo
suficiente.

Diseo.

Pgina limitada. Divida la pgina en partes cuyos tamaos sean fciles de utilizar en el dispositivo.
Peso limitado. Asegrese de que el peso total de las pginas es el adecuado para las limitaciones
de memoria del dispositivo.
Desplazamiento. Limite el desplazamiento de la pgina a una direccin, a menos que el
desplazamiento secundario pueda evitarse.
Medidas. No use medidas definidas en pxeles. No utilice medidas absolutas en los valores de los
atributos del marcado ni en los valores de las hojas de estilos.
Fuentes. No confe en la compatibilidad de las fuentes tipogrficas que se declaran en los estilos.
Capacidades. Aproveche las capacidades del dispositivo para ofrecer una experiencia de uso
ptima.
Pruebas. Haga pruebas tanto con dispositivos reales como con emuladores.

Tecnologas y Mercado.

Marcado vlido. Cree documentos que sean vlidos con los estndares y tecnologas del W3C.
Minimice. Use un marcado conciso y eficaz.
Marcos. No use conjuntos de marcos.
Estructura. Use las caractersticas del lenguaje de marcado para indicar la estructura lgica del
documento. Haga uso de un marcado semntico.
Tablas. No utilice tablas a menos que sepa que el dispositivo es compatible con ellas. No utilice
tablas anidadas. No use las tablas para la maquetacin. Cuando sea posible, ofrezca alternativas a
la presentacin de datos tabulados.
Scripts, objetos, applets y plug-ins. No use elementos incrustados en las pginas a menos que
sepa que van a funcionar en el dispositivo. En cualquier caso, ofrezca alternativas para los usuarios
que no puedan verlos.
Alternativas no textuales. Ofrezca alternativas textuales para cada elemento no textual.
Compatibilidad con la codificacin de caracteres. Verifique que el contenido est codificado con
un juego de caracteres que va a ser soportado por el dispositivo.
Codificacin de caracteres. Indique el juego de caracteres que est utilizando.
Mensajes de error. Ofrezca mensajes de error informativo y significativo, con los mecanismos de
navegacin necesarios para salir del error y volver a la informacin til.
Cookies. No confe en que las cookies estn siempre disponibles.
Cach. Intente guardar en memoria la informacin de las respuestas HTTP.
Formato del contenido. Cundo sea posible, enve el contenido en un formato preferido y que
sepa que va a ser compatible con el dispositivo.
Incompatibilidades. Sea prudente a la hora de trabajar con implementaciones deficientes.

Hojas de estilos.

Use hojas de estilos para controlar la presentacin, a menos que el dispositivo no sea compatible
con ellas.
Organice los documentos de tal forma que sean legibles sin hojas de estilos.
Intente que las hojas de estilo sean pequeas (en peso).

Formularios.

Valores por defecto. Ofrezca valores preseleccionados por defecto y evite la introduccin libre de
texto cuando sea posible.
Modo de entrada. Si el dispositivo es compatible, especifique una forma por defecto de insertar
texto, idioma y/o mtodo de introduccin.
Orden de tabulacin. Cree un orden lgico entre los enlaces, controles de los formularios y
objetos.
Etiquetado de controles. Etiquete adecuadamente todos los controles de los formularios y asocie
explcitamente cada etiqueta a su control.
Posicin de los controles. Coloque las etiquetas de tal forma que se muestren correctamente y
en correspondencia con los controles de formulario a los que se refieren.
Diseo de interfaz de la aplicacin.


Pgina 1.



Pgina 2.







Pgina 3.



Pgina 4.


Justificacin de las interfaces.

La justificacin de la interfaz pgina nmero 1.

1.- Titulo de la aplicacin.
En este lugar es donde se encuentra el nombre de la aplicacin. Se establece en este lugar ya que
se considera un lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el
primero que los clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo
de marketing su objetivo es que el cliente relacione el nombre de la empres y dicha empresa con su
logo.
2.-Nombre de la empresa.
Aqu se establece el nombre de la empresa que realiza la aplicacin, se encuentra en el centro para
mejorar la visualizacin.
3.-Barra de opciones.
En esta barra se encuentran el men de la pgina, en ella podemos ver las siguientes opciones:
-Inscribirse: Esta opcin nos permite que acceder a otra pagina en la que podemos promocionar
nuestros servicios o artculos.
-Vender: Esta opcin del men no permite que acceder a otra pagina en la que podemos
promocionar el producto.
-Comprar: En esta parte nosotros ponemos buscar productos con el fin de realizar una compra

4.-Logo.
En este lugar es donde se encuentra en logo Se establece en este lugar ya que se considera un
lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el primero que los
clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo de marketing su
objetivo es que el cliente relacione el logo de la empres y dicha empresa con su nombre.
5.-Buscador.
Por medio de esta barra es que podemos buscar el producto que se desea. Esta barra facilita el
tiempo y la eficacia a la hora de encontrar los productos.
6.-Clasificados.
Esta parte es donde se muestran informacin en cuanto los productos que tenesmos disponibles en
venta y bajo de el titulo se muestran algunos de los artculos u ofertas es una estrategia ya que
permite que las ventas puedan incrementar y los artculos se puedan mirar.
7.- Artculos de venta (fotos)
Por medio de estas fotos se puede ver el articulo y ver algunas de las caractersticas que tiene, al
igual que el diseo, cabe mencionar que esto facilita que el usuario que por medio de la imagen
sienta innecesario el hecho de palpar entre sus manos, el articulo para su compra.
8.-Articulos
9.- Fondo
El fondo tienes este color, con el fin de que sea agradable para el cliente, el color debe de permitir al
usuario relacionar el contenido de la pagina con lo que el esta buscando.


La justificacin de la interfaz pgina nmero 2.

1.- Titulo de la aplicacin.
En este lugar es donde se encuentra el nombre de la aplicacin. Se establece en este lugar ya que
se considera un lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el
primero que los clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo
de marketing su objetivo es que el cliente relacione el nombre de la empres y dicha empresa con su
logo.
2.-Logo.
En este lugar es donde se encuentra en logo Se establece en este lugar ya que se considera un
lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el primero que los
clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo de marketing su
objetivo es que el cliente relacione el logo de la empres y dicha empresa con su nombre.
3.-Buscador.
Por medio de esta barra es que podemos buscar el producto que se desea. Esta barra facilita el
tiempo y la eficacia a la hora de encontrar los productos.
4.-Nombre de la empresa.
Aqu se establece el nombre de la empresa que realiza la aplicacin, se encuentra en el centro para
mejorar la visualizacin.
5.-Barra de opciones.
En esta barra se encuentran el men de la pgina. en ella podemos ver las siguientes opciones:
-Inscribirse: Esta opcin nos permite que acceder a otra pagina en la que podemos promocionar
nuestros servicios o artculos.
-Vender: Esta opcin del men no permite que acceder a otra pagina en la que podemos
promocionar el producto.
-Comprar: En esta parte nosotros ponemos buscar productos con el fin de realizar una compra

6.-Clasificados.
Esta parte es donde se muestran informacin en cuanto los productos que tenesmos disponibles en
venta y bajo de el titulo se muestran algunos de los artculos u ofertas es una estrategia ya que
permite que las ventas puedan incrementar y los artculos se puedan mirar.
7.- Artculos de venta (fotos)
Por medio de estas fotos se puede ver el articulo y ver algunas de las caractersticas que tiene, al
igual que el diseo, cabe mencionar que esto facilita que el usuario que por medio de la imagen
sienta innecesario el hecho de palpar entre sus manos, el articulo para su compra.
8.-Articulos (Ms vendidos en la ltima hora)
Esta parte muestra los artculos mas vendidos estadsticamente en las ultimas horas .El objetivo es
dar a conocer lo mas solicitado por los usuarios con el fin de facilitar y promocionar los mejores o los
mas accesibles artculos en venta. Las fotos y el nombre de los artculos son lo artculos que
estadsticamente mas se han vendido en las ultimas horas.
9.- Fondo
El fondo tienes este color, con el fin de que sea agradable para el cliente, el color debe de permitir al
usuario relacionar el contenido de la pagina con lo que el esta buscando.


La justificacin de la interfaz pgina numero 3.

1.- Titulo de la aplicacin.
En este lugar es donde se encuentra el nombre de la aplicacin. Se establece en este lugar ya que
se considera un lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el
primero que los clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo
de marketing su objetivo es que el cliente relacione el nombre de la empres y dicha empresa con su
logo.
2.-Logo.
En este lugar es donde se encuentra en logo Se establece en este lugar ya que se considera un
lugar preferencial para la vista. (Mediante estudios se entiende que ese lugar es el primero que los
clientes o usuarios de la pagina es que se fijan primero.) Se establece all por motivo de marketing su
objetivo es que el cliente relacione el logo de la empres y dicha empresa con su nombre.
3.-Buscador.
Por medio de esta barra es que podemos buscar el producto que se desea. Esta barra facilita el
tiempo y la eficacia a la hora de encontrar los productos.
4.-Nombre de la empresa.
Aqu se establece el nombre de la empresa que realiza la aplicacin, se encuentra en el centro para
mejorar la visualizacin.
5.-Barra de opciones.
En esta barra se encuentran el men de la pgina. en ella podemos ver las siguientes opciones:
-Inscribirse: Esta opcin nos permite que acceder a otra pagina en la que podemos promocionar
nuestros servicios o artculos.
-Vender: Esta opcin del men no permite que acceder a otra pagina en la que podemos
promocionar el producto.
-Comprar: En esta parte nosotros ponemos buscar productos con el fin de realizar una compra

6.-Clasificados.
Esta parte es donde se muestran informacin en cuanto los productos que tenesmos disponibles en
venta y bajo de el titulo se muestran algunos de los artculos u ofertas es una estrategia ya que
permite que las ventas puedan incrementar y los artculos se puedan mirar.
7.- Artculos de venta (fotos)
Por medio de estas fotos se puede ver el articulo y ver algunas de las caractersticas que tiene, al
igual que el diseo, cabe mencionar que esto facilita que el usuario que por medio de la imagen
sienta innecesario el hecho de palpar entre sus manos, el articulo para su compra.
8.-Articulos (Relacionados)
Esta parte muestra los artculos relacionados con la descripcin que pusimos en el buscador .El
objetivo es que el cliente sepa la variedad de artculos que se encuentran con las descripciones que
el pide.
10.- Fondo
El fondo tienes este color, con el fin de que sea agradable para el cliente, el color debe de permitir al
usuario relacionar el contenido de la pagina con lo que el esta buscando.

















2



La justificacin de la interfaz pgina nmero 4.

Diseo Global.

Accesibilidad: El diseo de la pgina cuenta con opciones sencillas para la compra y venta de
productos en lnea.

Control del Usuario: El usuario cuenta con el control de su decisin de compra o consulta de los
productos realizando las tareas cuando l lo desee hacer. La pgina cuenta con los mecanismos que
incluyen las perspectivas del usuario, amigabilidad y confort en el medio.

Consistencia: El diseo de las diferentes paginas guardan consistencia de manera que el usuario
desarrollo un modelo mental sobre las opciones de bsqueda y funciones de la pgina.

Organizacin: Se representan los criterios de la pgina de forma jerrquica segn los criterios de
inspeccin de productos.




1

2

3.2

3.1
1

3.3

4

5.1
2

5.2
2

Diagramacin de las Pginas.


1.- Bloque de navegacin arriba: Los mens se despliegan con otros submens (es ms fcil la
navegacin que si los submens se abren lateralmente).


2.- Tipografa: Las tipografas instaladas en los sistemas operativos (Windows, Mac, Linux)
ms comunes como: Verdana, Georgia, Times new Roman, Arial, etc se usaran la pgina de
tal manera que no se producirn incompatibilidades de tipografa.

3.- Formato de imgenes: Optimizar el peso de las imgenes: se debe bajar al mximo posible el
peso de las imgenes; cuando esto no sea posible hacerlo por su tamao, se debe reducir el nmero
de colores disponibles y la resolucin (72 dpi es la norma).
3.1.-GIF: Es un formato que conserva cada pixel de la imagen original, muy eficiente para
grficos sencillos con pocos colores. Permite entrelazar la imagen, es decir, presentarla con mayor
detalle a medida que el navegador la descargue. Permite crear animaciones y transparencias del
100%.
3.2.-JPG: Comprime mucho ms las imgenes que los anteriores formatos. Excelente para
trabajar con fotografas de muchos colores y texturas.
3.3.-PNG: Es un formato similar al GIF pero no permite crear animaciones. En cambio
permite degradados de transparencias.
4.- Enlaces web: Los enlaces web pueden ser texto o imgenes. Para diferenciarlos de otros
elementos que no son enlaces, el puntero (o ratn) cambia de la forma fecha a mano cuando se
pasa por encima.
5.-Formularios web:
Un formulario web puede estar compuesto por los siguientes elementos:
5.1.-Botn: Se utiliza para enviar la informacin o para realizar otras opciones.
5.2.-Campo de texto: una lnea para introducir texto a la cual se puede especificar longitud
de caracteres a presentar, longitud mxima de caracteres a introducir, texto que aparece al inicio
(normalmente se presenta en blanco).





Navegabilidad.

URI. Intente que la URI de entrada al sitio sea tan corta como pueda.
Barra de navegacin. Ofrezca en la cabecera de la pgina slo la navegacin mnima necesaria.
Equilibrio de enlaces. Valore el tener muchos vnculos en una pgina y que el usuario tenga que
seguir muchos enlaces hasta encontrar lo que busca.
Teclas de acceso. Proporcione atajos de teclado (accesskeys) a los enlaces de navegacin y a
las funciones ms usadas.
Claridad. Use un lenguaje claro y simple.
Limitacin. Limite el contenido al que el usuario solicita.
Pgina limitada. Divida la pgina en partes cuyos tamaos sean fciles de utilizar en el dispositivo.
Peso limitado. Asegrese de que el peso total de las pginas es el adecuado para las limitaciones
de memoria del dispositivo.
Posicin de los controles. Coloque las etiquetas de tal forma que se muestren correctamente y
en correspondencia con los controles de formulario a los que se refieren.

































Referencias.


http://www.xn--guiadiseo-s6a.com/06_estructura_estandar.php
http://www.elandroidelibre.com/2012/01/la-interfaz-de-ice-cream-sandwich-repasando-su-
guia-de-estilos.html
http://www.lsi.us.es/docencia/get.php?id=3360
http://www.epigijon.uniovi.es/docs/itinerarios/TFG/Guia_de_Estilo_para_la_Documentacion_d
el_Proyecto.pdf