Una de las grandes preguntas que un profesional Web debe de resolver es la especialización.
Existen en Latinoamérica muchas personas que siguen denominándose con el término "Webmaster", cuando en realidad Internet ha crecido de una forma tan compleja que es necesario conocer nuestros talentos y elegir un camino para destacar y ser más competitivos.
Definiendo a un Frontend
En este curso nos enfocaremos perfectamente bien en el área de Frontend ó al equipo ó personaje que trabaja del lado cliente. Para tenerlo más claro, haremos una comparación.Vamos a imaginar un automóvil:
Los asientos de piel, el color del auto, el volante ó manubrio, los pedales, el estéreo, los espejos. Todo lo que implica exterior del automóvil y tiene interacción con el conductor, es Frontend. Sin él, el auto correría bien pero no creo que nadie quiera subirse a tu automóvil porque se ve muy mal, es muy complicado manejarlo y no se entiende, incómodo ó incluso da la sensación de que es inseguro.
Backend, por otro lado, es la parte interna del auto que realiza el soporte, transmisión, motores. No notamos directamente su presencia, pero hace que todo funcione. Sin él, aunque el auto es increíble a nivel exterior y visual, en el momento que lo abordas te das cuenta que se apaga el motor muy seguido, no enciende o se escuchan fallas dentro del mismo.
Otra gran analogía es la construcción de un edificio, donde los arquitectos e ingenieros civiles deben trabajar en equipo para consolidar un proyecto. La estética y apariencia exterior es importante (Frontend), pero dependen de una estructura sólida y planeación estratégica para que no se derrumbe (Backend).En el área Web es lo mismo.
Es vital entre ambos crear estrategias complementarias que permitan a sus aplicaciones ser épicas.
¿Qué es Frontend?
El Frontend es el área Web que trabaja con el diseño, visualización y dinamismo del usuario, a través del lado del cliente o navegador. Básicamente, TODO lo que el usuario puede ver e interactuar en un sitio o aplicación.
¿Qué hace un profesional Frontend?
Citando a Nate Koechley, Senior Frontend de Yahoo! : "Los profesionales Frontend dan a los sitios fuerza y resiliencia, apariencia y forma, funcionalidad e interactividad. Esta área es crítica para el éxito del proyecto web."
Los objetivos Frontend están enfocados sobre:
- HTML, CSS, Javascript. Maquetar la estructura semántica del contenido, codificar el diseño en hojas de estilo y agregar la interacción con el usuario.
- Crea adaptación y compatibilidad con navegadores y dispositivos.
- Accesibilidad
- Optimización y Ejecución
- Diseño Visual
- Comunicación y Construcción de Procesos
¿Qué puestos complementan a un Frontend?
Los organigramas de Startups y empresas tecnológicas son muy variadas. En el mejor escenario de un proyecto web, existe un equipo interdisciplinario Frontend con puestos y actividades específicas.
Fuente: obapacman.com
Entre los principales puestos de un equipo Frontend se encuentran los siguientes.
Arquitectos de información
Son especialistas en identificar expectativas y necesidades de sus usuarios para determinar contenidos específicos sobre el sitio o aplicación. Crean sistemas de organización, navegación, búsqueda y cuentan con estrategias para escalar la información de forma ágil y estructurada, enfocándose en la funcionalidad.
Diseñadores de Interacción
El área de Diseño de Interacción (User Experience) es una especialidad que registra, evalúa y define la percepción, comportamiento y usabilidad de un sitio con sus usuarios.
Realizan análisis y pruebas con ellos de forma continua para dar certeza de la confianza, seguridad y gusto de ellos con el producto ó servicio tecnológico.
Diseñadores Web
El área de Diseño Web comprende en cubrir las necesidades visuales, funcionales y estéticas del sitio ó aplicación, cumpliendo con los objetivos establecidos.
Se encargan de la estrategia visual, ilustración y creación de imágenes.Deben especializarse en diseño, usabilidad y tienen amplios conocimientos y manejo de aplicaciones informáticas relacionadas con diseño gráfico. En sus habilidades, conocen HTML y CSS.
Maquetadores / Slicer
Los especialistas en maquetación están enfocados en HTML, CSS y Javascript. Desarrollan técnicamente la semántica del sitio y aplican formato. Muchas de las atribuciones de los puestos anteriores se ven en equipos grandes, mientras que en equipos más reducidos vemos a un solo Frontend con muchas de estas habilidades.
Cuando mencionamos en el equipo únicamente a un Frontend o a un Frontend líder de equipo consideramos que es un área técnica porque generan la conexión con el área Backend en cualquier aplicación. Requieren conocimientos avanzados de Javascript. Se encargan de la ejecución, optimización de los recursos y construcción de procesos.
¿Cuáles son las responsabilidades de comunicación que tiene un profesional Frontend?
Un profesional Frontend ó un equipo de ellos funcionan como embajadores. Además de coordinarse con su equipo, deben de estar conscientes de ser receptivos, resilientes y crear comunicación ágil con las siguientes personas:
Gestores de Producto y Directivos
Responsables de la dirección del proyecto web y su rentabilidad. Establecen los planes estratégicos y crean una visión integral con todo el equipo para ejecutar el modelo de negocios.
Ingenieros Backend
El grupo que construye y soporta la aplicación. Da las bases sólidas para escalar y comunicar ágilmente los datos en los servidores.
Usuarios Finales
Es importante que el profesional Frontend conozca y detecte de forma concisa la retroalimentación de los usuarios. Ellos son los principales consumidores y es prioridad conocer sus actitudes y comportamientos con respecto al trabajo creado.
Grupo en Facebook
Cuando estamos rodeados de personas que piensan, comparten y destacan con su talento, irremediablemente empezaremos a hacer lo mismo.
Crecer como comunidad es uno de los retos más grandes que tenemos como plataforma. Sabemos que cuando un estudiante mejora, el resto también lo hará.
Es por ello que te invitamos a formar parte de nuestro grupo exclusivo en Facebook.
Déjanos tu correo en los comentarios para enviarte la invitación.
Eres genial, nunca lo dudes.
Pero para desarrollar tus mejores habilidades debes estar conectado mucho más con el ecosistema, para ayudarnos entre nosotros y crear mayor tracción en conjunto.
Comunidad Platzi
Recuerda que nos reunimos TODOS los lunes en Comunidad Platzi, nuestro stream principal.
Es dirigido por Nicole Chapaval y por estudiantes destacados.
Finalmente, te recomendamos unirte a nuestro canal de Slack.
En serio. Este es SU espacio.
Siéntanse seguros de participar.
Confíen en que los ayudaremos a alcanzar su mejor versión profesional, a través de nuestra plataforma y comunidad.
Asuman que SON el futuro de de nuestros ecosistemas.
Juguemos al más alto nivel.
Bienvenidos.
Cuando hablamos de CSS nos referimos a un lenguaje encargado de definir el diseño de una página. Trabajar con él siempre ha sido muy crudo, demorado y tedioso pero muy importante para la maquetación. Por lo tanto, una de las grandes soluciones ha sido emigrar a compiladores que nos permitan trabajar de forma veloz y efectiva las hojas CSS. Escribir menos código y realizar la misma tarea. Enfocarnos más en la efectividad que en la sintaxis. Así llega Stylus.
¿Qué es Stylus?
Stylus es un preprocesador creado para arreglarnos la vida. A través de procesos de compilación nos permite escribir código ágilmente, es más limpio al momento de transformarlo a hojas CSS, ejecuta variables y crea anidaciones entre estilos, al igual que permite aprovechar herencias. Para instalarlo primero debes instalar NodeJS.
Instalacion NodeJS
Primero debemos instalar NodeJS (tranquilo, no haremos nada de backend):
Windows
Paso 1: ir a http://nodejs.org.
Paso 2: descargar el archivo.
Paso 3: instalar NodeJs.
Paso 4: buscar en sus programas instalados: "Node.js Command Prompt"
Paso 5: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.
Mac
Paso 1: ir a http://nodejs.org.
Paso 2: descargar el archivo.
Paso 3: instalar NodeJs.
Paso 4: abrir el programa "Terminal".
Paso 5: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.
Ubuntu
Paso 1: abrir la terminal.
Paso 2: Instalar dependencias así:
> sudo apt-get install build-essential git-core libssl-dev libssl0.9.8
Paso 3: descargar Node
> git clone git://github.com/joyent/node
Después entra al folder que acabas de descargar con:
> cd node
Paso 4: pasar a Node Js 0.8.4
> git checkout v0.8.4
Paso 5: compilar e instalar NodeJS.
> ./configure> make > sudo make install
Paso 6: teclear node -v para comprobar que se instaló. Deberán tener v0.8.x.
Instalacion Stylus
Y ahora para instalar stylus debemos abrir consola o terminal (en caso de Windows debe ser una consola de node) y ejecutar el siguiente comando:
npm install stylus
Ahora debes saber que todos los archivos de Stylus tienen la extensión .styl y que aquí irá nuestro código. En Stylus se usa identación. Al igual que Python, se usará la asignación de estilos y un espacio después del atributo se interpretará como los dos puntos; olvídate del punto y coma, el enter lo reemplazará y ahora podrás poner variables y anidar estilos como en el siguiente ejemplo:
#home
.container-noticer
border-bottom 1px solid #D6D7D7
.link-absolute
position absolute
left 0
z-index 4
.cont-left
width 665px
float left
.course
.course
height 454px
overflow hidden
font-size 0
&:hover
.image
width 50px
Ahora para compilar nuestro archivo colocaras en la consola la siguiente línea:
stylus -c >< ubicacion/archivo.styl >> ubicacion/archivo.css