El logo de DevSkillerLogotipo de TalentBoostLogotipo de TalentScore

Cómo mostrar las habilidades de los desarrolladores del front end - HTML y CSS

Publicado: Última actualización:
Cómo filtrar las habilidades de los desarrolladores del front-end - Blog de HTML y CSS

HTML y CSS son dos de las habilidades más fundamentales de los desarrolladores de primera línea. Sería difícil encontrar un desarrollador web que no tenga al menos un conocimiento básico de los dos pilares. Sin embargo, algunos creen que el HTML y el CSS no deberían recibir el mismo respeto que otros lenguajes porque ninguno de ellos requiere ninguna lógica interna. Eso es porque HTML y CSS son lenguajes declarativos que instruyen a un navegador web para mostrar páginas web en lugar de usar código computacional.

A pesar de lo que algunos puedan pensar, cada vez es más valioso para los desarrolladores poseer un profundo conocimiento y experiencia de estos dos idiomas. Verificar los conocimientos de HTML y CSS de un desarrollador es tan importante como determinar las habilidades en lenguajes como Java y C++. Seguramente, cualquier persona vagamente técnica debería tener una comprensión básica de HTML y CSS. Al final, eso es todo lo que necesitas, ¿verdad? No exactamente.

El HTML y el CSS constituyen la columna vertebral del desarrollo del front end junto con JavaScript. De hecho, también encontrarás un montón de desarrolladores de back-end que utilizan estos lenguajes de forma regular. Mientras que nunca encontrarás un desarrollador que sólo use estos lenguajes, HTML y CSS son lo suficientemente críticos para el desarrollo de software moderno como para asegurar que desarrolladores de la parte delantera son capaces de usarlos de manera efectiva. Si bien son sencillas para empezar, las aplicaciones avanzadas requieren una profunda habilidad y comprensión. Es esencial verificar que su desarrollador tenga esta comprensión.

Mira más cualidades de un ingeniero de software.

¿Qué son HTML y CSS?1. ¿Qué son HTML y CSS y para qué se usan?

1.1 ¿Qué es el HTML?

HTML o Lenguaje de Marcado de Hipertexto es el lenguaje de marcado estándar para crear páginas web y aplicaciones web. Los lenguajes de marcas se diferencian de los lenguajes de programación en que no realizan ninguna lógica. En cambio, el HTML está diseñado para crear un documento estructurado utilizando elementos como imágenes, formularios, listas, etc. Depende del navegador interpretar este documento para crear las páginas web que terminas viendo (como la que estás leyendo ahora mismo).

1.2 ¿Qué es el CSS?

Las hojas de estilo en cascada o CSS proporcionan una definición estándar de cómo deben aparecer los diferentes elementos en la página. ¿Qué es lo que quiero decir? Imagina que quieres que un pintor pinte tu casa, podrías decirle el color que quieres de cada pared individual. Esto sería similar a dar tus instrucciones sólo usando HTML. Requeriría muchas instrucciones para tus pintores y tardaría más tiempo en escribir.

Pero si eres como yo, quieres que todas las paredes de tu casa sean del mismo color. En ese caso, le dirías a tu pintor que pinte cada pared de un color determinado. Esto sería como dar instrucciones usando CSS. Con CSS, puedes definir un aspecto estándar de un elemento en tu página para que cada vez que crees un nuevo elemento, todos tus estándares de diseño estén intactos. Requiere menos instrucciones y significa que los nuevos elementos, como los colores y las fuentes, serán consistentes con el resto de la página.

1.3 ¿Para qué se utilizan el HTML y el CSS?

Usados juntos, el HTML y el CSS son las piedras angulares de la World Wide Web. Ambos son muy populares, y los conceptos básicos son fáciles de aprender. Tomados con JavaScript, son dos de las tres habilidades esenciales del desarrollador. Pero un desarrollador de front-end necesita saber más que los conceptos básicos para hacer un buen trabajo.

