Competencias y conocimientos del desarrollador de interfaces.

Equipo de Diseño UI Transversal.

HTML
Ya sea que sea un principiante o un experto en el lenguaje HTML, es importante seguir
algunas de las mejores prácticas para mantener sus desarrollos coherentes y
organizados. Con tantos elementos, atributos, propiedades, valores y más, hay mucho que
aprender.

¿Qué conforma el parámetro “HTML”?

1. Utilice el elemento HTML correcto en el lugar correcto. Conozca todos los
elementos HTML disponibles y utilícelos correctamente para una estructura de
contenido semántica y significativa.
2. No usar Divs para todo. Según el último borrador de la W3C, un Div es un elemento
sin sentido que debe usarse como último recurso. (referencia punto 1).
3. No usar estilos en línea. Puede parecer una ruta fácil colocar el estilo en línea con
el código en lugar de crear una hoja de estilo externa. Sin embargo, los estilos en
línea no son una buena práctica de codificación porque dificultan la actualización y el
mantenimiento de un sitio web. En su lugar, mantenga sus estilos separados de su
HTML.
4. Cierra siempre las etiquetas. Para evitar encontrar errores de validación, recuerda
siempre tener una etiqueta de cierre para cada etiqueta que cree.
5. Usa siempre “alt” en las imágenes. Es importante tener un atributo alt significativo
por razones de validación y accesibilidad. El atributo alt proporciona contexto a los
lectores de pantalla, por lo que debe ser descriptivo de lo que contiene la imagen.
6. Reducir la cantidad de elementos en una página. Los documentos HTML pueden
volverse complicados, especialmente para páginas web con mucho contenido. Para
reducir el tamaño de tus páginas, busca oportunidades para optimizar aún más su
código una vez que haya terminado con su desarrollo.
7. Usa marcado en minúsculas. Tu HTML se puede escribir en minúsculas o
mayúsculas y la página web se representará correctamente. Sin embargo, es una
buena práctica mantener los nombres de las etiquetas en minúsculas porque es más
fácil de leer y mantener.
CSS
Seguir unas pautas a la hora de crear tus estilos CSS hace que tu código sea más claro y
legible tanto para ti y tus compañeros de proyecto, como para futuros desarrolladores que
deban trabajar con tus implementaciones.

¿Qué conforma el parámetro “CSS”?

1. Organización de la Hoja de Estilos. Es importante poner los estilos en la forma más

simple que permita encontrar rápidamente los elementos en el código. Además,
siempre hay que tratar de usar CSS comentado por bloques al igual que en HTML
para facilitar la comprensión de este y la ubicación de los diferentes componentes, así
como aclarar determinados comportamientos en caso de ser necesario.
2. Nunca colocar estilos en línea. El uso de estilos en línea muestra el código HTML
desordenado. Actualizar cada estilo de eventos HTML a través de CSS global es
difícil.
3. Usar siempre CSS externo o fuera del HTML. De esta manera todo el CSS se
almacena en un solo sitio, éste mismo se almacenará también en caché y cargará
más rápidamente la pantalla
4. ‘Shorthand CSS’. Una característica de CSS es la capacidad de utilizar propiedades
y valores abreviados. La mayoría de las propiedades y valores tienen alternativas
abreviadas aceptables, por ejemplo: padding: 0 0 0 20px; en lugar de: padding-top:
0px; padding-right: 0px: padding-bottom: 0px; padding-left: 20px
5. Utilizar siempre metodología de nomenclatura basada en BEM. Es una manera de
nombrar las clases de los nodos de tu HTML para posteriormente atacarlos con CSS
de una manera fácil, sencilla y clara. B (Bloque) E (Elemento) M (Modificador).
a. Ejemplo:
<div class="block">
<div class="block__element">Elem 1</div>
<div class="block__element">Elem 2</div>
<div class="block__element block__element--modifier">Elem 3</div>
</div>

<div class="item item--modifier">

<div class="item__element">Elem 1</div>
<div class="item__element">
<div class="item__another-element">Elem 2</div>
<div class="item__another-element">Elem 3</div>
</div>
<div class="item__element item__element--modifier">Elem 4</div>
</div>
 6. Evitar selectores o definición de estilos demasiado específicos. Si creas
selectores muy específicos, a menudo encontrarás que necesitas duplicar fragmentos
de tu CSS para aplicar las mismas reglas a otro elemento.

