Hace unos días pude listar este sitio en html5gallery.com, donde se encuentra publicado en este momento. Asi que si tienen tiempo pueden verlo y si les gusta darle su voto.

Algo que debo mencionar es que yo no me cortaría el cabello en un lugar cuyo peluquero tiene un mal corte. Si vas a enseñar el manejo de tecnologías entonces no es bueno descuidar como las manejas tú mismo.

Debo aclarar que solo voy a comentar lo relacionado con la cabecera pues si me mando todo un analisis nunca termino. Luego de esto empecemos:

Presentación

El diseño es bastante feo, la estructura es mejorable, en algunos casos no es muy funcional y algo complicado de entender. Paso a detallar.

No me parece mal colocar la fecha, luego de eso los enlaces “home”, siempre lo colocamos cuando no lo necesitamos, es decir si ya estamos en el home entonces para que lo queremos, yo mismo suelo hacer esto quizá para que desde el principio se pueda entender como llegar al inicio si es que nos perdemos, “sitemap”, esto es adecuado y finalmente “favoritos”, esto si es una mala broma ¿estamos en 2010 o en 1990? y lo más llamativo es el mensaje que sale al darle click a dicho enlace “Lo sentimos, esta opción sólo funciona en navegadores IE 4.0 o mayores”, insisto en que esto fue una mala broma, y aunque lo optimizarán para todos los navegadores me pregunto, ¿cuántas personas harían al portal IDAT su sitio favorito?.

La animación además de ser muy básica no aporta nada, es como un intento de comercial de televisión puesto en la cabecera. Cuando alguien ha llegado a este sitio web es porque esta interesado en algo de este, entonces en vez de estarle gritando “estas en el portal de idat !!!” lo correcto es facilitarle las cosas para que encuentre la carrera que busca o algun tipo de información importande de esta institución educativa.

Y si la idea es venderse en ese espacio entonces alguna frase simple y clara como ” estudia en el instituto que ganó tales premios o que fue reconocido por tales instituciones”, etc para venderse debes hacer notar cualidades y no simplemente tratar de meter la marca por los ojos a como de lugar.

El logo es claro pero la mejor ubicación es el lado izquiero ya que desde allí empieza el escaneo del usuario y si están preocupados por colocar el IDAT en un lugar visible entonces la parte superior izquierda es la adecuada.

El fondo del menu es muy malo, y si vamos a los menus desplegables la cosa se pone más fea, no soy fanatico de este tipo de navegación pero creo que a veces es necesaría, sin embargo ese fondo complica la lectura, el tipo de letra no es precisamente la mejor para el caso y en los submenus el tamaño de la fuente se reduce y se pintan de un color parecido al fondo al hace un hover.

Maquetado

Acá si no hay mucho que decir pues todo esta mal, esta mal construido y no veo nada de código que sea reutilizable, debería volverse a escribir todo desde cero y borrar lo que se tiene actualmente. Es antiguo y desordenado y queda claro que quien lo hizo llevaba mucho odio en su interior o simplemente no tenía idea de como se hace esto.

La mayoría de la gente llega a google simplemente para buscar y sin interactuar con los enlaces, de este modo ahora cuando carga google el foco se localiza en la caja de busqueda para escribir y luego presionar “enter”, ya que así lo usamos y no necesitamos tocar el mouse para ello.

Ahora bien, si movemos el mouse entonces es porque vamos a navegar mediante los enlaces ya que si solo vamos a hacer una busqueda no necesitariamos el mouse hasta después de obtener resultados.

Tres simples pasos a seguir que podrán ahorrar muchos dolores de cabeza. Para este caso vamos a tomar como ejemplo la tarea de hacer un boceto para la página principal de un sitio web.

1. Contenido

Para empezar debemos tener claro el contenido, esto a veces es un inconveniente pues en algunos casos algún cliente cree que se le puede hacer un diseño a medida sin conocer el contenido. Necesitamos saber que es lo que se va a presentar en el diseño y con que secciones debemos trabajar, este contenido también tendrá un orden de relevancia dependiendo de su importancia. Con el contenido claro podemos pasar al siguiente paso que es estructura.

2. Estructura

Aún sin haber jugado con colores ni fuentes vamos a plantear la estructura, de modo tal que empezamos a distribuir el contenido guiados por la importancia que tenga cada parte de este, papel y lápiz o wireframes nos serán de utilidad. Este paso es muy importante pues vamos a empezar a definir la interfaz con la que va a interactuar el usuario.

Por ejemplo si el sitio se encargará de fomentar la descarga de algún software pues un botón grande de descarga se encontrará a primera vista en la parte superior izquierda ó si el caso implica dar a conocer y fomentar el uso de alguna red social de seguro un pequeño formulario de registro con algún texto de incentivo tomarán toda la parte superior de nuestra estructura.

Una vez que tenemos clara la estructura podemos dar pase al diseño gráfico. Tener una estructura es muy importante, conocido problema de los diseñadores es que se haga cambiar el diseño una y otra y otra vez por no haber definido una estructura previamente, ya que dicha estructura deberá reflejar los objetivos del sitio web habiendo usado el criterio y por lo que no habrá motivo para ser replanteada por simples gustos personales.