2. ¿Qué es importante que un reclutador de IT sepa sobre las habilidades de los desarrolladores frontales HTML y CSS?2. ¿Qué es importante que un reclutador de IT sepa sobre las habilidades de los desarrolladores frontales HTML y CSS?

2.1 Normas

El World Wide Web Consortium (W3C) es la organización de estándares internacionales que crea los estándares HTML y CSS. Dicho esto, la última versión de HTML es HTML5, que sigue el estándar WHATWG (llamado HTML Living Standard) en lugar del estándar del W3C. No hay una sola versión de CSS porque desde el CSS 3, está dividido en módulos, y cada módulo está versionado independientemente.

Casi todos los desarrolladores, y mucho menos un desarrollador de front-end, deberían tener al menos un entendimiento básico de HTML y CSS. Un desarrollador de HTML o CSS es raramente una posición autónoma. La mayoría de las veces, es sólo una de las habilidades de un desarrollador de front-end o full-stack o un diseñador gráfico/web.

Las normas no cambian muy a menudo. Sin embargo, las nuevas características llegan regularmente, por lo que los desarrolladores deben mantenerse al día. En los últimos años, ha habido un flujo constante de nuevas características y actualizaciones de CSS. Tanto es así que los desarrolladores del back end pueden no ser conscientes de lo poderosa que se ha vuelto la tecnología.

2.2 Herramientas

Cada navegador interpreta el CSS y el HTML de una manera ligeramente diferente. El desarrollador debe conocer las diferencias entre los diferentes navegadores y su soporte de las diferentes versiones de HTML/CSS. Además, los desarrolladores deben saber qué herramientas pueden utilizar para crear contenido HTML/CSS en todos los navegadores.

Los desarrolladores de frontend que usan marcos de JavaScript suelen trabajar con bibliotecas llenas de componentes listos para usar. Sin embargo, la creación de una aplicación lista para la producción requiere la adaptación del estilo para el diseño del producto. Este tipo de adaptación a menudo requiere un conocimiento avanzado de CSS.

Para facilitar y acelerar las páginas web, los desarrolladores suelen utilizar herramientas adicionales como los marcos de trabajo del front end (es decir, Bootstrap) o el lenguaje de hojas de estilo (es decir, LESS o SCSS).

2.3 Experiencia del usuario (UX)

La UX es un componente vital de desarrollo de la parte delantera. Un competente desarrollador de la parte delantera debe poseer la capacidad de ver páginas web o aplicaciones desde la perspectiva del usuario. Eso significa optimizar el UX holísticamente. Sugerir mejoras en la aplicación, como eliminar los clics innecesarios o mejorar el rendimiento optimizando la velocidad de carga de la página, son dos ejemplos de optimización.

El Diseño Web Receptivo (RWD) es otra importante técnica que los desarrolladores de primera línea deben considerar para UX. Es el enfoque que sugiere que el diseño y el desarrollo deben responder al comportamiento y al entorno del usuario en función del tamaño de la pantalla, la plataforma y la orientación.

Por último, a11y (que es una abreviatura del término "accesibilidad") se está convirtiendo en un movimiento ampliamente debatido en los círculos tecnológicos y en otra importante consideración de UX. No se refiere a una norma, medida o ley específica que tenga que ver con la tecnología, sino más bien a un cambio en la forma en que se construyen los sitios web para dar cuenta de las personas con discapacidades. El proyecto tiene por objeto hacer las páginas web más digeribles, actualizadas y que perdonen a quienes tienen discapacidades, ya sea una discapacidad visual u otra forma de dolencia.

Habilidades de desarrollo de la parte delantera

Fuente: Unsplash - Safar Safarov

3. Evaluar los conocimientos de HTML y CSS de un desarrollador de front-end usando su currículum.

