#BFTW: Foundation

One day training program for aspiring web developers.

Learn the core technologies of the web, from an awesome team of experienced web developers.

Who should attend?
This training is designed for people with very little or no experience in web development. We will introduce you to the foundational technologies of web development: HTML and CSS. There is no age requirement but a basic knowledge of using a computer, creating, editing, deleting files and browsing the web is required.

The lectures will be offered in Spanish and materials will be in English. A lot of the terminology tends to be in English so we expect attendees to have at least some basic English skills.

Tell me more
Below you’ll find a few of the topics we are going to cover on the training. As you can see it’s going to be quite an intense ride so rest well and come ready.

  • Introduction to HTML
  • Working with Links, Images and Paragraphs
  • HTML Structure: Using Lists
  • HTML Structure: Tables, Divs and Spans
  • Building your first page
  • Styling HTML Elements
  • Introduction to CSS
  • CSS Classes and IDs
  • CSS Selectors
  • CSS Element Positioning
  • Styling your first page
  • A little about responsive web design
  • Brief intro to Bootstrap

Adobe Edge: HTML5 a la Flash

Screenshot Adobe Edge

Por: Francisco Tirado

Acaba de salir el primer preview de Edge por Adobe, inmediatamente baje la versión de Mac y me puse a trabajar!

¿Por qué la pompiadera?
Para quienes no comparten mi ánimo inmediato o no están al tanto de las recientes batallas entre el Flash plugin y HTML5 (ya no tan reciente desde que HTML5 ganó), Edge es la respuesta de Adobe a los ataques de Steve Jobs por incosistencias en el player en Mac, la inabilidad de tener una version no-limitada en los aparatos móviles y en fin haber perdido la batalla contra estándares.

¿Que es?
Lo que idealmente Edge nos traerá es un IDE (Entorno de desarrollo integrado) que haga mas fácil la creación de animaciones, aplicaciones y juegos sin necesariamente saber HTML/CSS/Javascript. En mi opinión la meta no es tanto la herramienta para quienes no saben tales lenguajes, si no una manera de estructurar el código en un ambiente visual mas fácil de apreciar y entender por varios programadores.

El GUI
Habiendo sido un fiel usuario de Flash por años, me resultó bien facil de usar, se siente como la versión futurística de la version del 1994 de Flash; explico…
Aunque el GUI (Interfaz gráfico de usuario) está a la par con los programas populares de Adobe inclusive mas ‘sleek’ que CS5; siendo el primer preview falta la mayoría de todo. Tanto asi que las herramientas con que uno cuenta son sólo tres: el pointer, un rectángulo y rectángulo con esquinas curvas. Por el momento no hay círculos, ‘paths’ y mucho menos movieclips.

¿Donde está el MovieClip?
Para todos aquellos que vienen del mundo de Flash conocen lo importante y poderoso que es un movieclip. Es tan importante que paré todo un momento y me pregunte cómo no había algo parecido… Mientras lo extrañaba me puse a pensar en el enfoque de diseño que le está dando Adobe a este proyecto. Realmente no hay necesidad para un movieclip, tus objectos son tan sofisticados como quieras determinar por Javascript. Por ejemplo, una vez termine mi animación en Edge quería que hiciera un loop y al no encontrar como hacerlo en el programa, escribi lo siguiente en el ready function:

 

El Código
Con esta realización me puse a verificar el código que genera Edge y es lo mas limpio que he visto ser generado por un programa. Se acabó el tiempo pre-web2.0 de los plugins con valores duplicados para ’embed’ y ‘object’, ahora parece que esto lo hizo la misma w3c. Todo está super organizado al abrir el bonete y obviamente el motor es jQuery. El css viene generado con fallbacks e interpretaciones específicas para cada browser. Todo lo que es Javascript está en un file aparte. Estoy seguro que en un futuro se podrán usar los CDN de Google y quizas comprimir los ‘.js’.

No todo es fiesta sin embargo, mayormente porque no se puede hacer casi nada con la aplicación, pero es el inicio. Edge puede ser el jQuery de javascript, y un punto de entrada para animadores y diseñadores a HTML/CSS/Javascript.

Aquí una animacioncita que hice.

Compass para Sass

Acabo de enterarme que existe compass. Este es un verdadero framework para css que utiliza Sass. En el pasado proyectos como Blueprint y 960 Grid, han tratado de llamarse framework pero en realidad son una grupo de archivos y clases creados para facilitar el layout.

Con compass y sass es posible extender las clases que trae el framework, agilizando el proceso de desarrollo de estilos en css. Hoy empecé a leer un poco mas sobre estos dos proyecto y espero poder empezar a usarlos en mi próximo trabajo. El reto mayor será incluir la generación de los archivos css en el proceso de desarrollo y una vez sea hora de instalar el proyecto en el ambiente de producción.

Aquí les dejo un video.

De idea a realidad en 5 pasos

En este video Ryan Singer (@rjs) de 37signals cuenta el proceso que usan internamente para crear sus aplicaciones. Me parece muy interesante porque van de un modelo de la data, a un listado de pantallas, luego a un sketch de poca resolución, después a código html y finalmente código real final.

Creo que este es el acompañante perfecto para mi post anterior sobre hacer wireframes directamente en html. Gracias a @omarramos por el link.

Wireframes en HTML

Me considero un experto en OmniGraffle. Lo use a diario para crear wireframes, de todo lo que trabajo. Aquí mi única queja: Las herramientas que tiene este app para convertir los prototipos en interactivos son pobres y dejan bastante que desear.

Hoy me encontré con este artículo que habla de hacer wireframes en html directamente. Esta idea la he escuchado varias veces antes pero siempre termino usando OmniGraffle. Mi preocupación principal es ser menos rápido una vez ya tenga la practica suficiente y haya sobrepasado la curva inicial. Yo hago todos mis diseños web “a mano” pero la velocidad nunca ha sido un issue. Regularmente cuando llego a este escenario ya tengo unos wireframes aprobados y revisados varias veces así que no tengo que hacer cambios mayores.

La desventaja que tiene la técnica que uso ahora es que aveces diseño cosas que son muy complicadas de hacer con HTML/CSS y cuando llego a crear el markup, tengo que luchar para crear las cosas. Si diseñara directamente en HTML y CSS no tendría ese issue y podría hacer pruebas con mucho y poco texto, para ver como reacciona la interface final.

Otra ventaja que veo y la que más me llama la atención es la posibilidad de hacer “user testing” remoto con los wireframes en HTML. Creo que sería más fácil que lo que hago ahora que es generar imágenes con links de los dibujos en OmniGraffle.

En fin me gusta la idea de hacer wireframes en HTML, así que voy a probarlo en el próximo proyecto. Claro uno que necesite diseñar pocas pantallas. ¿Has hecho wireframes en html? ¿Como te fue?