3. Diseño

Y me refiero a colores, fondos, tipografías y demás. Es el momento en el que hay que inspirarse y es que teniendo una estructura definida podemos dar rienda suelta a nuestra creatividad, claro que siempre respetando dicha estructura y las relevancias que esta propone, por ejemplo si en nuestra estructura se plantea un botón grande de descarga sera nuestro trabajo enfatizar eso con el uso de los colores, fondos o lo que consideremos necesario.

Acá podremos hacer algunas variantes del diseño, pero al tener una estructura definida será mas simple realizar una elección.

Usualmente se cae en el error, y eso de seguro por presión o apuro, de abrir el software gráfico y empezar a diseñar si haber planteado nada antes de esto. Eso en la mayoría de los casos trae desorden al trabajo, además del riesgo de crear un diseño poco efectivo que puede dar como consecuencia malos resultados para los intereses del sitio web.

Así como antes de emprender algún negocio o algún viaje planeamos y analizamos las cosas, a la hora de crear un nuevo proyecto debemos tomarnos un poco de tiempo para no caer en errores que a la larga nos hagan perder mas que solo tiempo.

Empezando

El curso se dio muy práctico, los diseñadores de RPP ya conocían la importancia del uso de estándares  y además ya estaban investigando su aplicación por lo que la cosa fue mas simple, es decir no encontré gente cerrada en viejas prácticas si no personas muy interesadas en aplicar nuevas tecnologías. Así que solo quedaba distribuir lo que se iva a ver en los días que duraría esto.

Un pequeño repaso

Con papel en mano dimos una pequeña repasada a las etiquetas de html, quizás por la experiencia de ellos no era tan necesario pero nunca esta de más pues para mi html es el padre nuestro de un diseñador.

Algunos detalles

Algunas cosas a tener en cuenta como el modo en que se iva a usar css, la importancia del Doctype, el código limpio, herramientas antes de entrar al maquetado.

Maquetando

Y Empezamos con nuestro querido html, aunque desde un principio era claro que el mayor interés estaba enfocado en lo que podía hacer CSS teníamos que empezar por HTML. Un index.html tomando como ejemplo el home del portal de RPP y arrancamos con el maquetado desde el Doctype hasta cerrar la etiqueta HTML, fuimos construyendo un sitio limpio y dándole el uso adecuado a las etiquetas y claro que nada de vistas wiysiwyg. Una ves que teníamos el contenido listo, limpio y sin una pizca de diseño, Entonces fue el turno de CSS.

Esto si fue de mucho interés, poco a poco un contenido totalmente vertical fue tomando forma y convirtiéndose en una página organizada, colores, fondos  y tipográficas entraron a tallar.

No quedaba mucho tiempo y ya debían empezar a aplicar mucho de lo visto en sus proyectos, por lo que aclarar algunas cosas y ayudar a resolver pequeños problemas fue lo ultimo.  Algunos enlaces, libros recomendados e intercambio de correos y tocaba despedirse.

Una buena experiencia y el incremento de la lista de amigos y buenos diseñadores conocidos. Desde aquí agradezco la oportunidad y espero haber sido de mucha ayuda.

¿Es tan complicado hacer un currículo?

Y no me voy a referir al formato, si no al contenido en si, obviamente que todos no son expertos en todo pero para eso esta el criterio, para tratar de hacer mejor las cosas. En adelante comento errores que encontré con esperanza de que quien lea esto no los cometa no solo en un currículo de diseñador web sino al momento de redactar un currículo en general.

Entiendan a que puesto se presentan

Yo buscaba un diseñador web junior, y me enviaban currículos programadores, diseñadores publicitarios y gente de soporte técnico. No tiene nada de malo manejar otras áreas pero si postulan para el puesto de diseñador web entonces almenos preséntense como diseñadores web, ya que las tareas que deberás cumplir son las de un diseñador web.

Nada de trabajos adjuntos

El único archivo adjunto debería ser el currículo, me tome el trabajo de especificar eso pero no falto quien me adjuntara sus trabajos y hasta alguien me adjunto un cd interactivo (un swf pesadaso y bien feo), lo que trajo a mi mente la expresión “me quiero volver chango”. Un diseñador web tiene sus trabajos en la web y no hay mas vuelta que darle, y si es que recién empiezas y todo esta en tu disco duro pues hay muchos sitios que ofrecen alojamiento gratuito con cantidad de características así que no hay excusa.

Especifica solo los estudios que tuviste en tu formación como diseñador y si eres autodidacta no hay problema

El tema aquí era bastante simple, si eres autodidacta pues señalar libros o sitios donde aprendiste lo que sabes y si haz estudiado en algún lugar pues entonces lista los estudios que tengan que ver con diseño web. En verdad no me interesa si resulta que eres experto en Ms. office, o si tienes estudios de diseño de interiores, o configuración de routers y ensamblaje, etc etc.

Especifica los trabajos que haz tenido como diseñador web