PREPROCESADORES
Un preprocesador CSS es un programa que te permite generar CSS a partir de la sintáxis
única del preprocesador. La mayoría de preprocesadores CSS añadirán algunas
características que no existen en CSS puro, como variables, mixins, selectores anidados,
entre otros. Estas características hacen la estructura de CSS más legible y fácil de
mantener.

¿Qué conforma el parámetro “PREPROCESADORES”?

1. CSS orientado a Objetos (OOCSS). Los beneficios de rendimiento de OOCSS son

dobles:
a. Gran reutilización del código CSS, por lo que se necesita menos código CSS,
lo que significa:
i. Archivos más pequeños, por lo tanto, transferencias más rápidas.
ii. Es probable que un mayor porcentaje del código CSS necesario en la
mayoría de las páginas de su sitio sea reutilizado y posiblemente
almacenado en caché por el navegador.
b. En menor grado, menos repintados y cálculos de diseño por parte del
navegador. En una sola página, cuantas más reglas CSS se reutilizan, menos
tiempo dedica el motor de renderizado a calcular los "valores calculados".
2. CSS escalable y modular (SMACSS).
3. Inverted Triangle CSS (ITCSS).

4. Conocimiento en alguno de los 3 preprocesadores más conocidos, SASS, LESS y/o

STYLUS.
VISUAL DESIGN
Es una habilidad que concede la capacidad de analizar y estudiar la disposición de
elementos en una vista desarrollada, con el objetivo de encontrar estabilildad perceptiva,
cohesión gráfica y preocupación constante por el orden y estructuración de lo que se
muestra.

¿Qué conforma el parámetro “VISUAL DESIGN”?

1. Construcción fidedigna de las maquetas entregadas por UX, no solo basado en el

cumplimiento de lineamientos de desarrollo, si no también orientado en la perfección
del resultado visual de lo que se desarrolla.
2. Preocupación por el orden y estructuración visual de la pantalla que se construye.
3. Uso correcto del Sistema de Diseño en cumplimiento establecido en la creación y
uso de componentes definidos.

JAVASCRIPT
JavaScript es un lenguaje de programación interpretado basado en el estándar ECMAScript.
Considerar actualmente el lenguaje universal puede ejecutarse no solo en los navegadores,
sino también en servidores o incluso en cualquier dispositivo que cuente un motor o
intérprete de JavaScript.

¿Qué conforma el parámetro “JAVASCRIPT”?

1. Conocimiento en convenciones de codificación de JavaScript (jshint, eslint, Google

JavaScript, Style Guide, etc…).
2. Conocimiento en programación orientada a objetos y programación funcional.
3. Uso y conocimiento en los nuevos estándares de JavaScript (ECMAScript).
4. Conocimiento en Framworks de JavaScript tales como Angular y React.
5. Manejo de herramientas para automatizar y mejorar su flujo de trabajo (GulpJS,
GruntJS, etc…).
ANIMACIONES
Las animaciones deben usarse para mejorar la experiencia del usuario. No deben usarse
solo para deleitar al usuario, ya que tienden a terminar siendo deficientes. Las animaciones
se pueden usar para reducir la carga cognitiva, definir las relaciones entre los elementos,
proporcionar pistas visuales para el usuario etc...

¿Qué conforma el parámetro “ANIMACIONES”?

1. Conocimiento en CSS animations y transitions.

2. Conocimientos en las funciones de Easing.

PATRONES DE DISEÑO
Los patrones de diseño son soluciones probadas para problemas recurrentes que pueden
simplificar, estructurar y hacer mas predecible nuestro código.

¿Qué conforma el parámetro “PATRONES DE DISEÑO”?

1. Simplificación del código escrito.

2. Generación de código predecible.
3. Generación de código fácil de mantener y testear.
4. Implementación de soluciones.

ACCESIBILIDAD
WAI-ARIA es una iniciativa del W3C que define cómo hacer accesibles contenidos y
aplicaciones web.

¿Qué conforma el parámetro “ACCESIBILIDAD”?

1. Conocimiento de las bases de accesibilidad y normas establecidas por la W3C.

2. Cumplimiento de los mínimos de integración de accesibilidad en el código HTML o
cual se ocupe, para determinados elementos tales como title, alt…