Felipe Vega
Software Engineer
Diagramación y Programación
HTML 5 + ZENCODE
"If you spend too much time thinking about a thing, you'll never get it done." - Bruce Lee
Agenda
- Diagramación
- Maquetación
- Programación
- Herramientas
- ZenCode
- Manos a la obra
Diagramación
La diagramación de una página web consiste en analizar cada sección y sub-sección de la misma para luego armar un Diagrama de Flujo o de Gannt con las funciones y referencias de cada link, como así mismo también su contenido.
En base al diagrama, se opta por determinado lenguaje de programación y se pasa a la siguiente fase llamada "Maquetado"
Maquetación
En esta fase se disponen los elementos visuales de una pagina web con el fin de crear lo que llamamos la UI "interfaz de usuario" es decir, aquellos elementos con los que el navegante interactua.
La maquetacion generalmente esta referida traducir lo gráfico en CSS y HTML.
Programación
Programación
En esta fase escribimos el código que va a formar la estructura de la página en HTML. Luego "pimpeamos" la estructura con CSS y finalmente agregamos interacción mediante JS.
Herramientas
Existen muchos editores de código, librerías y IDEs que facilitan la vida a la hora de escribir código.
Con el fin de tener un ambiente de trabajo agradable recomiendo user Brackets ó Sublime Text.
ZenCode
Cuanto tiempo gastamos escribiendo código HTML/CSS/JS?
Que tal si tuvieramos un auto completador que nos permite escribir toda la estructura de una página en una sola linea?
Let's do it
HTML5+ZenCode
By Felipe Vega
