Programación java

Botones y menús de navegación Tienen lugar dos vias escenciales para crear un menu de navegacion. Botones de identico dimensión Botones de dimensión proporcional al texto que contienen En el primer caso necesitaremos que todos los botones presenten un esquema de textos similar. Es decir, todos los botones deberán tener 1 o 2 palabras. Si esto es probable y las palabras a su vez tienen dimensiones mas o menos homogeneos, sera probable crear todos los botones iguales para el menu. La botonera de apple es un buen ejemplo de este caso. En el segundo escena nos podemos descubrir con algúnas casos. Poseemos botones con textos que cambian mucho de tamaño. Poseemos un sistema de navegación dinámico donde ponemos y quitamos botones en función de las preferencias / permisos del usuario. Poseemos un diseño de página fluido, pero no los suficientes botones como para llenar todo el ancho de la página. En cualquier caso, el definir el dimension del boton en funcion del contenido parece ser la alternativa mas flexible. No obligamos a estar escribiendo textos que se ajusten al diseño, si no que hacemos que el diseño se adapte al contenido. En este caso deberemos especificar los margenes que deseamos que cada boton tenga alrededor del texto. La botonera del mail de yahoo es un buen ejemplo de esta práctica. ¿Cúal es la solución correcta? Cómo siempre, depende y como siempre se suelen combinar ambas opciones. La solucion de dimensiones fijos es mas elegante pero necesita alguna disciplina a la hora de redactar contenidos y suele ser una buena alternativa para la navegacion principal de un site. Es decir, el nivel sobresaliente debe ser un nivel muy exigente a nivel de redaccion y posicionamiento. No podemos colocar cualquier cosa en el primer nivel y no deberiamos dar la imagen de compañía escaso homogenea en cuanto a sus "ideales". La solucion de dimensiónes fluidos es mas flexible pero menos elegante visualmente pero es mas operativa para segundos niveles donde podemos necesitar esa flexibilidad para acomodar distintos necesidades. Tablas Determinadas recomendaciones escenciales para crear tablas. Siempre mira bien el contenido e intenta entender que se está contando. Separa los contenidos fijos de los dinámicos. Identifica totales, resúmenes, conclusiones. Una vez que comprendes con claridad el contenido, se deben identificar incosistencias en el mismo que nos pueden perjudicar a la hora de diseñar. Campos homogéneos Debemos identificar que todos los campos esten etiquetados de manera congruente siguiendo jerarquias identicas. Que todos los campos tengan fecha, título, sección, etc... Es muy usual descubrirse con tablas donde cada tema muestra informacion dispar. Supongamos la próximo tabla. ----- Mac 18 equipos g3 23 equipos g4 4 equipos g5 Pc 7 workstations XP Periféricos Cámara Agfa ----- Software Mac Photoshop Flash Pc Autocad ------ Si analizamos esta tabla, podemos ver que tiene lugar una falta de titulos coherentes. Si bien poseemos "Software", no poseemos "Hardware" en la lista lo que hace la lista no sea del todo coherente. Este tipo de errrores es muy general y hace que el diseñador tenga que labora con material corrompido de inicio dando espacio a un mal diseño. La tarea del arquitecto de la informacion es clave para detectar estos dificultades antes de que lleguen a la mesa de diseño. Contenidos dinámicos y fijos La separacion del contenido fijo del dinamico es significativo ya que deberemos ubicar los contenidos fijos en el eje horizontal y los dinamicos en el vertical. De esta manera el crecimiento de la tabla se hara en el scroll vertical y no en el horizontal lo que daria dificultades de impresion. Resumenes En la identificacion de resumenes, resultados, etc... es clave que evitemos el concepto impreso de la maquetacion colocando todos estos fundamentos al comienzo de la pagina en espacio de al final como ocurriria en la version impresa. Sombreados y líneas Los sombreados y líneas son clave. Las líneas deben utilizarse lo menos posible. Para separar es mejor utilizar distintos pesos tipográficos (Negrita y sin negrita) o colores. Negro, gris, etc... Las líneas en caso de ser necesarias deben limitarse a la separación horizontal evitando la vertical. El eludir la separacion vertical es debido a que el concepto comun que se ha de manejar a la hora de mostrar tablos en una tabla es el que debemos intentar listar conceptos homogeneos por fila. Es decir, cada fila de informacion debe ser congruente evitando mezclar distintos conceptos. verticalmente. En los casos en los que esto sea imposible, utilizaremos líneas verticales para separar esta información. Tabla con separación vertical. Para los sombreados tiene lugar la probabilidad utilizarlos para distinguir campos pares e impares en listados, pero es mas interesante utilizar los sombreados para resaltar novedades o cambios. Justificación de textos en tablas Las normas escenciales son: Textos siempre justificados a la izquierda. Números siempre justificados a la derecha. Eludir los centrados en general. En cuanto a fechas lo ideal es en lo probable tener un formato del tipo: 01 JUN 2005 El formato tipo: 01 05 2005 puede crear confusión entre US y el resto del mundo ya que los yankis ponen el mes antes del día. Utilizando las 3 primeras letras del mes se evita la confusión. Utilizar letras para el mes, a nivel de display y no de acceso de datos, ayuda a que la visualización sea más limpia ya que se evita el traducir el número al nombre del mes. Justificado de textos en parrafos Tienen lugar 4 maneras de justificar párrafos en HTML. Izquierda Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Derecha Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Centrado Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Bandera" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. El más usual es el justificado a la izquierda. El resto de justificados no son recomendables. El justificado de bandera es quizás el más complejo de manejar. Este justificado lo que hace es manipular el tracking de todos los caracteres de la línea para que todas las líneas empiecen y acaben en el mismo punto formando una caja homogénea de texto. Al manipular el tracking de todos los caracteres ocurre que cuantos menos tengamos por linea peor es el apariencia visual de la misma. Aqui podemos ver algunos ejemplos. "Bandera" size 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Bandera" size 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. "Bandera" size 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Como podemos ver con el dimension 3 (el gran de todos) empiezan a surgir algunos lugares entre letras algo extraños. Si nos fijamos en la penultima linea, los lugares son mucho mas abiertos que entre las letras de las otras lineas. Este resultado es escaso deseable ya que hace la lectura mas complicada. En el dimension 2 tambien surgen determinadas zonas de "aguas" o lugares algo extraños. Este justificado de bandera es, de nuevo, escaso recomendable. Números Sobre los numeros hay un apariencia que es crucial. La tipografía. Si vamos a crear un site donde los números van a ser protagonistas, debemos tener mucho cuidado con la tipografía que elegimos para mostrarlos. No tienen lugar muchas alternativas en el mundo web, pero veamos las que estan disponibles. Arial 121.416,00 987.324,55 Verdana 121.416,00 987.324,55 Georgia 121.416,00 987.324,55 Times 121.416,00 987.324,55 Courier 121.416,00 987.324,55 Como podemos ver cada tipogría renderiza el texto con un tracking diferente. Arial resulta muy densa visualmente. Verdana es la más clara ya que el tracking es el más abierto de todas. Georgia muestra un tipo de numeros que se designa como "minusculas" donde los numeros como el 9 y 8 caen por bajo de la linea de base. A parte, esta tipografia muestra un tracking irregular haciendo que numeros como e 1 presente un lugar menor que el 9. La Times muestra un tracking adecuado aunque es escaso recomendable por un render bastante pobre en pantalla. La Courier es la tipografia "monospace" por defecto aunque como hemos visto, verdana es más clara. Courier es una opción. La alternativa mas recomendable es Verdana. Aunque se ha ver en distintos sistemas operativos ya que en PC puede darse otro tipo de tracking. Un buen ejemplo. La tabla de cotizaciones de El Pais.es