Para practicar

Screen Shot 2014-11-18 at 14.09.48

Estimados:

Para quienes necesiten practicar, además de todos los apuntes y videos que hay en este blog, les recomiendo las carreras de Acamica.com

Los cursos están dictados por varios docentes según el tema. Algunos están dictados por mí (Lucas Mourelle), por lo que siguen más o menos la misma lógica que nuestras clases en la materia.

OOCSS, SASS y CSS Atómico

Para quien pueda interesarle, dejo video y slides de unas charlas que se dieron en el último Buenos Aires Front-end Meetup.

Una charla la di yo y la otra el talentoso Alejandro Vizio —director creativo de Aerolab, a quien invitamos este año a nuestra cursada—.

Aquí les dejo el video de ambas charlas. Arrancan en el minuto 11:40. Una es muy técnica: cómo generar código CSS fácil de mantener con OOCSS, Sass y Atomic CSS; la otra sobre Onboarding & Storytelling.

(Empieza en el minuto 11:40)

 

A continuación dejamos las slides de la charla sobre Atomic CSS :

 

Cierre de cursada 2014

Código y más código!

Como ya es tradición en CompuGraf5 (ex CompuGraf3), los cierres de cursada siempre quedan fuera de la misma. Todos los años hacemos lo posible por aprovechar al máximo el tiempo de aprendizaje de la materia y siempre me las arreglo para quedarme sin un espacio para una despedida. Más vale tarde que nunca.

Espero que hayan podido aprovechar la cursada para aprender algo. Por lo pronto, creo que logramos transitar una buena parte de los conocimientos que considero fundamentales para hacer el trabajo que suele llamarse, de forma bien técnica y específica: desarrollo web front-end (front-end development). Charlamos y practicamos las bases de HTML y CSS, y hablamos alguna que otra cosa acerca de la función de JavaScript en el universo Web.

Gran parte del tiempo nos la pasamos escribiendo código. Esto, estimados, no es poco. Vivimos en un mundo donde cada vez más “cosas” —por decirlo de alguna manera— se construyen a partir de software… de código digamos. Me gustaría que recuerden todo lo que vimos acerca del maquetado de una web, pero sobre todo me gustaría que lo miren con cierta perspectiva, que den un paso atrás y reflexionen sobre la importancia de haber creado piezas de diseño escribiendo. Hoy y mañana, el trabajo de un diseñador gráfico tendrá más que ver con esto de escribir código, antes que con toquetear botones en la pantalla de la computadora.

Por eso les recomiendo que reflexionen con cierta apertura de mente, que lo piensen como un primer paso en la aprendizaje de otros lenguajes. Permítanse investigar, experimentar, leer libros, artículos… googleen por favor!

Con código se construyen sitios web, pero también edificios, libros electrónicos, automóviles, aplicaciones para celulares, los controles de los aviones y la agenda de la secretaria del dentista.

Por otra parte, me interesa también que recuerden el concepto de accesibilidad y se tomen su trabajo con responsabilidad: como diseñador especializado en la Web, estoy orgulloso de que nuestra área sea una de las pocas en donde el diseño se preocupa genuinamente por generar piezas gráficas accesibles para personas con capacidades especiales. Como vimos, la división de contenido y forma, junto con el marcado semántico del contenido, permite que un soft lea una pieza gráfica a un usuario no vidente, o permita la utilización de una interfaz a una persona con dificultades motrices, por citar algunos ejemplos. Recuerden esto, es muy importante. Recuérdenlo para la Web y traten de llevarlo a otras áreas de nuestra labor de diseñadores. Tenemos una responsabilidad ante la sociedad.

