Acerca de Mi


Mi nombre es Yésica
estudio la carrera de
Ingenieria en Computación
en la UNAM campus CU.
Actualmente estoy
terminando el 8° semestre
y participando en el
Laboratorio de Investigación
y Desarrollo de Software
Libre, ahora como ente
morador del espacio XD.
Esta es mi página
experimental.
Mis intereses personales
son la musica, las artes
plásticas, la tecnología de
las telecominucaciones,
los gadgets,  el software
libre, la programación \m/_
la realidad virtual y el
diseño gráfico


Mantenimiento visual de las páginas de LIDSOL


¿Hay algo mas que no se diga por el simple titulo?

Realmente no mucho. Me daré a la tarea de mejorar visualmente las paginas de lidsol y porqué no, proponer algunas aplicaciones para incluir dentro de las mismas.
Lo primero que hare es comentar acerca del estado actual.


http://lidsol.org/
(... y si me faltan algunas mas, pues... haganmelo saber :P por ahora comenzare con estas)

Seria muy facil buscar por internet un template y fusilarme ideas de otros sitios, pero creo que somos ingenieros, y ademas en un laboratorio de investigacion, lo que nos debe sobrar es curiosidad e inventiva, por lo tanto, mi deseo es que las paginas contengan cosas hechas por nosotros, pero mejor aun, hechas en lidsol.

Y como algo que me fascina es el diseño de las cosas, decidi separar esta tarea de las entradas de blog para no solo reportar los cambios que proponga a las paginas, si no tambien para escribir acerca del fundamento de los mismo.

Espero que los curiosos que lleguen hasta aqui, quieran dejarme algun comentario sobre las propuestas, o igual :D ideas y propuestas.


Importancia de la imagen de lo que vendemos o exponemos

Cuando estamos buscando opciones para consumir algún producto o servicio (vayamos a pagar por el o no) la cantidad de candidatos que se pueden presentar nos hace difícil elegir cual es el que mas nos conviene. La toma de desiciones es un proceso mental, pero también lo es el procesamiento de los estímulos del entorno, sobre todo del efecto del color en las personas -es nuestro tema de interes-, pongamos un ejemplo, el color del mobiliario en Burguer King.
Cuando entramos a estos establecimientos de comida rápida, vemos una serie de mesitas y bancas, hoy en dia ya no es tan común (algunos establecimientos han optado por un diseño más fashion), pero apenas 5 años atrás, teniamos colores como azul rojo y amarillo en la decoracion. Diversos estudios psicológicos demostraron que estos colores hacen que las personas tengan mayor deseo de comer, pero al mismo tiempo, la combinación poco agradable, hace que las personas consuman rapidamente lo que compraron y se marchen. En terminos de ganacias, esto es lo que mas le interesa a ese tipo de cadenas de negocio, gente que consuma, pero que ademas lo haga rapido para que asi de rapido le ceda su lugar a otras personas. Pero tambien podemos producir el efecto contrario en las personas, hacer que se sientan muy agusto en el lugar, que deseen volver a el, y se convierta en su lugar favorito. Por esta razon algunas cadenas de ropa o algunos resaturants gastan mucho dinero en la ambientacion de sus locales.
Bueno vayamos a nuestro tema de estudio un poco mas a profundidad
El color
En algun momento de nuestras vidas, tuvimos alguna clase de Dibujo o de Artes plásticas, ya sea en la escuela o implicitamente cuando alguien nos enseño a colorear. De ahi sabemos que cierta asociacion de los colores.
Tenemos colores frios y colores calidos, pero tambien colores neutros.
La forma y el espacio
Ahora bien echemos una mirada a varias paginas web:
                                       

              

Es fácil advertir que hay páginas que resultan más atractivas que otras. Este es el resultado de la combinación entre color y diseño. Si bien no en todos los casos, el proposito es vender algo, los programadores y administradores de sitios red, así como los encargados de dichos proyectos a nivel organizacional, deben estar concientes de la importancia de la imagen.

Es verdad que dependiendo del producto, se tienen distintas necesidades, parte de hacer un trabajo profesional es la forma en que lo exhibimos. Citando a muchos profesores en la UNAM, diríamos, que de un profesional no puedes esperar poco menos que un trabajo profesional, hablando en el caso del ingeniero, implica que haga lo que debe hacer, si es un programa, que funcione correctamente y cumpla con las normativas de dicta la ingeniería de software, si es un civil, que cumpla con los estándares internacionales de calidad y que sea un diseño sustentable.