Acá si que me quería volver chango, normalmente lo que se ve es el portafolio pero la experiencia laboral es importante así que al buscar en que sitios trabajan como diseñadores me encuentro con atención al cliente en wong, o atención al cliente en cabinas, o trabajos que tienen que ver con facturación, inventariado, censo, etc. Puede ser comprensible si alguien no tiene experiencia aún, pero gente que ya la tenia rellenaba el currículo como podía.

Coloca primero lo actual y luego lo pasado

Si listas trabajos, entonces tu ultimo trabajo primero, si listas proyectos, entonces tus últimos proyectos primero. ¿Prefieres que ve lo que hiciste hace años cuando todavía te faltaba aprender o lo que acabas de hacer que te quedo muy bien?, esto es simple criterio señores y no tienes que poner todo pon lo mejor.

Pedí currículo no brochure

Esto es a criterio personal, pero cuando pido un currículo quiero ver un currículo no un brochure, si eres diseñador muestramelo en tu trabajo no en tu currículo pues hacer diseños para currículos no es lo que se va a hacer, pero si eres muy creativo y quieres diseñar todo lo que se te ponga en frente entonces pon tú currículo en la web y ahí da rienda suelta a tu imaginación. En cuanto a formatos yo me inclino por pdf, aunque la mayoría solo conoce y hasta algunos son expertos en word, claro que poner su currículo en la web habría sido buena idea.

Muchas veces las empresas mal acostumbran

Algo que tener en cuenta y es que es muy cierto es que si haz trabajado en otras empresas es muy posible que te haya tocado ser todologo, es decir programador y diseñador gráfico/web/multimedia que sepa cocina planchar y lavar, pd con cama adentro XD.

Ultimas observaciones

• Una ves más he corroborado que a veces no importa mucho donde estudies, muchos currículos de personas que pertenecieron a “institutos de prestigio” dejaban mucho que desear. (por ahí alguien se refirió a css como lenguaje de programación).
• Muchas personas se sobrestiman.
• Muchas personas se subestiman.
• Dreamweaver parece ser el único editor que saben utilizar todos, que novedad.
• Aún me sigo preguntando ¿Dónde están los diseñadores web?, vamos muchachos se que hay gente joven muy hábil y que solo es cuestión de esperar.

Para terminar y gracias a Raúl les dejo un buen articulo para tener en cuenta al momento de realizar un currículo, también pueden ver algo de este articulo en español.

La ves anterior regrese con mi polo y mi taza, aunque no pude asistir a compartir las chelas al finalizar el evento T_T, me diverti bastante.

Así que ya saben, pueden registrarse ya, nos vemos.

¿Hay Escases?

Eso parece, ahora ustedes se preguntan ¿Pero si diseñadores web sobran?, ok digamos que la cantidad de institutos que infestan nuestro país los sacan como pan caliente, pero el nivel que estos tienen deja mucho que desear. Para ser claro un anuncio que diga “se necesita diseñador web” será respondido por cientos de postulante y no faltará algún loco al que se le ocurra adjuntar sus trabajos (en verdad hay gente que es capaz de eso).

Pero si el anuncio busca un mejor perfil

Aquí comienza lo bueno, que pasa si te piden que manejes un buen nivel de html y css, requisitos de lo más básicos, pero que se entienda que conozcas no que generes con un wysiwyg en pocas palabras si te dijeran que no uses dreamweaver o frontpage tú no tendrías problema a menos que tengas un gusto particular por este tipo de software, y si de paso hablan de estándares web la cosa se complica, ahora un poco de usabilidad y seo (existen expertos en esto pero aquí somos multifaceticos XD). Terminamos con interés por un cocimiento básico de alguna librería javascript (recordemos que hacemos frontend) y por último tener nociones de algún lenguaje de programación, nosotros no somos programadores pero si trabajamos con ellos así que saber al menos a grandes rasgos como trabajan ellos es fundamental.

Créanme que en algún momento este tipo de anuncio predominará en nuestro mercado así y como lo hace en otros hace ya varios años.

El otro tipo de anuncios

Claro que también hay del tipo que te piden solo manejo de software, estos no son muy exigentes pero no imagines que trabajarás con los mejores. Los clásicos paquetes de adobe, saber windows y esto sin mencionar nada de lo anteriormente indicado.

Entonces que dices ¿eres diseñador web?, ¿Estás listo para el mercado?, si no es así no pierdas tiempo que la información esta regada por Internet y el conocimiento es libre.

¿Por qué diablos tiran basura calle?

Me molesta. Yo no soy ecologista ni mucho menos pero si tienes por ejemplo un paquete vacío de galleta nada cuesta guardarlo hasta llegar cerca a un tacho de basura.

Entonces porque carajo a veces veo a una señora tomando la envoltura vacía de algún dulce de las manos de su hijo y botarlo al suelo, mostrandole al niño como ser cochino y siguiendo con esto por generaciones, tan difícil es acercarse a un tacho de basura?, tan interesante les parece la ciudad llena de basura?.

Si quieren ensuciar ensucien su casa pero no sigan apestando las calles que de por si ya lucen feas.

he dicho.