Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Friday, October 12, 2007

¡Dios mío, está lleno de “generators”!

More than 100 Web 2.0 Online Generators es, como su propio nombre indica, una lista de cien aplicaciones web tipo “generadores de botones / paletas de colores / gráficos / logos /texturas / fondos / CSS / favicons / esquinas redondeadas / galerías / nombre de dominio / lista / lo-que-sea”. Unos son más o menos útiles o prácticos que otros, pero todos son bastante “webdoscerianos”.


Fuentes:
- http://www.microsiervos.com/archivo/internet/generadores-online.html
- http://www.ajaxflakes.com/web-20/top-100-online-generators-web-20/

Sunday, October 07, 2007

Diseño Gráfico, fundamental...

Escrito por Jaime L. Vera Campos
06-October-2006


Actualmente la historia de la informática es inherente a las interfaces gráficas, debido a que los sistemas operativos gráficos han influido en la evolución de la industria del hardware y el software. La Interfaz Gráfica de Usuario (IGU) es la traducción del vocablo inglés Graphic User interface (GUI).

La primera interfaz gráfica de usuario se desarrolló en los laboratorios de XEROX, en los años sesenta. En 1984, Apple, la compañía de computadoras Macintosh, la puso a disposición del público, siendo además la pionera en su introducción, además del ratón (mouse). Fue hasta 1993 cuando se generalizaron las interfaces gráficas de usuario, con la primera versión popular del sistema operativo Windows 3.0 de Microsoft.

Básicamente, una interfaz es un dispositivo que permite una comunicación entre dos sistemas. Cuando se habla de la interfaz de un programa o aplicación (software), se trata del conjunto de herramientas y mecanismos que permiten al usuario interactuar con la computadora, facilitando las operaciones de información o datos. Es el aspecto visible como tal que tiene un programa, como se presenta ante los usuarios.

En el caso de una interfaz gráfica de usuario, se incluye una serie de elementos, como: menús, ventanas, teclado, ratón, sonidos en algunos casos y la participación gráfica en sí, con el apoyo de representaciones visuales. También se requiere una pantalla o monitor de computadora, con el fin de que el usuario pueda interactuar con las opciones del menú y los íconos, dentro del sistema. De esta forma puede abrirse el canal de comunicación entre el usuario y la computadora

En una interfaz gráfica de usuario para la Web, debe tenerse una visión clara sobre el sitio o la página, no sólo al determinar la estructura, la navegación y los contenidos, sino también al realizar el diseño gráfico como tal. Con esto puede lograrse una buena usabilidad, legibilidad, accesibilidad y funcionalidad. Cabe señalar que para esto no es necesario emplear lo último en recursos tecnológicos y/o gráficos espectaculares.

El diseño de los gráficos en la interfaz es útil para que el usuario vea en pantalla la información que pueda serle de interés. Éste le proporciona las herramientas que verá durante el tiempo que se relacione con la interfaz, así como la posibilidad de tomar las acciones necesarias como respuesta al sistema. Hoy en día, los gráficos diseñados en la computadora proveen una comunicación de manera ilustrada, lo que facilita la interacción con el hombre.

En esto radica la participación del diseñador gráfico, que es de suma importancia, porque él es quién tiene la posibilidad de integrar eficientemente elementos visuales como imágenes, tipografías, espacios, colores, etcétera.

Por otra parte, en el diseño y la combinación de elementos, como objetos gráficos y representaciones visuales, debe prevalecer una coherencia y una unidad, porque favorece la identificación de objetos.

La tipografía y la aplicación de color son aspectos que deben ser tratados cuidadosamente en el momento de establecer una buena interfaz, esto en razón de un buen contraste y una inmejorable legibilidad, como elementos formales del diseño gráfico en relación con los contenidos.

Con una interfaz bien diseñada, el usuario debe sentirse arropado en el momento de realizar sus búsquedas y cubrir sus necesidades de información, gracias al equilibrio entre contenidos y gráficos. De otra forma sería un fracaso, porque la interfaz no cubriría bien las necesidades de los usuarios, a quienes se dirige y por quienes se planea.

Ejemplos de Interfaz Gráfica de Usuario en una página Web

En este primer ejemplo, puede apreciarse que el diseño gráfico contribuye a que sean distinguidos los objetos del contenido, por medio de la creación de íconos para reforzar las ideas, además del uso de color para destacar la información principal y la secundaria. En este caso los tópicos principales se encuentran a la izquierda y los secundarios, a la derecha. Es notoria la legibilidad en el área de texto-información.


En este segundo ejemplo, el concepto se acentúa con la incorporación de elementos visuales propiamente contextuales: íconos basados en la propia temática del contenido. Los elementos de fondo y los colores recrean un ambiente de sucesos pasados.


Este último es un ejemplo claro y simple de acceso rápido a la información, con un manejo de reticencia en elementos visuales y contenido, para el usuario que está acostumbrado a realizar búsquedas de información de manera ágil y concreta.

En resumen, una buena interfaz gráfica de usuario requiere simplicidad y funcionalidad. Por otro lado, aunque el diseño gráfico tiene una presencia implícita, debe ser considerado como parte fundamental en el éxito o el fracaso de la interfaz, porque a través de ésta se refuerzan notablemente las ideas y/o conceptos en los contenidos.