En el caso del ingeniero en computación, una parte de la ingeniería de software aborda la necesidad de que el producto este orientado al usuario final, y por debajo del agua, hace evidente la idea de que el diseño del producto debe contemplar el aspecto humano. Deseamos que el software no necesite 300 páginas de manual para poder operarlo, si tiene una interfaz gráfica. o para accesar a sus funciones con una linea de comandos.
Por supuesto que en un proyecto en forma, habrá quienes esten encargados del aspecto humano, pero, nosotros debemos de estar al tanto de ello para poder planificar nuestro trabajo y ser una excelente pieza de rompecabezas.

¿Qué tiene esto que ver?

Bien, cuenta la leyenda que el ingeniero sabe hacer muy bien sus proyectos, pero los hace feos :(
Como una concepción integral de la profesión, debemos contemplar el aprendizaje en otras areas del conocimiento, o en su defecto, contemplar que otras personas de distintos ámbitos, estarán en contacto y continua participación en nuestros proyectos.
Así al menos debemos de tener idea de el impacto que tiene la imagen de nuestros productos, si vamos a controlar un servidor el cual provee via web algúna aplicación, debemos cuidar que su aspecto sea el mas profesional posible. Como lo he mencionado, es nuestra carta de presentación.
Por ello aunque mi objetivo en este espacio es mejorar unas páginas web, no tengo ni la preparación ni el nivel que tiene un diseñador grafico como tal, pero trataré de la mejor manera posible en ofrecer una explicación para aquellos que andan como yo, participando en proyectos de desarrollo y que no solo les interesa que funcione  si no que también ofrezca un aspecto que invite a otros, aun cuando no tienen la remota idea de que se trata, a que lo miren, a que urguen en su contenido a que, su memoria visual les haga recordar que estuvieron ahi, que leyeron lo que hemos publicado y que con el tiempo acaben involucrados con los proyectos :D
¿Mucha curiosidad en lo que he dicho? Aqui estan algunos enlaces que hablan de lo que he dicho. También tengo algunas bibliografias que tratan esto mas formalmente, pero las publicaré mas adelante.
Lo que hay que considerar sobre las páginas de LIDSOL:
  • Que no son HI5.... no necesitamos complejas aplicaciones en flash y no necesitamos animaciones por todos lados
  • Que su objetivo es establecer puntos de comunicación y divulgación
  • Que el es necesario que sean ligeras y de carga rápida.
  • Que al mirarlas, el público se sienta en confianza de participar, pero tambien de solicitar nuestra ayuda.
(si hay algo mas que quieran agregar...   http://zhariadomine.cbox.ws/ )

--------------------------------------------------------------------

Empezando a integrar los conceptos de la forma y el color, necesitamos partir de una referencia. He elegido una distribucion mas o menos equilibrada para la cual necesitaremos elegir la gama de colores asi como el estilo de los marcos y decoraciones en general.



Por ahora no tenemos logos, ni nada, solo una base para comenzar. El diseño esta basado en la plantilla siguiente (aunque debo aclarar que no deseamos llegar al mismo resultado)  http://demo.templateworld.com/zero/in_action/shape/


Manos a la web


Ya definido el esquema, debemos proponer una combinacion de colores agradable, como no podiamos decidirnos por alguna gama en especifico, intentaremos con una combinacion de todos los colores trabajadas de forma en que haya un punto central de atencion y lo demas este en colores relajados.


La propuesta inicial fue hacer un logo que fuera un collage entre el logo rojo oficial de Lidsol y los logos de varios SO y aplicaciones libres, mezclados con formas variadas.

Al jugar con los colores y combinaciones se uso una base en verde agua, para que fuera amigable con los tonos calidos.

el resultado fue progresivo:


             

y finalmente llegamos a la combinacion actual tras probar tres versiones. como se puede ver es una imagen en formato png.
¿Qué nos permite este formato? Entre otras cosas, conservar las transparencias, asi esta imagen puede ser incrustada en cualquier color de fondo y se fundira en el.
Bien, el negro es un color un poco agresivo a la vista, ademas de que desvia la atencion hacia otras cosas, menos hacia el texto.
Se ha propuesto un fondo azul oscuro, tipo naval, para hacelo ver mas elegante y resaltar los efectos de tranparencia asi como el color del logo.
El resaltado de los links es en naranja o rojo para comobinar con las letras y los demas elementos carecen de colores o fondos, para centrar la atencion en el logo, ya que representa en mayor parte el campo de trabajo o dominio del laboratorio.

La página sera dividida en dos, una primera parte que es visible al cargar la direccion, donde se enfoca el logo, y la segunda, que se ve al desplazarse hacia abajo o bien al dar click en el link "Mas"


y la segunda vista:


El siguiente paso es hacer una iteraccion entre el formato visual y el contenido estatico, luego, programar el codigo para desplegar contenido dinamico:

Programacion para desplegar el contenido dinamico



Subpáginas (2): Configuración php