Archivo de
Arquitectura de información
Sábado, Agosto 28, 2010En el mundo del diseño web o de interfaces de usuario, llamamos Arquitectura de Información a la labor de fabricar la estructura y dinámica de un sitio web o aplicación. Es el primer paso en el proceso de desarrollo de un sitio web, el diseño gráfico depende completamente de esta etapa.
Para una buena arquitectura web, se deben cubrir 3 actividades:
1 – Definición de objetivos y organización de contenidos.
Antes que nada, debemos definir cuales son los objetivos del sitio, que queremos que los usuarios hagan y como queremos que lo hagan. Después debemos de recopilar toda la información que contendrá nuestro sitio, categorizarla y revisarla. Una vez teniendo toda la información organizada, debemos crear el mapa del sitio. Esta actividad puede ser la mas exhaustiva de todo el proceso y es en la que el cliente debe participar mas profundamente.
2 – Diseño de Wireframes y Mockups.
Una vez realizado el mapa de sitio, debemos comenzar a hacer bosquejos y planos de como se verá el sitio. En esta etapa decidimos que verá el usuario y como administraremos su atención.
3 – Elección de tecnología y estructura HTML.
Una vez que los planos estén revisados y actualizados, podemos evaluar que tipo de tecnología necesitamos (PHP, ROR, .NET, SQL, JS, Flash, etc.) y creamos la estructura HTML. En esta etapa podemos aprovechar también para diseñar nuestras bases de datos.
¿Y el diseño gráfico?
Ahora que la estructura del sitio y sus contenidos están definidos, podemos comenzar a diseñar el tema visual de nuestro sitio web. Es común que muchos desarrolladores comiencen sus proyectos creando diseños gráficos de pantallas sin hacer una correcta planeación y organización previa, llevándolos inevitablemente a re-trabajar, parchar diseños, omitir contenidos, etc.
Diseño web para iPad, Consideraciones en el CSS
Miércoles, Agosto 18, 2010
Hace poco tuve que realizar una adaptación de un sitio Flash a HTML enfocado principalmente en usuarios de iPad o iPhone, pues como todo sabemos, estos aparatos no aceptan Flash.
Aunque Apple afirma que mientras se usen propiedades estandar en el CSS todo funciona, la verdad es que Mobile Safari se comporta algo diferente que su hermano mayor:
Sin cursor no hay :hover
Al ser un dispositivo de tacto, no hay cursor en el iPad, por lo tanto, el estado :hover de un enlace, se comporta como un :focus. Esto también afecta los eventos de click de Javascript.
No hay barras de desplazamiento en overflow
Al usar frames o divs con propiedad overflow, es imposible tener visibles las barras. En el
caso en que sea 100% necesario tener una barra de scroll a mitad de la página (aunque no veo para que) se puede recurrir al jQuery, con plugins como jScrollPane.
visibility:hidden se comporta como display:none
La diferenica entre visibility:hidden y display:none es que la primera aunque esconde el
contenido sigue ocup
ando el espacio y la segunda hace que desaparezca sin afectar el layout, para Mobile Safari es lo mismo.
No funciona position:fixed
Esto si puede ser un problema para ciertos diseños, también es necesario utilizar Javascript: Lazycoder tiene una solución.
Lo que si funciona es la mayoría del CSS3 para Webkit
Tipografías personalizadas, esquinas redondas, sombras, transparencias y muchas mas funcionan perfectamente, checa compatibilidad en CSS Infos.