Además —otra tradición de la materia— van aquí algunos pequeños consejos que pueden ser de utilidad:

  • Miren mucho, lean mucho, rompan mucho: hoy es muy fácil aprender cosas nuevas. Tenemos casi (casi) todo el conocimiento de la humanidad al alcance de la mano; basta con perderse en la Web por un rato.
  • Experimenten: no se queden en la mera posición del consumidor, del que únicamente mira, lee o rompe. Construyan cosas, prueben, mezclen, programen. Rompan para construir algo nuevo. Usen su tiempo para producir!
  • Compartan: lo que vean, rompan, experimenten, programen, construyan… compártanlo! No sólo ayudarán a otros, también conocerán gente interesantísima y se darán a conocer. Compartir es también una buena manera de hacer marketing personal, tal vez incluso una buena táctica para encontrar su próximo gran trabajo.
  • Estudien inglés: para bien o para mal, el idioma inglés es la lingua franca del mundo. Van a estudiar inglés no sólo para hablar con ingleses, norteamericanos, australianos y algún que otro etcétera. Van a estudiar inglés para hablar con japoneses, austríacos, suecos y el mundo en general. Van a poder leer textos técnicos y libros de diseño, programación y  el tema que deseen sin problemas por falta de traducciones.
  • Usen con inteligencia las redes sociales: son una herramienta de marketing increíble para ustedes y sus clientes. Chusmeen la otra cara. Cuando una herramienta web es gratuita, ustedes no son el cliente: ustedes son el producto. La materia prima de Facebook son sus usuarios. Facebook vende a sus usuarios. Investiguen el otro lado. Úsenlos (Facebook, Twitter, LinkedIn, Youtube, Vimeo, Cargo Collective, etc.) para darse a conocer, dar a conocer su trabajo y ayudar a sus clientes. Investiguen las posibilidades pagas que ofrecen estas redes. Conviértanse en clientes.
  • Trabajen en un startup: se trata de empresas pequeñas que están probando nuevos rumbos. Generalmente dan mucha importancia al buen diseño, y con ello a los buenos diseñadores. Es difícil cumplir una tarea trascendental en una empresa grande y paquidérmica; en un startup tendrán la oportunidad de hacer una diferencia!
  • Sean felices: nada de lo que están aprendiendo sirve para nada si no son felices con lo que hacen. Búsquenle la vuelta. Dentro y fuera del diseño las posibilidades son infinitas. Pasamos demasiado tiempo trabajando como para no encontrar el trabajo que nos haga felices.

Nos vemos en el final!
Salutes!

Recuperatorios, reincorporaciones y exámenes finales

Estimados, aquí les paso las prontas fechas de recuperatorios, reincorporaciones y finales.

  • Viernes 11 de julio: recuperatorios y reincorporaciones. (15:30hs turno tarde, 19hs turno noche)
  • Viernes 18 de julio: exámenes finales. (15:30hs turno tarde, 19hs turno noche)

Reincorporaciones: recuerden que quien deba reincorporar, de no presentarse en la fecha indicada perderá la cursada de la materia.

Modalidad de exámenes:

  • Reincorporación: se les tomará examen oral teórico.
  • Recuperatorio: se les tomará un examen práctico (en la computadora), similar al parcial que deban recuperar.
  • Final: se les tomará un examen práctico, deberán maquetar con HTML, CSS e imágenes, un diseño dado en formato Illustrator, Photoshop o PDF.
    Más información sobre el examen final.

Importante:

  • Libreta de calificaciones: Traigan la libreta para todas las instancias de recuperatorio, reincorporación y examen final. No podrán rendir sin ella!

Saludos!

Modalidad examen final

El examen para quienes cursaron en los años 2011 o posteriores consta de una evaluación en vivo —en las computadoras— donde tendrán que realizar el maquetado HTML+CSS de un diseño estático que se les será entregado (en formato Illustrator, Photoshop o PDF).

El examen será a “libro abierto”. Pueden traer y ayudarse con sus apuntes (referencia de etiquetas HTML, propiedades CSS, etc), pero no pueden traer: pendrives para enchufar en la computadora, código ya escrito, archivos ya empezados.

Qué se tendrá en cuenta al revisar el examen terminado:

  • Comprensión de la consigna.
  • Sintaxis correcta de HTML.
  • Sintaxis correcta de CSS.
  • Marcado fuertemente semántico de HTML.
  • HTML libre de elementos presentacionales. Completa separación de contenido (en HTML) y forma (en CSS).
  • Parecido con el diseño estático original entregado.

