No soy diseñador gráfico, así que lo que te comento seguidamente tómatelo como sugerencias. Te lo digo porque la mayoría de mis críticas versan sobre la apariencia del sitio y porque adopto un tono de "haz esto y esto otro...".
- Si el logotipo de la empresa no es necesariamente el que se muestra, mejor cámbialo; el efecto de bisel y relieve + sombra paralela sobre una fuente de tipo sans serif está muy visto. En la página http://www.fontica.com/ tienes muchas fuentes gratuitas. Prueba a bajarte alguna de tipo script (sólo para el logo). - Has alineado el logo a la derecha, pero no hay nada más que lo acompañe, ni siquiera la línea de etiquetas "E S P A C I O + D I S E Ñ O" que la has centrado, al igual que el menú. - Quita el borde superior y el izquierdo de "#contenido". El inferior lo puedes dejar. Supongo que lo pusiste cuando estabas depurando la página. - El resaltado de la opción de menú es asimétrico porque has cambiado la css original. Vuelve a copiarla de nuevo y cambia lo que necesites (texto del menú, ubicación de las imágenes, etc.). Si no la tienes, cógela de http://www.13styles.com/css-menus/gloss/ - Por favor, retira ese efecto de transición de cubo en las imágenes. No queda bien, sobre todo porque las imágenes son de diferente tamaño aunque, como sólo se reproduce en IE, puede servir de castigo a los que usan este navegador :)) Mejor un efecto de transición suave (fading) entre imágenes. Prueba a buscar en Google "javascript fade". Aunque no lo he usado, mira en http://brainerror.net/scripts/javascript/blendtrans/ - Has mejorado las imágenes añadiéndoles bordes y sombras. Queda mucho mejor. Sólo comentarte a efectos de información que esto también lo puedes conseguir sin necesidad de editar cada imagen que añadas. Existen soluciones CSS y también librerías javascript que hacen todo el trabajo. - Evita la mezcla que has hecho de imágenes verticales con horizontales. Se produce un salto desagradable cuando cambia la orientación de éstas y las horizontales sobresalen del límite visual que marcan los demás elementos. Si quieres mantener los dos tipos, enmárcalas en un contenedor visual común que no se mueva. - En un mensaje anterior preguntabas cómo arreglar el texto que aparecía bajo la imagen cuando pasabas el cursor sobre la miniatura correspondiente. Aunque bastaba con aplicar la anchura adecuada al contenedor de ese texto (declaración "width: 256px;" en la regla de ".thumbnail:hover span"), veo que lo has quitado. Te felicito; está mejor así. - Las imágenes en miniatura se tienen que asociar visualmente con la imagen ampliada. Colócalas debajo de ella. Además, te permitirá aumentar el texto del cuerpo de la página sin que te estorben las miniaturas. - Cuando pasas el ratón sobre las imágenes en miniatura el cursor se convierte en una mano invitando a pensar que se puede hacer clic. Puedes cambiar las hojas de estilos para que cuando se pulse con el ratón se muestre la imagen ampliada hasta que se vuelva a pulsar en otro sitio (ya lo comenté en otro post). Pero, como prefieres que no pase nada al hacer clic, mejor deja el cursor por defecto con la declaración ".gallerycontainer a.thumbnail{ cursor: default; }" (sin comillas, claro). - Al pasar el cursor entre las imágenes en miniatura se produce un efecto de parpadeo en la imagen ampliada. Esto sucede porque hay un espacio entre cada miniatura. Si quieres mantener este espacio sin que se produzca este feo efecto, sitúa juntas las miniaturas y genera la sensación visual de separación añadiendo a éstas un borde ancho de color blanco o un padding. - El nombre de fuente 'Lucida Sans' que has indicado en la CSS, no está en la mayoría de los sistemas operativos. Supongo que quisiste escribir 'Lucida Sans Unicode' que viene por defecto en Windows. En Mac OS tienes 'Lucida Grande', pero en Linux desconozco si existe una fuente parecida (no sólo en forma, sino también en tamaño). Mejor usa font-family: verdana, "Bitstream Vera Sans", sans-serif; Con esto te aseguras que Windows y Mac usarán verdana y Linux "Bitstream Vera Sans". - Una duda: ¿Las imágenes son trabajos realizados por la empresa? En caso contrario deberías pensar en no incluirlas en el documento html, sino en las css. De todas formas, tienes cosas más importantes que cambiar antes que esto. - Separa las hojas de estilos. Mantén los estilos del menú y las pequeñas imágenes de éste separados del resto. Ganarás claridad; sobre todo porque es trabajo de un tercero y te costará entenderlo mucho más que el tuyo propio. - Organiza los archivos. Incluye todas las imágenes en la carpeta "img/", excepto las del menú que las puedes incluir en "menu/". Tendrás que cambiar las rutas tanto en los archivos html como en el css. - Corrige los errores de validación del código fuente. Para ello te aconsejo que instales el complemento para Firefox "HTML Validator" (elige "serial" en la configuración). - La página de formulario de contacto está mostrando la dirección de correo mediante <form action="mailto:...>". Cámbiala cuando puedas a <form action="email.php ...>" para evitar que los robots de los spamers se hagan con ella cuando empiecen a rastrear tu sitio. Tendrás que usar programación del lado del servidor. Sobre las segunda página, la de ajedrez, no pensaba comentarte nada, pero me ha llamado la atención la gran cantidad de errores de validación que aparecen. El motivo es que has incluido en las etiquetas <meta name="Description ..> y <meta name="Keywords ..> unas comillas dobles inclinadas de cierre en vez de las verticales. Quizás editaste el código en un procesador de textos (Word, OpenOffice, etc.) y luego lo copiaste desde ahí. Para corregirlo tienes que cambiar las siete comillas y añadir una más para cerrar content="....". No voy a comentar nada más. Es verdad que tiene apariencia de sitio antiguo, pero es lógico. Lo importante es que avances, que no te quedes estancada. Conforme vayas construyendo más sitios, éstos serán cada vez más sofisticados. Te recomiendo los siguientes libros. Los he elegidos porque, además de básicos, son fabulosos: * "The Non-Designer's Design Book" de Robin Williams (Peachpit Press). La traducción al castellano está editada por Anaya Multimedia con el nombre "Diseño gráfico. Fundamentos". Habla de principios básicos, pero te cambiará la forma de ver tus diseños y los de los demás. * "No me hagas pensar" de Steve Krug (Prentice Hall). Sobre usabilidad. * "Head First HTML with CSS & XHTML" de Freeman, Freeman (O'Reilly). Uno de los mejores libros técnicos que he leído jamás. He visto que acaban de editar también uno titulado "Head First Web Design" pero desconozco cómo es. Saludos. 2009/1/8 <alejandra.j.go...@gmail.com> > Hola Amigos! Desde Buenos Aires, queria solicitarles tengan a bien pasar > por > estos links: > > www.espaciomasdisenio.com.ar > > www.clubajedrezphilidor.com.ar > > y dejarme su opinion y/o comentarios, en vista de mejorar cada dia, > nuestros > diseños. > > Muchas gracias > > Alejandra > _______________________________________________ > Lista de distribución Ovillo > Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org > Puedes modificar tus datos o desuscribirte en la siguiente dirección: > http://lists.ovillo.org/mailman/listinfo/ovillo > _______________________________________________ Lista de distribución Ovillo Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org Puedes modificar tus datos o desuscribirte en la siguiente dirección: http://lists.ovillo.org/mailman/listinfo/ovillo