El primer indicio que muchos reclutadores tienen del conocimiento de HTML y CSS de un desarrollador de primera línea es lo que está escrito en el currículum del candidato. Más allá de los conocimientos simples de HTML y CSS (que deberían ser un hecho para cualquier desarrollador de front-end), es vital ver qué tan conocedor y actualizado está el candidato con la pila de tecnología del front-end. A continuación se incluye un glosario de habilidades que hay que tener en cuenta y un resumen de todo lo que el candidato debe saber para ayudarle a entender mejor qué buscar en un desarrollador de front-end.

Glosario de HTML y CSS para reclutadores técnicos3.1 Glosario de HTML y CSS para reclutadores técnicos

Marcos frontales Bootstrap, Foundation, Semantic UI, Pure, UIkit, Bulma
Preprocesadores CSS Sass, LESS, Stylus, CSS-Crush, Myth, Rework, Compass, PostCSS
Marcos HTML5 Esqueleto, HTML KickStart, Montaje, SproutCore, Zebra,
Animaciones Diseño de Web receptivo (RWD)
Accesibilidad A11Y
Convenciones Modificador del elemento de bloqueo
Herramientas Módulos CSS, CSS en JS
Otros/Miscelánea Plantilla de HTML5

3.2 Estándares HTML - tipos de HTML

  • HTML 4 - la versión básica de HTML recomendada por el W3C en 1997
  • XHTML - una extensión de HTML4, sólo una versión más estricta de HTML 4. Incorporó algunas características de XML en HTML.
  • HTML5 - última versión del estándar HTML. El más utilizado.

3.3 Estándares de CSS

  • CSS 2 - Especificación CSS de nivel 2 publicada por el W3C en 1998
  • CSS 2.1 - CSS nivel 2 revisión 1, corregidos los errores en CSS2
  • CSS 3 - divide la especificación en diferentes secciones llamadas módulos, un cambio importante. CSS 3 introdujo muchas nuevas características como nuevos selectores, nuevas propiedades, cambios en el modelo de caja, y mucho más.

3.4 Marcos HTML y CSS

El HTML y el CSS básicos son fáciles de codificar, pero el nivel de complejidad que se encuentra en los sitios web modernos puede llevar mucho tiempo codificarlos directamente. Afortunadamente, los desarrolladores no están obligados a crear todo desde cero. Hay marcos de trabajo disponibles que ofrecen ayuda con componentes listos para usar y proporcionan una forma fácil de personalizar el aspecto de una página.

Los marcos más populares para buscar son:

  • Bootstrap (v4)
  • Fundación (última versión 6)

3.5 Otras áreas de HTML y CSS que tu desarrollador de front-end debe conocer

Como los fundamentos de CSS son bastante fáciles de aprender, hay algunas áreas de CSS que requieren un esfuerzo extra para ser usadas eficientemente por los desarrolladores. Estas incluyen:

  • Modelo CSS Flexbox
  • Grilla CSS
  • Modelo de caja CSS
  • Elementos de diseño con posicionamiento absoluto
  • Elementos de diseño con flotadores
  • Animaciones CSS

Preguntas y respuestas de la entrevista HTML/CSS4. Preguntas y respuestas de la entrevista HTML/CSS

Puedes encontrar estas preguntas y más aquí.

4.1 HTML Preguntas y respuestas de la entrevista

¿Qué es lo que hace un doctor tipo?

El tipo de documento determina a qué versión de HTML se refiere el documento.

¿De qué tipo de cosas hay que tener cuidado cuando se diseña o desarrolla para sitios multilingües?

Las respuestas de los candidatos a esta pregunta deben demostrar si tienen o no experiencia en la construcción de sitios de gran escala de diferentes regiones del mundo. Las respuestas que incluyen los siguientes temas son un buen indicador de un candidato informado: apoyar el Unicode para la codificación, de izquierda a derecha vs. de derecha a izquierda, automatizar la traducción de monedas, fechas y forma plural, y parametrizar las cadenas traducidas

Describa la diferencia entre