Qué conviene repasar:

  • Manejo de archivos y carpetas.
  • ¿Para qué sirve el lenguaje HTML?
  • Sintaxis de HTML: etiquetas y atributos.
  • ¿Qué es el doctype? (no es necesario aprenderlo de memoria)
  • Codificación (encoding) del documento.
  • Etiquetas que conocemos (<p>, <h1>, <h2>, etc.).
  • Atributos que conocemos (href, rel, etc.).
  • Estructura de un documento HTML.
  • Completa separación de contenido y forma.
  • Análisis de un contenido y marcado estrictamente semántico por medio de HTML.
  • Rutas absolutas y relativas.
  • Cómo armar links.
  • Recorte y exportación de imágenes para la Web con Adobe Photoshop.
  • Sintaxis de CSS: selectores, propiedades y valores.
  • Manejo tipográfico con CSS.
  • Manejo de modelo de caja (box model) con CSS.
  • Posicionamiento de objetos con CSS.
  • Propiedades CSS que vimos en clase.
  • Construcción de selectores CSS.
  • Maquetado a través de HTML+CSS+imágenes: es decir, poder copiar un diseño realizado con algún soft —Photoshop, Illustrator, etc— e implementarlo como página web.

Viernes 04/07 – clase turno tarde: suspendida

Estimados,

Por cuestiones personales, no voy a poder asistir este viernes 04 de julio a la clase del turno tarde. Las notas y la devolución de los parciales ya fueron enviados por email, y estoy a disposición por cualquier consulta que tengan.

De todas formas, iré al turno noche, por lo que si necesitan hacerme consultas personalmente, los invito a la clase de la noche: mismo viernes, de 20:40 a 22hs.

Mando saludos a todos!

Parciales

Código y más código!

Siempre es bueno ver a un conjunto de diseñadores codeando.

Hoy y mañana, el código es y será parte fundamental de nuestro trabajo; sea que utilicemos XML en el workflow de trabajo editorial gráfico, sea que usemos HTML, CSS y JavaScript para el maquetado de sitios web, sea que utilicemos Ruby o PHP para la programación de la lógica de una webapp, sea que utilicemos XHTML y CSS para la realización de eBooks en formato ePub o Mobi (kindle), o que escribamos código para realizar un efecto de wiggle en AfterEffects, lo cierto es que el código nos rodea.

Este primer acercamiento al código que tuvieron durante la cursada los ayudará muchísimo a futuro. A medida que pasan los años, es cada vez más raro ver a un diseñador que no tenga que lidiar con código en cualquiera de las ramas del diseño.

No importa qué lenguaje aprendan, cómo y cuándo. Siempre será de gran ayuda aprender otros lenguajes y otras formas de resolución de problemas. Esto les abrirá la puerta a nuevas formas de pensar y ver el mundo.

¡Incluso las actions de Photoshop están programadas! (en ese caso: JavaScript)

===

Con respecto a las notas, las estaré enviando por email a cada uno de ustedes en cuanto las tenga. Ya envié algunas.

Saludos!

Demanda de puestos de trabajo

Para tomar con pinzas, pero va una infografía con los puestos de trabajo emergentes más demandados, según ZonaJobs.

  1. Programador de aplicaciones móviles
  2. Técnico energético
  3. Programador HTML5
  4. Big Data
  5. Cloud computing
  6. Diseño y maquetación con HTML5

ranking-emergentes-salarios

 

===

También es interesante ver qué se está pidiendo en otros portales de trabajo, por ejemplo en las categorías de puestos de trabajo de Odesk.com , está a la cabeza Web Development (desarrollo web) https://www.odesk.com/o/jobs/browse/

Parcial – viernes 27

El viernes 27 de junio tendremos el parcial.

El examen será “a libro abierto”. Durante el parcial podrán consultar apuntes, la web, el blog de la materia y varios etcéteras. No podrán consultarse entre sí, ni enchufar pendrives y similares en la computadora del examen.

Muy importante, practicar:

  • Recorte y exportación de imágenes para la Web con Adobe Photoshop.
  • Manejo tipográfico con CSS.
  • Manejo de modelo de caja (box model) con CSS.
  • Posicionamiento de objetos con CSS (márgenes, floats, etc).
  • Propiedades CSS que fuimos viendo.
  • Construcción de selectores de CSS.
  • Maquetado a través de HTML+CSS+imágenes: es decir, poder copiar un diseño realizado con algún soft —photoshop, illustrator, etc— e implementarlo como página web.