TUX2013 - Introducción al Desarrollo de Front-end

Expositor: Mariano Medina

Observaciones:

- Diapositiva 2:
Explicación: Definición de Front-end: desarrollo en lenguajes de representación y programación que se ejecuta en el navegador;
y de Back-end: desarrollo del código que se ejecuta en el servidor; Diferencias.

- Diapositiva 3:
Termino de explicar qué es Front End. Muestro un ejemplo del codigo y su versión ya renderizada en el browser.

- Diapositiva 4:
Metáfora con la construcción de la casa:
* Construcción de cimientos, instalación de los pisos, pintura de paredes y otros aspectos estéticos se relaciona con Front-end.
* Instalaciones de servicios y su funcionamiento se relaciona al Back-end.

- Diapositiva 5:
Necesidad de hacer eficiente el uso del tiempo: ganamos realizando una buena preparación.

- Diapositiva 6:
Explicación breve de los 6 puntos claves de preparación, según nuestros criterios.

- Diapositiva 7:
1er Punto. Explicación de porqué especificar los objetivos, funciones, responsabilidades sobre esa funciones y fechas para lanzamiento.

- Diapositiva 8:
Qué Puede salir mal? Ejemplos: caso iCustomer.

- Diapositiva 9:
2do Punto: Sistemas Operativos, Navegadores, Dispositivos y tamaños en resolución de pixeles de pantalla de los dispositivos, y la capacidad de usuarios para manejar esas tecnologías mencionadas. Ejemplos de cada uno.

- Diapositiva 10:
Qué puede salir mal? doble trabajo adaptar algo que no estaba pensado para una determinada especificación de tecnologia. Ejemplo QP.

- Diapositiva 11:
3er Punto. Dónde: Servidor de prueba o local? Especificaciones del servidor en caso de usar el segundo caso.

- Diapositiva 12:
Requerimientos: Que implemente SQL Server o MySQL, o que soporte o no wordpress (algunos ejemplos nada más).

- Diapositiva 13:
Controlador de versión: Qué es? Sistema muy útil para desarrollo y otro tipos de trabajo donde mucha persona intervienen en el mismo banco de información para que no haya colisión de cambios. Nosotros usamos GitHub. Ejemplos. Beneficios.

- Diapositiva 14:
Qué puede salir mal? Ejemplos Aexcel (no tenía las credenciales, el servidor despues de un tiempo se cayó solo).

- Diapositiva 15:
4to Punto: Contenido. Explicación de porque hay que tener un contenido inicial mínimo y parecido al definitivo; contacto con el responsable del contenido.

- Diapositiva 16:
Qué puede salir mal? Ejemplos de textos demasiados largos que no se pensaron como tal. Discuciones con el cliente.

- Diapositiva 17:
5to Punto: Reunión con los diseñadores. Revision de pantallas para definir estilos demasiados dificiles con css o comportamientos poco prácticos en javascript. Revisión de los comportamientos de la estructura del sitio en los distintos puntos de quiebre de los dispositivos y qué sectores desaparecen o aparecen neuvamente en distintos tamaños de pantalla. Definición precisa de los formatos de imágenes para mejorar eficiencia de carga. Definición de las imágenes específicas que se deberan recortar.

- Diapositiva 18:
Qué puede salir mal? Discusión con los diseñadores al no establecer definitivamente estos ítems: problemas con imágenes demasiado grandes. Imágenes retina que no se aclaró que debían recortarse.

- Diapositiva 19:
6to Punto: Estructura de HTML modular pensando el código siempre en bloques. Estilos pensados en forma de clases y no de un elemento en específico, para ser generales y reultizables. Comportamientos desarrollador para ser reusados. Escalabilidad importante.
Estructura de Carpetas, siguiendo recomendación de los frameworks que usemos o bien adaptada a nuestros propositos. Convención de nombres de archivos, variables (javascript) y clases (css).
Explicación de los Frameworks, factores a tomar en cuenta para elegirlos. Elección definitiva del Framework: uno solo en lo posible que abarque comportamientos y estructura responsive.

- Diapositiva 20:
Frameworks más usados. Ejemplo: nosotros usamos siempre Foundation y bootstrap.

- Diapositiva 21:
Qué puede salir mal? Si no hay una convencion de nombres y nomenclatura para definición de hojas de estilos en cascada es muy engorroso alterar el código que hizo otra persona.

- Diapositiva 22:
Conclusión: mejor hacer un breve repaso de los 6 puntos aunque sea conversándolos que no hacer nada.

LINKS:
http://foundation.zurb.com/
http://getbootstrap.com/
http://gumbyframework.com/
http://html5boilerplate.com/
https://github.com/
http://git-scm.com/book/es/ (Documentación para uso de Sistema de Control de Versiones Git)