Fuente: www.mati.unam.mx

Tecnología CSS, separar contenido de presentación


Escrito por Dulce Carolina Córdova Cruz
31-January-2006


En la actualidad Internet ha causado un gran impacto en la vida del hombre, colocándose con rapidez en diversas áreas. Además se ha establecido como el más flexible medio de comunicación masiva, porque al permitir el intercambio de datos, hace posible que el usuario sea receptor y, si lo desea, emisor de un mensaje.

Por ello se ha convertido, también, en un medio de expresión a través del cual cada individuo que cuente con los requisitos mínimos indispensables, tecnológicos y económicos, tiene la posibilidad de publicar información.

Es aquí donde radica uno de los principales problemas a los que se enfrenta la red. Es bien sabido que las páginas Web se construyen en base a un lenguaje de marcado de hipertexto (HTML), que estructura y presenta información en un formato estándar. No obstante y a pesar de ser un lenguaje de presentación visual, no fue creado para diseñar publicaciones porque limita gráficamente los sitios.

En 1996 apareció CSS (Cascading Style Sheets), un lenguaje de estilo en cascada que se puede utilizar conjuntamente con HTML para definir el formato visual de una página Web, sin forzar el código para adaptar los documentos al diseño de presentación y sin colocar elementos en la página que no favorecen el contenido.

Según las propias palabras de Tim Berners-Lee, inventor del primer navegador y el primer servidor Web del mundo, el espíritu de la red consiste en que cualquier persona pueda leer las páginas Web con cualquier software que funcione en cualquier hardware. [1]

Las publicaciones digitales de 1990 eran diferentes a las que se realizan hoy en día, ya que ahora podemos observar imágenes, animaciones y archivos multimedia. Por ello, el siguiente reto de la red radica en la adopción de tecnologías para controlar la presentación de las páginas, sin involucrar el contenido.

En 1994 Hakon Lie publicó el primer borrador sobre las hojas de estilo en cascada y HTML, con la idea de que el lenguaje de estilo de la Web debe combinar, de algún modo, las preferencias del autor y el usuario. Su propuesta la llevaba a cabo con una cascada que tenía en cuenta múltiples conjuntos de reglas de estilo y un sistema bien definido para determinar el peso de las reglas en competencia. [2]

De este modo, en 1994 se creó la World Wide Web Consortium para establecer los estándares técnicos del crecimiento y el desarrollo de la Web. Sin duda los beneficios más importantes gracias a la utilización de las hojas de estilo externas, son el aumento en la accesibilidad y la disminución del trabajo de producción, así como la fácil labor de mantenimiento de los sitios, evitando la búsqueda entre líneas de código.

Asimismo, al proporcionar un nivel de abstracción, las CSS incorporadas en la cabecera de un documento mejoran el código del mismo, el tiempo de respuesta y la velocidad de presentación de la página, siendo posible declarar una regla de estilo una sola vez y hacer que las condiciones de presentación se apliquen a todos los elementos de ese tipo.

Por último, cabe reiterar en la importancia de utilizar hojas de estilo en cascada para la presentación de documentos en Internet, que además de separar contenido de presentación, ofrecen diversas ventajas en la producción y la accesibilidad. Algunos ejemplos del uso y practicidad de las CSS los podemos encontrar en:



Ó http://www.csszengarden.com ó http://www.camaleoncss.com .


Fuente: www.mati.unam.mx

Los 8 grandes errores del diseño web

Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace poco yo también cometía) y como la excusa perfecta para darles a conocer que sigo vivito y coleando (aunque aún sumamente ocupado), he decidido escribir sobre los 8 grandes errores del diseño web actual. Estas son prácticas que el mundo de la web 2.0, los estándares web y, por sobre todo, la idea de separar la presentación del contenido nos han metido en la cabeza y la mayoría de las veces las hemos seguido sin ponernos a pensar un poquito en las consecuencias.

Primero que nada, vamos a definir diseño web. Diseño web abarca ya no solo lo visual; es toda una ciencia que involucra accesibilidad, apariencia, presentación, contenido, contexto, mensaje e interactividad (si no es que más). Un diseñador web debe ser capaz de, a partir de una idea, generar una solución virtual. Ojo con la palabra: solución. Y para generar una solución, necesitamos tener un problema para empezar. En el caso generalizado de la web, el problema a resolver es el manejar información. Ya sea presentando o editando, visual o auditiva, útil o no tanto; la web es información y nada más. Cómo la manejamos depende de las necesidades que tengamos, y es aquí donde cometemos los 8 grandes errores del diseño web:

  1. ¡Las imagenes también son contenido!
  2. ¡No todo es una lista!
  3. Mi nombre es h1 h1' h1''
  4. Los hacks no son una solución, son un problema
  5. ¡Hola! Me llamo "naranja"
  6. ¿A none voy?
  7. ¡No soy gordo! ¡Soy funcional!
  8. Las tablas no son de satanás, ¡usalas!
Fuente: metalize