Algunos de los profesionales mejores pagados del mundo son los desarrolladores front-end. Ellos usan sus conocimientos y talento para diseñar sitios web atractivos y amigables para el usuario.

Los desarrolladores front-end no necesitan un título de grado para trabajar. Solo deben comprender los conceptos fundamentales del desarrollo front-end, de los lenguajes de programación, y de entornos de desarrollo front-end.

En esta guía, aprenderás a cómo convertirte en un desarrollador front-end, primero entendiendo de qué trata el desarrollo front-end, las habilidades técnicas y blandas que se necesitan, los lenguajes y entornos de programación existentes, y los primeros pasos necesarios para empezar.

En Estados Unidos, un desarrollador front-end puede ganar en promedio USD 86.178 al año, de acuerdo con Glassdoor. De acuerdo con Payscale, un desarollador front-end "típico" puede ganar un ingreso anual de USD 71.350.

Si recién incursionas en el mundo de la tecnología, quizás no sabes qué significa front-end u otros términos del mundo del desarrollo web como back-end y full-stack. Por eso, vamos a empezar explicándolos.

¿Qué es el front-end?

Todos los sitios web que navegamos, los sitios de comercio electrónico de donde compramos productos, los blogs que leemos, y demás sitios son sitios amigables con el usuario y estéticamente agradables realizados por desarrolladores front-end.

Existen dos grandes áreas del desarrollo web que hay que tener en cuenta cuando se diseñan sitios web y aplicaciones web: el front-end y el back-end.

El desarrollo front-end está relacionado con la cara visible por el usuario de cualquier aplicación web. Es lo que el usuario ve y con lo que interactúa al hacer clic sobre un botón, desplazarse por la página, completar un formulario, etc. Esto es la funcionalidad del lado del cliente de una aplicación web.

El back-end se refiere a todos los eventos que ocurren por detrás de escena, como la infraestructura, la conexión y comunicación con la base de datos, etc. Full stack se refiere a la combinación de las áreas de front-end y back-end.

¿Qué es lo que hace un Desarrollador Front-end?

Recién hablábamos de las distintas áreas del desarrollo web: front, back-end y full stack. Así también tenemos distintos desarrolladores, especializados en las distintas áreas del desarrollo web. Por lo que tenemos desarrolladores front-end, desarrolladores back-end y desarrolladores full-stack.

Un desarrollador front-end es un profesional que tiene a su cargo la tarea de crear la interfaz y la experiencia de usuario (UI/UX) con la que los usuarios interactúan para acceder a la aplicación. Son los que resuelven problemas a través de los lenguajes de programación, herramientas, creatividad y la experiencia para crear un sitio web o aplicación que no solo resuelva el problema del usuario y además tiene un buen diseño.

Un desarrollador back-end, como dijimos anteriormente, es responsable por todo lo relacionado con la lógica, la comunicación de la base de datos, entre otras cosas.

Por último, un desarrollador full-stack son los que entienden tanto de desarrollo front-end como de back-end. Esto les permite poder comenzar y terminar un proyecto por sí mismos.

En un ambiente profesional o de empresa, usualmente hay un diseñador UI/UX quién se encarga de diseñar la interfaz y la experiencia del usuario.

Ellos después le pasan el diseño a los desarrolladores front-end y back-end, quienes se encargan en la implementación para que la aplicación diseñada funcione en la web.
El desarrollador front-end va a recrear el diseño al escribir el código en HTML, CSS y JavaScript.

Cómo convertirse en Desarrollador Front-end

Hasta ahora hablamos sobre qué significa front-end y quién es un desarrollador front-end. Ahora, veamos cuáles son los requisitos o habilidades necesarias para poder ser un desarrollador front-end.

Es importante entender que no es necesario saber todo antes de empezar a trabajar como desarrollador front-end, pero hay saberes fundamentales como HTML, CSS, y JavasScript que siempre van a ser esenciales.

1. Aprende HTML, CSS, y JavaScript

Cuando miramos un sitio en la web, las tres cosas más importantes que componen lo que vemos en la web son HTML, CSS, y JavaScript. Estas son las tres cosas que primero tienes que aprender como base para convertirte un desarrollador front-end.

Son las bases de los sitios web y aplicaciones, por lo que debes aprenderlos si quieren dedicarte al desarrollo web. Por suerte, hay muchos recursos en línea disponibles para ayudarte en aprender y practicar.

¿Qué es HTML?

HTML significa, por sus siglas en inglés, Lenguaje de Marcado de HyperTexto. Es el esqueleto de todas las páginas web y aplicaciones. Es el bloque para construir más básico de todos. El HTML se usa para estructurar tu página en elementos como párrafos, secciones, encabezados, barras de navegación, etcétera.

El HTML provee de estructura al contenido que aparece en el sitio web, como imágenes, texto o videos. Una página con solo HTML es muy básica y nada atractiva, por lo que se necesitará usar estilos CSS para hacerla más presentable.

HTML es frecuentemente el primer lenguaje que los desarrolladores aprenden, ya que es esencial para el trabajo de desarrollo web. ¿Quieres aprender más sobre HTML? Puedes empezar con la certificación en Diseño Web Responsive de freeCodeCamp y el nuevo curso completo de HTML de Beau Carnes (en inglés)

¿Qué es CSS?

CSS es la abreviatura, en inglés, para Hojas de Estilo en Cascada, y lo usas para mejorar la apareciencia de una página web con estilos CSS. Estos estilos hacen que tu sitio web sea más atractivo y agradable a la vista para el usuario final.

¿Quieres aprender más sobre CSS? Para empezar, puedas darle un vistazo a la segunda parte de la certificación de Diseño Web Responsive de freeCodeCamp.

¿Qué es JavaScript?

HTML es un lenguaje de marcado, CSS es una hoja de estilo, y después tenemos a JavaScript, el tercer bloque básico de construcción. JavaScript es un lenguaje de programación que te permite hacer tus páginas web más interactivas. Esto puede incluir animaciones, estilos dinámicos, efectos cuando se les hacen clic a los botones, game motion, etcétera.

Si quieres aprender JavaScript, puedes darle un vistazo a la certificación en Algoritmos de Javascript y Estructura de Datos. Puedes complementar tu aprendizaje con este excelente curso introductorio a JavaScript.

2. Práctica con ejercicios de programación

Hay una frase que dice "la práctica hace al maestro". Esto significa que si haces algo con frecuencia, cada vez irás mejorando.

Si quieres convertirte en un desarrollador front-end profesional, tienes que practicar constantemente. Esto te ayudará a aprender los conceptos más profundamente (y no solo lo superficial). Cuanto más practiques, mejor entenderás los conceptos.

3. Mejora tus habilidades

"Aprende constantemente, siempre hay algo más por aprender", decía Steve Jobs. Esto es verdad para todos los aspectos de la vida, incluidos la programación y el desarrollo front-end.

Mientras nuevas tecnologías, herramientas, sintaxis y maneras de resolver problemas sigan apareciendo, siempre es mejor estar al tanto de las nuevas tendencias en tecnología para no quedarnos atrás.

Esto te ayudará a que tus habilidades como desarrollador front-end crezcan. Siempre puedes estar al tanto de todo lo nuevo uniéndote e interactuando con comunidades activas de desarrolladores.
Existen muchas comunidades como la comunidad de desarrolladores de freeCodeCamp y todas las comunidades locales  que existen alrededor nuestro.

4. Aprende la Línea de Comandos y Control de Versiones

Como desarrollador front-end, debes entender como funciona la línea de comandos porque te permite acceder a funciones del sistema operativo a través de una interfaz de texto.
Muchos desarrolladores profesionales prefieren las CLIs (Command Line Interface, por sus siglas en inglés) por su velocidad y rendimiento al instalar librerías y frameworks.

Los desarrolladores front-end también deben estar familiarizados con sistemas de control de versiones como Git, que es el más usado. Al programar, frecuentemente vas a querer hacer seguimiento de los que vas programando y otras informaciones.

El control de versiones lo hace mucho más fácil porque te permite a ti y a tu equipo comunicarte y seguir todos los cambios al código original de manera eficiente.
También te proporciona información sobre quién hizo el cambio y qué cambio hizo.

5. Entendiendo las Interfaces de Programación de Aplicaciones (APIs)

Como desarrollador front-end profesional, tienes que estar familiarizado con las APIs, sobretodo en cómo usarlas. Esto es importante para poder comunicarte con la lógica del back-end y las bases de datos.

Para interactuar con APIs usando JavaScript, mayormente vas a usar la Fetch API de tu navegador o la librería Axios. Este artículo explica cómo usar Fetch API con JavaScript.

6. Aprende cómo funcionan las librerías de JavaScript/CSS

Actualmente, hay muchas librerías de JavaScript, todas ellas apuntan a hacer el desarrollo de un aplicación web más fácil.  Todas son scripts de JavaScript que hacen que el desarrollo de aplicaciones basadas en JavaScript sea más fácil.

Hay muchas librerías como React, Vue, o Angular (tres de las más populares), por lo cual es mejor elegir una y profundizar en su aprendizaje. Puedes darle una mirada al curso de certificación el librerías de desarrollo frontend de freeCodeCamp para aprender más.

También hay algunas librerías de estilo para darle estilo a tus páginas web de manera simple como Bootstrap, Sass/Scss, Tailwind, y otras.

7. Construye tu portfolio online

Construir tu portfolio es un manera fácil de mostrar tu habilidad como desarrollador front-end.

Si recién estás comenzando como desarrollador front-end, no es necesario que cada proyecto que muestres en tu portfolio pertenezca a un cliente. Podes tomar la iniciativa y ser creativo.

Usa nuevas herramientas y librerías para crear algo espectacular. Mientras vayas avanzando en tu carrera, podrás incluir los proyectos en los que vayas trabajando.

También podes darle una mirada los portfolios de otros desarrolladores front-end para inspirarte y ver qué es lo que te gusta o no. Entonces, al saber que es lo que quieres mostrar al mundo, ya puedes crear tu propio sitio web.

Aquí tienes un curso entretenido que te ayudará a construir tu propio portfolio con HTML, CSS y JavaScript- para que puedas practicar esas habilidades de desarrollo web.

Puedes hacer que tus amigos y miembros de la comunidad te den feedback sobre tu sitio para asegurarte de que todo se ve y funciona bien. No debes olvidarte que todas las palabras que uses en tu sitio web deberían ayudarte a conseguir un buen trabajo. No vas a querer que los textos que incluyas sean demasiados largos o aburridos.

Aquí tienes algunos tips que te ayudarán a que tu portfolio desarrollador realmente destaque.

8. Cultiva tus habilidades blandas

Los desarrolladores front-end deben ser comunicadores eficaces, tanto en lo escrito como lo oral, porque interactúan con el equipo técnico y con el cliente.

También deben ser excelentes comunicadores a través de su código, por lo que es crucial que se tomen el tiempo para comentar dentro del código y escribir la documentación apropiada así tanto tu como otros desarrolladores pueden entenderlo, aún cuando haya pasado tiempo.

Los desarrolladores front-end también deben prestar atención a los detalles y ser meticulosos en todos los aspectos relacionados con su trabajo. Tienen que tener un buen ojo y ser capaces de darse cuenta de pequeños errores o inconsistencias que pueden existir al momento de crear una página web.

Y los desarrolladores front-end deben también ser también capaces de seguir aprendiendo durante toda su vida, porque los sitios web siempre están evolucionando y las expectativas en cuanto a accesibilidad y apariencia siempre están cambiando. Los ingenieros front-end deben estar en constante actualización, ya que seguramente necesitarán aprender nuevos lenguajes de programación o librerías, a lo largo del tiempo.  

9. Empieza a postularte a las pasantías o puestos de trabajo que quieras

Una vez que tengas el conocimiento de frontend necesario a través del aprendizaje de las habilidades necesarios y de la creación de un curriculum vitae simple, puedes empezar a buscar ofertas de trabajo relacionadas con el front-end.

Chequea los requisitos de las ofertas para ver en que otras áreas necesitas mejorar como desarrollador front-end.

Finalmente, siempre postúlate a trabajos y nunca tengas miedo de hacerlo. Esto te dará experiencia para ayudarte a comprender cómo son los procesos de contratación de las empresas y qué es lo que se necesita para ser contratados.

Conclusión

En este artículo, hemos aprendido qué es un desarrollador front-end y qué es lo que se necesita para convertirse en uno.

También hemos aprendido que convertirse en un desarrollador front-end sin título no solo es posible, sino que hasta alcanzable.

Una pregunta final que las personas se hacen mucho es cuánto se tarda para convertirse en desarrollador front-end. Bueno, el tiempo depende totalmente de tu ritmo de aprendizaje y conocimientos previos que tengas.

Solo recuerda que no debes compararte a ti o tu ritmo de aprendizaje con el de otros mientras estás aprendiendo. Resérvate un momento cada semana o día para aprender, apégate a ese hábito lo mejor que puedas y luego disfruta.

En 2017, pasé por algunas entrevistas de programación y recibí ofertas de varias grandes empresas tecnológicas. Entonces, en ese momento, decidí compartir lo que había aprendido en este artículo.

Y es que lo acabo de actualizar para 2022, por lo que será relativamente útil y relevante si estás buscando trabajo ahora.

A pesar de obtener calificaciones decentes tanto en mi clase de Algoritmos CS101 como en mi clase de Estructuras de Datos en la universidad, me estremezco al pensar en pasar por una entrevista de programación que se enfoca en algoritmos.

Por lo tanto, pasé los últimos tres meses averiguando cómo mejorar mis habilidades de programación de entrevistas y finalmente recibí ofertas de grandes compañías tecnológicas como Google, Facebook, Airbnb, Lyft, Dropbox y más.

En esta publicación, compartiré las ideas y los consejos que obtuve en el camino. Los candidatos experimentados también pueden esperar preguntas sobre el diseño de sistemas, pero eso está fuera del alcance de esta publicación.

Muchos de los conceptos algorítmicos probados en entrevistas de programación no son los que uso habitualmente en el trabajo, donde soy Ingeniero Front End (web). Naturalmente, me he olvidado un poco de estos algoritmos y estructuras de datos, que aprendí principalmente durante mi primer y segundo año de universidad.

Es estresante tener que producir código (de trabajo) en una entrevista, mientras alguien examina cada pulsación de tecla que haces. Lo que es peor es que, como entrevistado, se te anima a comunicar su proceso de pensamiento en voz alta al entrevistador.

Solía pensar que ser capaz de pensar, programar y comunicarse simultáneamente era una hazaña imposible, hasta que me di cuenta de que la mayoría de las personas simplemente no son buenas programando en entrevistas cuando recién comienzan. La entrevista es una habilidad en la que puedes mejorar estudiando, preparándose y practicando.

Mi reciente búsqueda de trabajo me ha llevado a un viaje para mejorar mis habilidades de programación en las entrevistas. A los ingenieros front-end les gusta despotricar sobre cómo se rompe el proceso de contratación actual porque las entrevistas técnicas pueden incluir habilidades que no están relacionadas con el desarrollo front-end.

Por ejemplo, escribir un algoritmo de resolución de laberintos y fusionar dos listas ordenadas de números. Como ingeniero front-end, puedo empatizar con ellos.

El front-end es un dominio especializado en el que los ingenieros tienen que preocuparse por muchos problemas relacionados con la compatibilidad de los navegadores, el modelo de objetos del documento, el rendimiento de JavaScript, los diseños de CSS, etc.

Es poco común que los ingenieros front-end implementen algunos de los complejos algoritmos probados en las entrevistas.

En empresas como Facebook y Google, las personas son ingenieros de software en primer lugar y, en segundo lugar, expertos en dominios.

Lamentablemente, las reglas las establecen las empresas, no los candidatos. Hay un gran énfasis en conceptos generales de informática como algoritmos, patrones de diseño, estructuras de datos. Habilidades básicas que debe poseer un buen ingeniero de software. Si deseas el trabajo, debes seguir las reglas establecidas por los maestros del juego: ¡Mejorar tus habilidades de entrevista de programación!

Este post está estructurado en las siguientes dos secciones. Siéntete libre de pasar directamente a la sección que te interese.

• El desglose de las entrevistas de programación y cómo prepararse para ellas.
• Sugerencias y sugerencias útiles para cada tema de algoritmo (matrices, árboles, programación dinámica, etc.), junto con preguntas de práctica recomendadas de LeetCode para revisar los conceptos básicos y mejorar esos temas.

El contenido de esta publicación se puede encontrar aquí. Haré actualizaciones allí cuando sea necesario.

Si estás interesado en el contenido de Front End, consulta mi manual de entrevistas de front end aquí.

Elige un lenguaje de programación

Antes que nada, debe elegir un lenguaje de programación para su entrevista de programación algorítmica.

La mayoría de las empresas te permitirán programar en el lenguaje de tu elección. La única excepción que conozco es Google. Permiten que sus candidatos elijan solo Java, C++, Python, Go o JavaScript.

En su mayor parte, recomiendo utilizar un lenguaje con el que esté muy familiarizado, en lugar de uno que sea nuevo para usted pero que la empresa utilice ampliamente.

Hay algunos lenguajes que son más adecuados que otros para codificar entrevistas. Luego hay algunos que absolutamente querrás evitar.

Según mi experiencia como entrevistador, la mayoría de los candidatos eligen Python o Java. Otros lenguajes comúnmente seleccionados incluyen JavaScript, Ruby y C++. Absolutamente, evitaría los lenguajes de nivel inferior como C o Go, simplemente porque carecen de estructuras de datos y funciones de biblioteca estándar.

Personalmente, Python es mi elección de facto para codificar algoritmos durante las entrevistas. Es sucinto y tiene una enorme biblioteca de funciones y estructuras de datos.

Una de las principales razones por las que recomiendo Python es que utiliza API consistentes que operan en diferentes estructuras de datos, como len(), for ... in ... y notación de corte en secuencias (cadenas, listas y tuplas). Obtener el último elemento en una secuencia es arr[-1] , e invertirlo es simplemente arr[::-1]. Puede lograr mucho con una sintaxis mínima en Python.

Java también es una opción decente. Pero debido a que tendrás que declarar constantemente tipos en su código, significa ingresar pulsaciones de teclas adicionales. Esto ralentizará la velocidad a la que codifica y escribe. Este problema será más evidente cuando tengas que escribir en una pizarra durante las entrevistas en el sitio.

Las razones para elegir o no C++ son similares a Java. En última instancia, Python, Java y C++ son opciones decentes. Si has estado usando Java por un tiempo y no tienes tiempo para familiarizarse con otro lenguaje, te recomiendo que te ciña a Java en lugar de retomar Python desde cero.

Esto te ayuda a evitar tener que usar un lenguaje para el trabajo y otro para las entrevistas. La mayoría de las veces, el cuello de botella está en el pensamiento y no en la escritura.

Una excepción a la convención de permitir que el candidato "escoja cualquier lenguaje de programación que desee" es cuando la entrevista es para un puesto de dominio específico, como roles de ingeniero front-end, iOS o Android. Debes estar familiarizado con los algoritmos en JavaScript, Objective-C, Swift y Java, respectivamente.

Si necesitas usar una estructura de datos que el lenguaje no admite, como una cola o un montón en JavaScript, pregúntale al entrevistador si puede suponer que tiene una estructura de datos que implementa ciertos métodos con complejidades de tiempo específicas.

Si la implementación de esa estructura de datos no es crucial para resolver el problema, el entrevistador generalmente lo permitirá.

En realidad, ser consciente de las estructuras de datos existentes y seleccionar las adecuadas para abordar el problema en cuestión es más importante que conocer los intrincados detalles de implementación.

Revisa introducción a las ciencias de la computación

Si has estado fuera de la universidad durante algún tiempo, es muy recomendable que revises los fundamentos de CS. Prefiero repasarlo mientras practico. Escaneo mis notas de la universidad y reviso los diversos algoritmos mientras trabajo en los problemas de algoritmos de LeetCode y Cracking the Coding Interview.

Si tienes interés en cómo se implementan las estructuras de datos, consulta Lago, un repositorio de GitHub que contiene ejemplos de estructuras de datos y algoritmos en JavaScript.

GitHub - yangshun/lago: ? Data Structures and Algorithms library in TypeScript

? Data Structures and Algorithms library in TypeScript - GitHub - yangshun/lago: ? Data Structures and Algorithms library in TypeScript

GitHubyangshun

La maestría deviene de la práctica

Luego, adquiere familiaridad y dominio de los algoritmos y las estructuras de datos en el lenguaje de programación elegido.

Practica y resuelve preguntas de algoritmos en el lenguaje que elijas. Si bien Cracking the Coding Interview es un buen recurso, prefiero resolver problemas escribiendo código, dejándolo funcionar y recibiendo comentarios instantáneos.

Existen diversos recursos online como LeetCode, HackerRank, y CodeForces con los que puedes practicar ejercicios a la vez que te acostumbras al lenguaje.

Según mi experiencia, las preguntas de LeetCode son muy similares a las preguntas que se hacen en las entrevistas.

Las preguntas de HackerRank y CodeForces son más similares a las preguntas de la programación competitiva. Si practicas suficientes preguntas de LeetCode, es muy probable que veas o completes una de las preguntas de su entrevista real (o alguna variante de la misma).
Aprender y llegar a comprender las complejidades de tiempo y espacio de las operaciones comunes en el lenguaje elegido. Para Python, esta página será útil. Además, aprende sobre el algoritmo de clasificación subyacente que se usa en la función sort() del lenguaje y sus complejidades de tiempo y espacio (en Python es Timsort, que es un híbrido).
Después de completar una pregunta sobre LeetCode, generalmente agrego las complejidades de tiempo y espacio del código escrito como comentarios sobre el cuerpo de la función.

En lo personal utilizo los comentarios para recordarme comunicar el análisis del algoritmo después de haber completado la implementación.
Lee sobre el estilo de programación recomendado para tu lenguaje y apégate a él. Si eliges Python, consulta la Guía de estil. Si eliges Java, consulta la Guía de estilo de Java de Google.
Aprende y acostúmbrate a las trampas y advertencias comunes del lenguaje. Si las señalas durante la entrevista y evitas caer en ellos, ganarás puntos de bonificación e impresionarás al entrevistador, independientemente de si el entrevistador está familiarizado con el lenguaje o no.
Obtén una amplia exposición a las preguntas de varios temas. En la segunda mitad del artículo, menciono temas de algoritmos y las preguntas útiles para practicar cada tema. Hacer alrededor de 100 a 200 preguntas de LeetCode debería considerarse como algo bueno.

Si prefieres cursos donde el aprendizaje está más estructurado, aquí hay algunas recomendaciones. De ninguna manera es obligatorio tomar cursos en línea para aprobar las entrevistas.

• AlgoMonster :Tiene como objetivo ayudarlo a superar la entrevista técnica en el menor tiempo posible. Diseñado por los ingenieros de Google, AlgoMonster utiliza un enfoque basado en datos para enseñarte los patrones de preguntas clave más útiles y tiene contenido para ayudarte a revisar rápidamente las estructuras de datos y los algoritmos básicos. Lo mejor de todo es que AlgoMonster no está basado en suscripción: paguas una tarifa única y obtienes acceso de por vida.
• Grokking the Coding Interview: Patterns for Coding Questions: por Educative amplía las preguntas de práctica recomendadas en este artículo, pero aborda la práctica desde una perspectiva de patrón de preguntas. Este es un enfoque con el que también estoy de acuerdo para aprender y que he usado personalmente para mejorar en las entrevistas de programación. El curso te permite practicar preguntas seleccionadas en Java, Python, C++, JavaScript y también proporciona soluciones de muestra en esos lenguajes. Aprende y entiende los patrones, no memorices las respuestas.
  Y por supuesto, práctica, práctica y más práctica!

Fases de una entrevesta de programación

¡Felicitaciones, estás listo para poner en práctica tus habilidades! En una entrevista de programación, el entrevistador te hará una pregunta técnica. Escribirás el código en un editor colaborativo en tiempo real (pantalla del teléfono) o en una pizarra (whiteboard), y tendrás de 30 a 45 minutos para resolver el problema.

¡Aquí es donde comienza la verdadera diversión!
Tu entrevistador buscará que cumplas con los requisitos del puesto. Depende de ti demostrarles que tienes las habilidades. Inicialmente, puede parecer extraño hablar mientras programan, ya que la mayoría de los programadores no tienen la costumbre de explicar en voz alta sus pensamientos mientras escriben el código.
Sin embargo, es difícil para el entrevistador saber lo que estás pensando con solo mirar tu código.

Si comunicas tu enfoque al entrevistador incluso antes de comenzar a codificar, puedes validar tu enfoque con ellos. De esta manera, los dos pueden ponerse de acuerdo sobre un enfoque aceptable.

Preparándote para una entrevista remota

Para pantallas telefónicas y entrevistas remotas, ten papel y bolígrafo o lápiz para anotar notas o diagramas. Si te hacen una pregunta sobre árboles y gráficos, generalmente ayuda si dibuja ejemplos de la estructura de datos.

Usa auriculares. Asegúrate de estar en un ambiente tranquilo. No querrás tener un teléfono en una mano y escribir con la otra. Trate de evitar el uso de altavoces. Si la retroalimentación es mala, la comunicación se hace más difícil. Tener que repetirse solo resultará en la pérdida de un tiempo valioso.

¿Qué hacer cuando tengas la pregunta?

Muchos candidatos comienzan a programar tan pronto como escuchan la pregunta. Eso suele ser un gran error. Primero, tómate un momento y repita la pregunta al entrevistador para asegurarse de que comprendes la pregunta.

Si no entiendes la pregunta, entonces el entrevistador puede aclararla.
Siempre busca una aclaración sobre la pregunta al escucharla, incluso si crees que está clara. Es posible que descubras que te has perdido de algo. De esta forma también le muestras al entrevistador que estás atento a los detalles.

Considera hacer las siguientes preguntas.

• ¿Cuál es el tamaño del input?
• ¿Cuál es el tamaño del rango de valores?
• ¿Qué tipo de valores hay? ¿Hay números negativos? ¿Puntos flotantes? ¿Habrá entradas vacías?
• ¿Hay duplicados en el input?
• ¿Cuáles son algunos casos extremos que aplican para el input?
• ¿Cómo se almacena el input ? Si me dan un diccionario de palabras... ¿Es una lista de cadenas o un trie?

Después de haber aclarado suficientemente el alcance y la intención del problema, explica tu enfoque de alto nivel al entrevistador, incluso si es una solución ingenua. Si estás atascado, considera varios enfoques y explica en voz alta por qué puede o no funcionar. A veces, tu entrevistador puede dar pistas y guiarte hacia el camino correcto.
Comienza con un enfoque algo directo; comunica al entrevistador. Explica las complejidades de tiempo y espacio y aclara por qué es malo. En este punto, el entrevistador generalmente mostrará el temido "¿Podemos hacerlo mejor?" pregunta.

Esto significa que están buscando un enfoque más óptimo.
Esta suele ser la parte más difícil de la entrevista. En general, busca trabajos repetidos e intenta optimizarlos almacenando potencialmente en caché el resultado calculado en alguna parte.

Consúltalo más tarde, en lugar de calcularlo todo de nuevo. Proporciono aquí algunos consejos sobre cómo abordar preguntas específicas del tema en detalle a continuación.
Solo comienza a programar después de que tú y tu entrevistador hayan acordado un enfoque y le hayan dado luz verde.

Comenzando a programar

Usa un buen estilo para escribir tu código. Leer código escrito por otros no suele ser una tarea agradable. Leer código con un formato horrible escrito por otros es aún peor. Tu objetivo es hacer que su entrevistador entienda tu código para que pueda evaluar rápidamente si tu código hace lo que se supone que debe hacer y si resuelve un problema determinado.
Utiliza nombres de variables claros y evita nombres que sean letras sueltas, a menos que sean para iteración. Sin embargo, si estás programando en whiteboard, evita usar nombres de variables detallados. Esto reduce la cantidad de escritura que tendrás que hacer.
Siempre explica al entrevistador lo que estás escribiendo. No se trata de leer, palabra por palabra, al entrevistador el código que estás produciendo. Habla sobre la sección del código que estás implementando actualmente en un nivel superior. Explica por qué está escrito así y qué estás tratando de lograr.
Cuando copies y pegues el código, considera si es necesario. A veces lo es, a veces no lo es.

Si te encuentras copiando y pegando una gran cantidad de código que abarca varias líneas, probablemente sea un indicador de que puedas reestructurar el código extrayendo esas líneas en una función. Si se trata de una sola línea que copiaste, por lo general está bien.
Sin embargo, recuerda cambiar las variables respectivas en tu línea de código copiada cuando sea relevante. Los errores de copiado y pegado son una fuente común de errores, ¡Incluso en la programación diaria!

Después de programar

Una vez que hayas terminado de codificar, no anuncies inmediatamente al entrevistador que has terminado. En la mayoría de los casos, tu código no suele ser perfecto. Puede contener bugs o errores de sintaxis. Lo que tienes que hacer es revisar tu código.
Primero, revisa tu código de principio a fin. Míralo como si lo hubiera escrito otra persona, lo estás viendo por primera vez y tratando de detectar errores en él. Eso es exactamente lo que hará tu entrevistador. Revisa y arregla cualquier problema que puedas encontrar.
A continuación, propón casos de prueba pequeños y avance a través del código (no tu algoritmo) con esas entradas de muestra.
A los entrevistadores les gusta cuando les lees la mente. Lo que suelen hacer después de que hayas terminado de codificar es pedirte que escribas pruebas. Es una gran ventaja si escribes pruebas para su código incluso antes de que te soliciten que lo haga. Deberías estar emulando un depurador al recorrer su código. Anota o diles los valores de ciertas variables mientras guía al entrevistador a través de las líneas de código.

Si hay grandes fragmentos de código duplicados en su solución, reestructura el código para mostrarle al entrevistador que valoras la progamación de calidad. Además, busca lugares donde pueda hacer una evaluación de cortocircuito.

Por último, menciona las complejidades de tiempo y espacio de su código y explicas por qué es así. Puedes anotar fragmentos de su código con sus diversas complejidades de tiempo y espacio para demostrar su comprensión del código. Incluso puedes proporcionar las API de su lenguaje de programación elegido. Explica cualquier compensación entre tu enfoque actual y los enfoques alternativos, posiblemente en términos de tiempo y espacio.
Si tu entrevistador está satisfecho con la solución, la entrevista generalmente termina aquí.

También es común que el entrevistador te haga preguntas de extensión, como cómo manejarías el problema si toda la entrada es demasiado grande para caber en la memoria, o si la entrada llega como un flujo. Esta es una pregunta de seguimiento común en Google, donde se preocupan mucho por la escala.
La respuesta suele ser un enfoque de divide y vencerás: realiza un procesamiento distribuido de los datos y solo lee ciertos fragmentos de la entrada del disco en la memoria, escribe la salida nuevamente en el disco y combínalos más tarde.

Practica con entrevistas simuladas

Los pasos mencionados anteriormente se pueden ensayar una y otra vez hasta que los hayas internalizado por completo y se conviertan en una segunda naturaleza para ti. Una buena manera de practicar es asociarse con un amigo y turnarse para entrevistarse.
Un gran recurso para prepararse para entrevistas de codificación es interviewing.io. Esta plataforma ofrece entrevistas de práctica gratuitas y anónimas con ingenieros de Google y Facebook, que pueden conducir a trabajos y pasantías reales.
En virtud de ser anónimo durante la entrevista, el proceso de entrevista inclusiva es imparcial y de bajo riesgo. Al final de la entrevista, tanto el entrevistador como el entrevistado pueden retroalimentarse mutuamente con el fin de ayudarse mutuamente a mejorar.
Hacer bien las entrevistas simuladas desbloqueará la página de trabajos para los candidatos y les permitirá reservar entrevistas (también de forma anónima) con las principales empresas como Uber, Lyft, Quora, Asana y más.

Para aquellos que son nuevos en las entrevistas de codificación, se puede ver una entrevista de demostración en este sitio. Ten en cuenta que este sitio requiere que los usuarios inicien sesión.
He usado interviewing.io, tanto como entrevistador como como entrevistado. La experiencia fue genial. A Aline Lerner, directora ejecutiva y cofundadora de entrevistas.io, y a su equipo les apasiona revolucionar el proceso de codificación de entrevistas y ayudar a los candidatos a mejorar sus habilidades de entrevista.
También ha publicado una serie de artículos relacionados con entrevistas de codificación en el blog interviewing.io. Recomiendo registrarse lo antes posible en interviewing.io, aunque esté en versión beta, para aumentar la probabilidad de recibir una invitación.

Otra plataforma útil para las entrevistas es Pramp. Mientras que Interviewing.io conecta a los posibles buscadores de empleo con entrevistadores de codificación experimentados, Pramp adopta un enfoque diferente. Pramp te empareja con otro compañero que también busca trabajo. Los dos se turnan para asumir los roles de entrevistador y entrevistado. Pramp también prepara preguntas y brinda soluciones e indicaciones para guiar al entrevistado.

Avanza y conquista

Después de hacer una buena cantidad de preguntas en LeetCode y tener suficiente práctica haciendo entrevistas simuladas, continúe y ponga a prueba sus nuevas habilidades de entrevista.
Postula a tus empresas favoritas o, mejor aún, obtén referencias de tus amigos que trabajan para esas empresas. Las referencias tienden a notarse antes y tienen una tasa de respuesta más rápida que la solicitud sin una referencia. ¡Buena suerte!

Consejos prácticos para resolver preguntas de programación

Esta sección profundiza en consejos prácticos para temas específicos de algoritmos y estructuras de datos, que aparecen con frecuencia en las preguntas de codificación. Muchas preguntas de algoritmos involucran técnicas que se pueden aplicar a preguntas de naturaleza similar.
Cuantas más técnicas tengas en tu arsenal, mayores serán tus posibilidades de pasar la entrevista. Para cada tema, también hay una lista de preguntas recomendadas, que es valiosa para dominar los conceptos básicos. Algunas de las preguntas solo están disponibles con una suscripción paga a LeetCode, que en mi opinión vale la pena si te consigue un trabajo.

Consejos generales

Siempre valida la entrada primero. Verifica las entradas que no son válidas, están vacías, son negativas o diferentes. Nunca asumas que te dan los parámetros válidos.

Alternativamente, aclara con el entrevistador si puedes asumir una entrada válida (generalmente sí), lo que puede ahorrarte tiempo al escribir código que valida la entrada.
¿Hay algún requisito o restricción de complejidad de tiempo y espacio?
Comprueba si hay errores de apagado por uno.

En lenguajes donde no hay coerción automática de tipos, comprobar que la concatenación de valores sea del mismo tipo: int,str, y list.

Después de terminar tu código, use algunas entradas de ejemplo para probar su solución.
¿Se supone que el algoritmo debe ejecutarse varias veces, quizás en un servidor web? En caso afirmativo, es probable que la entrada se pueda procesar previamente para mejorar la eficiencia en cada llamada a la API.

Usa una combinación de paradigmas de programación funcional e imperativa:

• Escribe funciones puras tan a menudo como sea posible.
• Usa funciones puras porque es más fácil razonar con ellas y pueden ayudar a reducir errores en su implementación.
• Evita mutar los parámetros pasados a su función, especialmente si se pasan por referencia, a menos que esté seguro de lo que está haciendo.
• Logra un equilibrio entre precisión y eficiencia. Usa la cantidad correcta de código funcional e imperativo cuando corresponda. La programación funcional suele ser costosa en términos de complejidad espacial debido a la no mutación y la asignación repetida de nuevos objetos. Por otro lado, el código imperativo es más rápido porque opera en objetos existentes.
• Evita confiar en la mutación de variables globales. Las variables globales introducen el estado.
• Asegúrate de no mutar accidentalmente las variables globales, especialmente si tienes que depender de ellas.

Generalmente, para mejorar la velocidad de un programa, podemos optar por usar una estructura de datos o algoritmo apropiado, o usar más memoria. Es un intercambio clásico de espacio y tiempo.
Las estructuras de datos son sus armas. Elegir el arma adecuada para la batalla adecuada es la clave de la victoria. Conozca las fortalezas de cada estructura de datos y la complejidad del tiempo para sus diversas operaciones.
Las estructuras de datos se pueden aumentar para lograr una complejidad de tiempo eficiente en diferentes operaciones. Por ejemplo, un HashMap se puede usar junto con una lista doblemente enlazada para lograr una complejidad de tiempo O(1) para la operación  get and put  en una memoria caché LRU.

HashMaps es probablemente la estructura de datos más utilizada para preguntas de algoritmos. Si estás atascado en una pregunta, su último recurso puede ser enumerar las posibles estructuras de datos (afortunadamente no hay tantas) y considerar si cada una de ellas se puede aplicar al problema. Esto ha funcionado para mí a veces.
Si estás tomando atajos en tu código, díselo en voz alta a tu entrevistador y explícale lo que harías fuera de un entorno de entrevista (sin limitaciones de tiempo). Por ejemplo, explica que escribirías una expresión regular para analizar una cadena en lugar de usar split , que no cubre todos los casos.

Secuencia

Notas

Las matrices y las cadenas se consideran secuencias (una cadena es una secuencia de caracteres). Hay consejos para tratar con matrices y cadenas, que se tratarán aquí.
¿Hay valores duplicados en la secuencia? ¿Afectarían la respuesta?
Comprueba si hay una secuencia fuera de los límites.
Ten cuidado con dividir o concatenar secuencias en tu código. Por lo general, las secuencias de corte y concatenación requieren tiempo O(n). Utiliza índices de inicio y finalización para delimitar un subarreglo o una subcadena siempre que sea posible.
A veces se atraviesa la secuencia desde el lado derecho en lugar de desde el izquierdo.

Domina la técnica de sliding window ya que se aplica a muchos problemas de subcadenas o subarreglos.

Cuando se le dan dos secuencias para procesar, es común tener un índice por secuencia para recorrer. Por ejemplo, usamos el mismo enfoque para fusionar dos matrices ordenadas.

Casos comunes

• Secuencia vacía
• Secuencia con 1 o 2 elementos
• Secuencia con elementos repetidos

Arreglos

Notas

¿La matriz está ordenada o parcialmente ordenada? Si es así, alguna forma de búsqueda binaria debería ser posible. Esto generalmente significa que el entrevistador está buscando una solución que sea más rápida que O(n).
¿Puedes ordenar la matriz? A veces, ordenar la matriz primero puede simplificar significativamente el problema. Asegúrate de que no sea necesario conservar el orden de los elementos de la matriz antes de intentar ordenarlos.
Para las preguntas en las que se trata de la suma o la multiplicación de un subarreglo, puede ser útil el cálculo previo mediante hashing o un prefijo, una suma de sufijos o un producto.
Si te dan una secuencia y el entrevistador te pide espacio O(1), podría ser posible usar la matriz en sí como una tabla hash. Por ejemplo, si la matriz tiene valores solo de 1 a N, donde N es la longitud de la matriz, niega el valor en ese índice (menos uno) para indicar la presencia de ese número.

Practice Questions

• Dos Sumas
• Mejor tiempo para comprar y vender existencias
• Contenido duplicado
• Producto del arreglo con excepción de Self
• Máximo subarreglo
• Máximo producto del subarreglo
• Encuentra el mínimo en una matriz traspuesta ordenada
• SearchBusca en un arreglo traspuesto ordenado
• 3Sum
• Contenedor con mayor cantidad de agua

Binario

Links de estudio

• Bits, Bytes, construyendo con los binarios

Notas

A veces se hacen preguntas que involucran representaciones binarias y operaciones bit a bit. Debes saber cómo convertir un número de forma decimal a forma binaria, y viceversa, en el lenguaje de programación elegido.
Algunos fragmentos útiles de utilidad:

• Probar que kth es: num & (1 << k) != 0
• Conjunto kth bit es: num |= (1 << k)
• Turn off kth bit: num &= ~(1 << k)
• Alternar el k-ésimo bit: num ^= (1 << k)
• Para comprobar si un número es una potencia de 2: num & num - 1 == 0.

Casos comunes

• Comprueba si hay desbordamiento/subdesbordamiento
• Números negativos

Preguntas de prácticas

• Suma de dos enteros
• Número de 1 Bits
• Contador de Bits
• Número faltante
• Reverso de Bits

Programación Dinámica

Links de estudio

• Desmistificando la Programación Dinámica

Notas

La Programación Dinámica (DP) se usa generalmente para resolver problemas de optimización. Alaina Kafkes ha escrito una publicación increíble sobre cómo abordar los problemas de DP. Deberías leerlo.
La única forma de mejorar en DP es con práctica. Se necesita mucha práctica para reconocer que un problema puede ser resuelto por DP.
Para optimizar el espacio, a veces no es necesario almacenar toda la tabla DP en la memoria. Los dos últimos valores o las dos últimas filas de la matriz serán suficientes.

Practice Questions

• 0/1 Knapsack
• Subiendo escaleras
• Cambio de moneda
• Subsecuencia creciente más larga
• Subsecuencia común más larga
• Problema de salto de palabra
• Suma de combinación
• House Robber y House Robber II
• Formas de decodificar
• Caminos únicos
• Jump Game

Geometría

Notas

Al comparar la distancia euclidiana entre dos pares de puntos, es suficiente usar dx² + dy². No es necesario sacar la raíz cuadrada del valor.
Para saber si dos círculos se superponen, verifica que la distancia entre los dos centros de los círculos sea menor que la suma de sus radios.

Grafos

Links de estudio

• De la teoría a la práctica: Representando grafos Theory To Practice: Representing Graphs
• Profundiza a través de un grafo: DFS Traversal
• Explicando un grafo: BFS Traversal

Notas

Estar familiarizado con las diversas representaciones gráficas y algoritmos de búsqueda de gráficos, y con sus complejidades de tiempo y espacio.
Se le puede dar una lista de bordes y se le puede asignar la tarea de construir su propio gráfico a partir de los bordes para realizar un recorrido. Las representaciones gráficas comunes son

• Matriz de adyacencia
• Lista de adyacencia
• HashMap de HashMaps

Algunas entradas parecen árboles, pero en realidad son grafos. Aclara esto con tu entrevistador. En ese caso, deberá manejar los ciclos y mantener un conjunto de nodos visitados al atravesar.

Algoritmos de búsqueda de grafos

• Común: Primera Búsqueda en Amplitud (BFS), Primera búsqueda en profundidad (DFS)
• Poco común: clasificación topológica, algoritmo de Dijkstra
  Raro: algoritmo de Bellman-Ford, algoritmo de Floyd-Warshall, algoritmo de Prim y algoritmo de Kruskal

En las entrevistas de codificación, los grafos se representan comúnmente como matrices 2-D, donde las celdas son los nodos y cada celda puede atravesar a sus celdas adyacentes (arriba, abajo, izquierda y derecha). Por lo tanto, es importante estar familiarizado con atravesar una matriz 2-D.
Cuando atravieses recursivamente la matriz, siempre asegúrate de que su próxima posición esté dentro de los límites de la matriz. Puedes encontrar más consejos para hacer DFS en una matriz aquí. Una plantilla simple para hacer DFS en una matriz aparece así:

def traverse(matrix):
  rows, cols = len(matrix), len(matrix[0])
  visited = set()
  directions = ((0, 1), (0, -1), (1, 0), (-1, 0))
  def dfs(i, j):
    if (i, j) in visited:
      return
    visited.add((i, j))
    # Traverse neighbors
    for direction in directions:
      next_i, next_j = i + direction[0], j + direction[1]
      if 0 <= next_i < rows and 0 <= next_j < cols: # Check boundary
        # Add any other checking here ^
        dfs(next_i, next_j)
  for i in range(rows):
    for j in range(cols):
      dfs(i, j)

Casos comunes

• Grafo vacío
• Grafo con uno o dos nodos
• Grafo disjuntas
• Grafo con ciclos

Preguntas de práctica

• Gráfica de clón
• Horario de clases
• Diccionario Alien
• Flujo de agua del Pacífico-Atlántico
• Número de islas
• Grafo de árbol válido
• Número de componentes conectados en un grafo no dirigido
• Secuencia consecutiva más larga Consecutive

Intervalo

Notas

Las preguntas de intervalo son preguntas que dan una matriz de matrices de dos elementos (un intervalo). Los dos valores representan un valor inicial y final. Las preguntas de intervalo se consideran parte de la familia de matrices, pero involucran algunas técnicas comunes. Por lo tanto, tienen su propia sección especial.

Un ejemplo de un arreglo con intervalo es el siguiente: [[1, 2], [4, 7]].

Las preguntas de intervalo pueden ser complicadas para aquellos que no tienen experiencia con ellas. Esto se debe a la gran cantidad de casos a considerar cuando las matrices de intervalos se superponen.

Aclara con el entrevistador si [1, 2] y [2, 3] se consideran intervalos superpuestos, porque afecta cómo escribirá sus comprobaciones de igualdad.

Una rutina común para las preguntas de intervalo es ordenar la matriz de intervalos por el valor inicial de cada intervalo.
Tienes que familiarizarte con la escritura de código para verificar si dos intervalos se superponen y fusionar dos intervalos superpuestos:

def is_overlap(a, b):
  return a[0] < b[1] and b[0] < a[1]
  
def merge_overlapping_intervals(a, b):
  return [min(a[0], b[0]), max(a[1], b[1])]

Casos comunes

• Intervalo único
• Intervalos no superpuestos
• Un intervalo totalmente consumido dentro de otro intervalo
• Intervalos duplicados

Practice Questions

• Inserta un Intervalo
• Une intervalos
• Meeting Rooms and Meeting Rooms II
• Intervalos no superpuestos

Lista enlazada

Notas

Al igual que las matrices, las listas enlazadas se utilizan para representar datos secuenciales. El beneficio de las listas enlazadas es que la inserción y eliminación de código desde cualquier lugar de la lista es O(1), mientras que en las matrices, los elementos deben cambiarse.
Agregar un nodo ficticio en la cabeza o en la cola podría ayudar a manejar muchos casos extremos en los que las operaciones deben realizarse en la cabeza o en la cola. La presencia de nodos ficticios asegura que las operaciones nunca se ejecutarán en la cabeza o la cola. Los nodos ficticios eliminan el dolor de cabeza de escribir comprobaciones condicionales para tratar con punteros nulos. Asegúrate de quitarlos al final de la operación.
A veces, el problema de las listas enlazadas se puede resolver sin almacenamiento adicional. Trata de tomar prestadas ideas del problema de listas enlazadas inversas.
Para la eliminación en listas vinculadas, puedes modificar los valores de los nodos o cambiar los punteros de los nodos. Es posible que debas mantener una referencia al elemento anterior.
Para particionar listas vinculadas, crea dos listas vinculadas separadas y vuelve a unirlas.
Los problemas de listas enlazadas comparten similitudes con los problemas de matrices. Piensa en cómo resolvería un problema de matriz y aplíquelo a una lista enlazada.

Los enfoques de dos punteros también son comunes para las listas enlazadas:

• Obtener el kth del último nodo: tienes dos punteros, donde uno está k nodos delante del otro. Cuando el nodo de delante llega al final, el otro nodo está k nodos detrás.
• Ciclos de detección: tienes dos punteros, donde un puntero aumenta el doble que el otro. Si los dos punteros se encuentran, significa que hay un ciclo.
• Obtener el nodo medio: tienes dos punteros. Un puntero se incrementa el doble que el otro. Cuando el nodo más rápido llegue al final de la lista, el nodo más lento estará en el medio.

Es bueno acostumbrarse a las siguientes rutinas porque muchas preguntas de listas enlazadas utilizan una o más de estas rutinas en su solución.

• Contar el número de nodos en la lista enlazada
• Invertir una lista enlazada en su lugar
• Encuentra el nodo medio de la lista enlazada usando punteros rápidos o lentos
• Combinar dos listas juntas

Casos comunes

• Nodo único
• Dos nodos
• La lista enlazada tiene un ciclo. Aclare con el entrevistador si puede haber un ciclo en la lista. Por lo general, la respuesta es no.

Preguntas de práctica

• Revierte una lista enlazada
• Detecta un ciclo en una lista enlazada
• Une dos listas ordenadas Two Sorted Lists
• Une K listas ordenadas
• Remueve el nodo Nth del final de la lista
• Reordena la Lista

Matemáticas

Notas

Si el código implica división o módulo, recuerda verificar si hay división o módulo por 0.
Cuando una pregunta involucra "un múltiplo de un número", el módulo puede ser útil.
Verifica y maneja el desbordamiento y el subdesbordamiento si estás utilizando un lenguaje escrito como Java y C++. Como mínimo, menciona que es posible un desbordamiento o un desbordamiento y pregunta si necesitas manejarlo.
Considera números negativos y números de coma flotante. Esto puede sonar obvio, pero cuando estás bajo presión en una entrevista, muchos puntos obvios pasan desapercibidos.
Si la pregunta pide implementar un operador como potencia, raíz cuadrada o división, y debes ser más rápido que O(n), la búsqueda binaria suele ser el enfoque.

Algunas fórmulas comunes

• Suma de 1 a N = (n+1) * n/2
• Suma de GP = 2⁰ + 2¹ + 2² + 2³ + … 2^n = 2^(n+1)-1
• Permutaciones of N = N! / (N-K)!
• Combinaciones of N = N! / (K! * (N-K)!)

Casos comunes

• División por 0
• Desbordamiento y subdesbordamiento de enteros

Preguntas de práctica

• Pow(x, n)
• Sqrt(x)
• Entero a palabras en inglés

Matriz

Notas

Una matriz es un arreglo bidimensional. Las preguntas que involucran matrices generalmente están relacionadas con la programación dinámica o el recorrido de gráficos.
Para preguntas que involucren programación transversal o dinámica, tienes que hacer una copia de la matriz con las mismas dimensiones que se inicializan a valores vacíos. Utiliza estos valores para almacenar el estado visitado o la tabla de programación dinámica. Familiarízate con esta rutina:

rows, cols = len(matrix), len(matrix[0])
copy = [[0 for _ in range(cols)] for _ in range(rows)

• Muchos juegos basados en cuadrículas se pueden modelar como una matriz. Por ejemplo, Tic-Tac-Toe, Sudoku, Crossword, Connect 4 y Battleship. No es raro que se te pida que verifiques la condición ganadora del juego.
• Para juegos como Tic-Tac-Toe, Connect 4 y Crosswords, la verificación debe realizarse vertical y horizontalmente. Un truco es escribir código para verificar la matriz de las celdas horizontales. Luego transpón la matriz, reutilizando la lógica utilizada para la verificación horizontal para verificar celdas originalmente verticales (que ahora son horizontales).
• Transponer una matriz en Python es simple:

transposed_matrix = zip(*matrix)

Casos comunes

• Matriz vacía. Verifique que ninguna de las matrices tenga una longitud de 0.
• Matriz 1 x 1.
• Matriz con una fila o columna

Preguntas de práctica

• Conjunto de matriz cero
• Matriz espiral
• Imagen traspuesta
• Buscador de palabras

Recursión

Notas

La recursividad es útil para la permutación, porque genera todas las combinaciones y preguntas basadas en árboles. Debes saber cómo generar todas las permutaciones de una secuencia y cómo manejar los duplicados.
Recuerda siempre definir un caso base para que su recursión termine.

La recursividad utiliza implícitamente una pila. Por lo tanto, todos los enfoques recursivos se pueden reescribir iterativamente usando una pila.

Ten cuidado con los casos en los que el nivel de recurrencia es demasiado profundo y provoca un desbordamiento de la pila (el límite predeterminado en Python es 1000). Puedes obtener puntos de bonificación por señalar esto al entrevistador.

La recursividad nunca será una complejidad de espacio O(1) porque se trata de una pila, a menos que haya una optimización de llamada final (TCO). Averigua si su lenguaje elegido es compatible con TCO.

Preguntas de práctica

• Subconjunto and Subconjunto II
• Número Strobogramático II

Cadenas

Notas

Por favor lee los siguientes tips en la secuencia. Aplica para las cadenas también.

Pregunta sobre el conjunto de caracteres de entrada y la distinción entre mayúsculas y minúsculas. Por lo general, los caracteres se limitan a caracteres latinos en minúsculas, por ejemplo, de la a a la z.
Cuando necesites comparar cadenas donde el orden no es importante (como un anagrama), puedes considerar usar un HashMap como contador.

Si tu lenguaje de programación tiene una clase Counter como Python, pregunta si puedes usar esta clase mejor.

Si necesitas mantener un contador de caracteres, un error común es decir que la complejidad del espacio requerida para el contador es O(n). El espacio requerido para un contador es O(1) no O(n). Esto se debe a que el límite superior es el rango de caracteres, que suele ser una constante fija de 26. El conjunto de entrada son solo caracteres latinos en minúsculas.
Las estructuras de datos comunes para buscar cadenas de manera eficiente son

• Trie/Árbol de prefijo
• Árbol de sufijo

Algunos algoritmos comunes son:

• Rabin Karp, que realiza búsquedas eficientes de subcadenas, utilizando un hash rodante
• KMP, que realiza búsquedas eficientes de subcadenas

Caracteres que no se repiten

Usa una máscara de bits de 26 bits para indicar qué caracteres latinos en minúsculas están dentro de la cadena.

mask = 0
for c in set(word):
  mask |= (1 << (ord(c) - ord('a')))

Para determinar si dos cadenas tienen caracteres comunes, realiza & en las dos máscaras de bits. Si el resultado es distinto de cero, mask_a & mask_b > 0 , entonces las dos cadenas tienen caracteres comunes.

Anagrama

Un anagrama es cambio de palabra o juego de palabras. Es el resultado de reorganizar las letras de una palabra o frase para producir una nueva palabra o frase, usando todas las letras originales una sola vez. En las entrevistas, por lo general solo nos molestan las palabras sin espacios en ellas.
Para determinar si dos cadenas son anagramas, existen algunos enfoques plausibles:

• Ordenar ambas cadenas debería producir la misma cadena resultante. Esto toma el tiempo O (log n) y el espacio O (logn).
• Si asignamos cada carácter a un número primo y multiplicamos cada número asignado, los anagramas deben tener el mismo múltiplo (descomposición en factores primos). Esto toma O(n) tiempo y O(1) espacio.
• El conteo de frecuencia de caracteres ayudará a determinar si dos cadenas son anagramas. Esto también toma tiempo O(n) y espacio O(1).
  Palíndromo

Palíndromo

Un palíndromo es una palabra, frase, número u otra secuencia de caracteres que se lee igual hacia adelante y hacia atrás, como señora o coche de carreras.
Aquí hay formas de determinar si una cadena es un palíndromo:

• Invierte la cuerda y debería ser igual a sí misma.
• Tienes dos punteros al principio y al final de la cadena. Mueve los punteros hacia adentro hasta que se encuentren. En cualquier momento, los caracteres de ambos punteros deben coincidir.

El orden de los caracteres dentro de la cadena es importante, por lo que los HashMaps generalmente no son útiles.
Cuando una pregunta se trata de contar el número de palíndromos, un truco común es tener dos punteros que se muevan hacia afuera, alejándose del centro. Ten en cuenta que los palíndromos pueden tener una longitud par o impar. Para cada posición de pivote central, debes verificarla dos veces: una vez que incluye el personaje y otra sin el personaje.

• Para las subcadenas, puedes terminar antes de tiempo una vez que no haya ninguna coincidencia.
• Para las subsecuencias, use la programación dinámica ya que hay subproblemas superpuestos. Mira esta pregunta.

Casos comunes

• Cadena vacía
• Cadena de un solo carácter
• Cadenas con un solo carácter diferente

Preguntas de práctica

• Subcadena más larga sin caracteres repetidos
• Reemplazo de caracteres repetitivo más largo
• Subcadena de ventana mínima
• Cadenas Encode y Decode
• Anagrama válidoa
• Anagramas de grupo
• Parentesis válidos
• Palíndromo válido
• Cadena con Palíndromos más larga
• Subcadenas con palíndromos

Árboles

Links de estudio

• Lánzalo a árboles binarios

Notas

Un árbol es un grafo acíclico no dirigido y conexo.
La recursividad es un enfoque común para los árboles. Cuando notes que el problema del subárbol se puede usar para resolver el problema completo, intenta usar la recursividad.
Cuando utilices la recursividad, recuerda siempre verificar el caso base, generalmente donde está el nodo. null.

Cuando se te pida que atravieses un árbol por nivel, utiliza primero la búsqueda en profundidad.
A veces es posible que tu función recursiva necesite devolver dos valores.
Si la pregunta involucra la suma de nodos en el camino, asegúrate de verificar si los nodos pueden ser negativos.
Debes estar muy familiarizado con la escritura transversal recursiva en orden previo, en orden y posterior al pedido. Como extensión, desafíate a ti mismo escribiéndolos iterativamente.

A veces, los entrevistadores preguntan a los candidatos por el enfoque iterativo, especialmente si el candidato termina de escribir el enfoque recursivo demasiado rápido.

Árbol binario

El recorrido en orden de un árbol binario no es suficiente para serializar un árbol de forma única. También se requiere un recorrido previo o posterior al pedido.

Árbol de búsqueda binario (BST)

El recorrido en orden de un BST te dará todos los elementos en orden.
Estar muy familiarizado con las propiedades de un BST. Valida que un árbol binario sea un BST. Esto aparece con más frecuencia de lo esperado.
Cuando una pregunta implica un BST, el entrevistador suele buscar una solución que se ejecute más rápido que O(n).

Casos comunes

• Árbol vacío
• Un solo nodo
• Dos nodos
• Árbol muy inclinado (como una lista enlazada)

Preguntas de prácticas

• Profundidad máxima del árbol binario
• Mismo árbol
• Invertir o voltear árbol binario
• Suma máxima de ruta de acceso del árbol binario
• Recorrido de orden a nivel de árbol binario
• Serializar y deserializar árbol binario
• Subárbol de otro árbol
• Construir árbol binario a partir de preorden y recorrido en orden
• Validar árbol de búsqueda binario
• Elemento Kth más pequeño en un BST
• Ancestro común más bajo de BST

Tries

Links de estudio

• Intentando entender los Tries
• Implementando un Trie (Tree de prefijo)

Notas

Los Tries son un tipo específico de estructura de datos.  Como tal son árboles especiales (árboles de prefijos) que hacen que la búsqueda y el almacenamiento de cadenas sean más eficientes. Los intentos tienen muchas aplicaciones prácticas, como realizar búsquedas y proporcionar autocompletado. Es útil conocer estas aplicaciones comunes para que puedas identificar fácilmente cuándo un problema se puede resolver de manera eficiente utilizando un trie.
A veces, el procesamiento previo de un diccionario de palabras (dado en una lista) en un trie mejorará la eficiencia de la búsqueda de una palabra de longitud k, entre n palabras. La búsqueda se convierte en O(k) en lugar de O(n).

Estar familiarizado con la implementación, desde cero, de una clase Trie y sus métodosadd, remove , y search.

Preguntas de Práctica

• Implementando un Trie ( Tree de prefijo)
• Añadir y buscar palabras
• Buscador de palabras II

Montículo

Links de estudios

• Aprendiendo a amar los montículos

Notas

Si ves un k superior o inferior mencionado en la pregunta, generalmente es una señal de que se puede usar un montón para resolver el problema, como en Elementos frecuentes K principales.
Si necesitas los k elementos superiores, use un Min Heap de tamaño k. Iterar a través de cada elemento, empujándolo en el montón.

Siempre que el tamaño del almacenamiento dinámico exceda k, elimina el elemento mínimo. Eso garantizará que tengas los k elementos más grandes.

Preguntas de práctica

• Une K listas ordenadas
• Top de elementos K más frecuentes
• Encuetra la mediana a partir de un conjunto de datos

Conclusión

Las entrevistas de programación son difíciles. Pero afortunadamente, puedes mejorar tus resultados estudiando y practicando para ellas, así como haciendo entrevistas simuladas.
En resumen, para hacerlo bien en la codificación de entrevistas:

1. Elige un lenguaje de programación
2. Estudia los principios de las Ciencias de la Computación.
3. Practica resolviendo ejercicios de algoritmos.
4. Internaliza el qué hacer y el qué no en las entrevistas
5. Practica haciendo entrevistas simuladas
6. Ve a la entrevista a obtener el trabajo

Al seguir estos pasos, mejorarás tus habilidades de codificación de entrevistas y estarás un paso más cerca (o probablemente más) de conseguir el trabajo de sus sueños.

¡Mis mejores deseos!

Si te ha gustado este artículo, ¡compártelo con tus amigos!
También puedes seguirme en GitHub y Twitter.

Puedes encontrar los artículos previos en:

• ¿Qué es Linting y ESLint?
• ¿Qué es npm?
• ¿Qué es Babel?

¿Qué es Prettier?

En resumen y muy acotado, Prettier es un formateador automático de código. ¿Qué quiere decir esto?

Escribir código es una acción humana y como tal hay opiniones sobre como se debe escribir este código y no solamente desde el punto de vista algorítmico o técnico, si no, incluso se crean discusiones sobre estilos de "escritura" (Famosa es la "guerra sagrada" sobre si usar o no ; es JavaScript o tabs vs espacios).

Al trabajar en un proyecto de código que incluya a más de una persona estas discusiones sobre como debería escribirse o no el código (guía de estilo) pueden mermar la productividad del equipo enfrascándose en nimiedades que pueden tornarse bastante molestas, por ejemplo, al revisar un pull-request. Las diferencias de estilo se mostrarán como cambios que en efecto no son parte del real desarrollo que se intenta lograr.

Prettier busca solucionar esto otorgando una serie de configuraciones y opiniones sobre esta guía de estilo.

Prettier ofrece soporte para múltiples lenguajes y frameworks.

• Javascript
• JSX
• Angular
• Vue
• Typescript
• CSS
• HTML
• JSON
• Graphql
• Markdown
• YAML

Lo que ofrece Prettier es tomar tu código y "re-formatearlo" en base a las configuraciones definidas manteniendo así un estilo consistente.

Uno de los casos más comunes que podemos usar como ejemplo es el largo de la definición de una función:

function calcularMuchosArgumentos(unaVariableMuyLarga, otraVariableConUnNombreDeclarativo) 

Prettier tomará este trozo de código y automáticamente lo re-escribirá como

function calcularMuchosArgumentos(
    unaVariableMuyLarga,
    otraVariableConUnNombreDeclarativo
)

Haciéndolo mucho más legible y sin intervención nuestra ni preocupación de como lo escribes inicialmente.

Finalmente, lo que Prettier otorga es una forma sencilla y automatizada de definir un estilo de código en todo tu proyecto ya que simplemente desecha el estilo original (el que fue escrito por un desarrollador) al re-escribirlo bajo las reglas y configuraciones definidas.

¿Por qué querrías usar Prettier?

Algo dejé entrever en el párrafo anterior. Definir una guía de estilo única en el proyecto que permita evitar discusiones innecesarias sobre cómo escribir código y evite conflictos a la hora de revisar cambios en el código.

Pero hay algunas otras ventajas como por ejemplo:

• Ayudar a los nuevos desarrolladores del equipo. Quienes llegan a unirse a un equipo que ya lleva un tiempo trabajando no tendrán que aprender las reglas de estilo del equipo y acostumbrarse a nuevas formas de escribir su trabajo, evitando así gastar tiempo en tomar nuevos hábitos.
• Enfoque: Al usar una herramienta como prettier es fácil notar que tendrás un poco más de tiempo para enfocarte en lo que realmente importa en tu trabajo: escribir código sin preocuparte de formatear o estilizar lo que escribiste. Prettier tiene integraciones con la gran mayoría de editores de texto por lo que el formateo es completamente no-intrusivo y automático.
• Fácil adopción: Integrar Prettier en tu proyecto es sencillo y no generará cambios bruscos que debas tener en cuenta.

¿Qué diferencia hay entre Prettier y un linter cómo ESLint?

Es fácil asociar el trabajo de Prettier y ESLint, pero en realidad difieren en su objetivo

Si quieres saber más sobre que es ESLint, como funciona y como instalarlo revisa este artículo de la serie.

En pocas palabras, el trabajo de un linter como ESLint es encontrar bugs y el de Prettier formatear el código.

Por ejemplo, ESLint tiene reglas para mejorar la calidad del código cómo: no-unused-vars, no-await-in-loop, no-dupe-args, etc. Prettier no tiene nada que hacer con este tipo de reglas, ya que están relacionadas a una tarea diferente.

¿Cómo instalar Prettier?

Prettier es un paquete que puedes encontrar en npm

Para saber más sobre que es NPM te invito a revisar este artículo de la serie

Comienza por abrir tu terminal e instalar Prettier localmente en tu proyecto

npm install --save-dev --save-exact prettier

Luego deberás crear un archivo de configuración para que así el editor de texto que utilizas sepa que Prettier está disponible.

echo {} > .prettierrc.json

Además, es buena idea configurar un archivo .prettierignore que te permitirá indicarle a Prettier que archivos no formatear.

# Ignore artifacts:
build
coverage
static

Este archivo es muy parecido e incluso a veces idéntico a tu archivo .gitignore o .eslintignore

Con esto Prettier ya está disponible para su uso, puedes comenzar por formatear todos tus archivos utilizando, nuevamente la terminal

npx prettier --write .

Si tienes muchos archivos esto puede tomar un tiempo, ahora es buen momento para configurar tu editor de texto favorito para que trabaje con Prettier  momento de guardar los archivos o mediante alguna combinación de teclas.

Puedes revisar la documentación de cada editor o este listado en el sitio oficial de Prettier sobre la Integración con Editores

Tips

Es común tener varias herramientas trabajando en tu proyecto, por lo que es importante configurar todo para que "jueguen bien", una de esas configuraciones es permitir que ESLint y Prettier trabajen en conjunto sin interponerse (algunas reglas pueden sobreponerse). Para ello existe un plugin eslint-config-prettier que permite que ESLint deshabilite las reglas que pueden chocar con Prettier

Puedes instalarlo utilizando la terminal

npm install --save-dev eslint-config-prettier

Luego tendrás que añadir algunas configuraciones a tu configuración es ESLint.

{
    "extends": [
    	"prettier"
    ]
}

También es buena idea permitir que Prettier funcione con tus acciones relacionadas con Git

Una forma de reforzar el uso de Prettier en el equipo es que se ejecute automáticamente al momento de "guardar" tu código en tu repositorio (hacer commit). La idea es asegurarte que todos los archivos que fueron modificados sean formateados por Prettier. Para esto debes instalar algunas herramientas y configurar tu archivo package.json

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Finalmente, edita tu archivo package.json y agrega

{
    "lint-staged": {
        "**/*": "prettier --write --ignore-unknown"
    }
}

En resumen, en este artículo hemos revisado que es y como funciona Prettier, también el razonamiento de porque querrías utilizarlo para evitar problemas de guías de estilo.

También revisamos como instalar localmente Prettier en tu proyecto, configurar .prettierrc.json y el archivo `.prettierigore`.

Finalmente, vimos como configurar para que ESLint y Prettier funcionen en conjunto.

¿Te has preguntado alguna vez cómo se construyen y diseñan los sitios web? ¿Desea aprender el arte del desarrollo web, pero no es tan experto en tecnología, todavía?

Bueno, entonces este tutorial es para ti. Es una introducción al desarrollo web para principiantes, para que puedas aprender lo básico incluso si eres totalmente nuevo en el tema.

Conceptos básicos de HTML: la estructura de una página web

HTML significa Hyper-Text Markup Language. Antes de adentrarnos en el funcionamiento de HTML, vamos a tener una comprensión básica de lo que significa realmente Hyper-Text Markup Language.

El Hyper-Text se refiere a los hipervínculos que se ven en un texto, una imagen o un marcador que redirige a otra página, archivo, documento u otra parte de una página web.

Un lenguaje de marcado es simplemente un lenguaje informático que contiene etiquetas que definen elementos dentro de un documento. Un ejemplo de etiqueta podría ser el titular de un blog, que normalmente se escribe como una etiqueta h.

Hay más etiquetas, algunas de las cuales descubriremos más adelante.

Puedes pensar simplemente en HTML como la estructura de una página web. Supongamos que tienes que construir una casa. El primer paso de la construcción debe ser construir su estructura general, ¿verdad?

Diseñará el sótano, las paredes, el césped, el garaje, etc. Así es como puedes imaginar el HTML: son los bloques de construcción de una página web.

En un sitio web, puede contener la barra de navegación, el cuerpo principal/contenido, el pie de página, la barra lateral y todas las divisiones estructurales de la página. Todo ello con HTML.

Cómo empezar con HTML

Hay muchos editores de código, como VS Code, Sublime Text 3, Atom y Brackets. Todos estos pueden sonar extraños para ti. Así que empezamos usando Notepad que podemos usar de una forma u otra para escribir notas u otras cosas.

Veamos cómo se haría la estructura de una página web sencilla en HTML con código básico.

Vamos a diseñar una página web que tiene diferentes secciones: una barra de navegación, el cuerpo principal con un título, un párrafo, una imagen, y un pie de página.

<!DOCTYPE html>

<html>
    <head>
        <title>Título de la página</title>
    </head>
    <body>

        <nav>Esta es el Navbar de mi página web</nav>

        <h1>Mi primera título</h1>
        <p>Mi primer párrafo.</p>

        <img src = "https://miro.medium.com/max/1584/1*lJ32Bl-lHWmNMUSiSq17gQ.png"/>

        <footer>
          <p>Pie de página</p>
        </footer>

    </body>
</html>

En el código anterior, la declaración <!DOCTYPE html> significa que este documento es un archivo HTML5.

El 5 de arriba solo se refiere a la versión, ya que HTML ha avanzado mucho y ha mejorado respecto a sus versiones anteriores. La versión 5 solo se refiere a su última versión estable. No tienes que preocuparte por las versiones anteriores.

<html> actúa como elemento raíz de todos los elementos (título, encabezados, párrafos, etc.) de una página web HTML.

<head> contiene la metainformación (información sobre datos como el autor, la fecha de caducidad, una lista de palabras clave, el autor del documento) de la página.

El <title> refiere al título de la página web, que se ve en el navegador cuando se abre una página web. Aquí hay un ejemplo para tu referencia. En esta imagen, Page Title se refiere a la etiqueta title.

<body> es donde está todo el contenido de tu página web, como el encabezado, los párrafos, las imágenes, toda la interfaz de usuario.

<nav> representa la barra de navegación, que debe estar en la parte superior, seguida del cuerpo de contenidos principal y por último, el <footer>.

El cuerpo principal está compuesto por un encabezado representado por una etiqueta <h1> (el 1 con la h representa el tamaño del encabezado. El tamaño del encabezado va de 1 a 6, siendo 1 el más grande y 6 el más pequeño). Le sigue una etiqueta <p> de párrafo, luego una etiqueta de imagen <img>, finalmente el pie de página, la última sección de una página web.

Observe que la etiqueta de la imagen tiene la palabra clave src que se refiere a la fuente de la imagen, que en este caso es una imagen tomada de la web. Por eso adjuntamos el enlace URL de la imagen.

Todas estas etiquetas comienzan con un mayor y menor que <>; también finalizan con un mayor y menor que </> con una barra inclinada de por medio, como puedes ver en los fragmentos de código.

Cómo guardar los archivos HTML y mostrar los resultados

Solo tienes que seguir estos dos pasos básicos para ver tu HTML como página web.

1. Guarde su archivo HTML con la extensión .html. En el ejemplo que hemos utilizado, hemos guardado el archivo como Tutorial.html.

2. Abra el archivo en cualquier navegador (Chrome, Firefox, IE), y entonces podrá ver su página web HTML.

Resultados de nuestro diseño HTML básico

Puedes ver claramente los resultados, aunque todavía no hay colores ni estilo. Aunque todavía se mira que la estructura está ahí - la barra de navegación, seguida por el cuerpo principal que contiene el contenido, luego por un pie de página en la parte inferior.

Cómo añadir colores, estilo y potencia al HTML con CSS

CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), que son los archivos de hojas de diseño que añaden colores, estilo y potencia a los elementos estructurales de tu HTML.

Puede pensar en el CSS como la pintura, la decoración y los elementos de diseño que añade para que tu casa quede bonita.

Existen múltiples formas de añadir CSS a tu estructura HTML. Vamos a explorar la técnica más básica que es añadir CSS a través de la etiqueta <style>.

<head>
	<title>Título página</title>
    
    <style>

    body {
      background-color: lightblue;
      margin: 0;
      text-align: center;
    }

    nav {
     background-color: black;
     width: 100%;
     color: white;
     height: 50px;
     padding-top: 25px;
    }

    h1 {
     color: black;
    }

    footer {
     background-color: gray;
     color: white;
     padding: 5px;
    }

    </style>
</head>

Explicación del anterior CSS

Puedes ver que hemos añadido el CSS a través de la etiqueta style dentro de la etiqueta head del documento en el código anterior. Esta es una forma básica de añadir CSS.

Vamos a desglosar y explorar las propiedades CSS que hemos utilizado en los cuatro elementos anteriores.

El elemento body

body {
  background-color: lightblue;
  margin: 0;
  text-align: center;
}

El selector CSS del cuerpo se refiere a toda la estructura de la interfaz de usuario que vemos. Añade algunas propiedades de CSS:

• background-color añade el color de fondo - aquí es azul claro.
• margin que gestiona los espacios a ambos lados de la estructura de la página web.
• text-aligned: center significa que todo el contenido estará alineado al centro en este caso.

Todo este CSS aplica a la página web, todos los elementos se enlazarán automáticamente estas propiedades generales CSS hasta que se especifiquen sus propias propiedades que difieran de estas globales.

El elemento nav

nav {
 background-color: black;
 width: 100%;
 color: white;
 height: 50px;
 padding-top: 25px;
}

El selector nav se refiere a la barra de navegación de la página web, la cual aplica propiedades de diseño.

Hemos establecido el color de fondo en negro, su anchura en 100% para que ocupe todo el ancho, su color que representa el color del texto o enlaces dentro de la barra de navegación, su height(altura) en 50px y le hemos dado un padding-top de 25px.

El padding se refiere al espacio entre el contenido y el borde. Como queremos que el texto esté alineado al centro, tenemos que añadir un padding de la mitad de los píxeles de la altura real de la barra de navegación, es decir, 50px (altura de la barra de navegación) / 2 = 25px. Esto asegurará que el texto dentro de la barra de navegación esté alineado al centro.

Elemento h1

h1 {
 color: black;
}

El selector h1 aplica CSS a la etiqueta h1 en el HTML. Por consiguiente la propiedad de color sea black(negro).

Elemento footer

footer {
 background-color: gray;
 color: white;
 padding: 5px;
}

Este es el último selector que se refiere al pie de página de nuestra web. Aquí, hemos establecido un conjunto similar de propiedades que discutimos anteriormente para la navbar(barra de navegación), así que no hay nada realmente nuevo aquí.

¡Y eso es todo!

Qué aspecto tiene la página web después de añadir el CSS

Ahora puedes ver cuánta vida puede añadirle el CSS a nuestra estructura básica de HTML. ¿No es increíble?

Estos son solo los fundamentos del diseño web, pero en realidad es bastante divertido una vez que los aprendes.

Conclusión:

Ahora que aprendiste los fundamentos del diseño de páginas web, puede ver lo accesible que puede ser, lo práctico que es y cómo se relaciona con muchos conceptos de la vida real, como la construcción de una casa.

Artículo original escrito por Thu Nghiem
Artículo original Learn HTML Basics for Beginners in Just 15 Minutes
Traducido y adaptado por Ezequiel Castellanos

En este artículo vamos a repasar los conceptos básicos de HTML. Al final vamos a crear un sitio web básico utilizando únicamente HTML.

Aquí hay un video que puedes ver si quieres complementar este artículo:‌‌

¿Qué es HTML?

HTML, cuyas siglas significan Lenguaje de Marcado de Hipertexto (Hypertext Markup Languaje), es un lenguaje bastante simple. Consiste en distintos elementos que utilizamos para estructurar una página web.

¿Qué son los elementos HTML?

El elemento normalmente comienza con una etiqueta de apertura, la cual consiste en el nombre del elemento. Se rodean (Es contenida) por corchetes angulares de apertura y cierre. La etiqueta de apertura indica dónde comienza el elemento.

De igual manera que la etiqueta de apertura, la etiqueta de cierre también está contenida por corchetes angulares de apertura y cierre. Pero también incluye una barra antes del nombre del elemento.

Todo lo que está dentro de las etiquetas de apertura y cierre es el contenido.

Pero no todos los elementos siguen este patrón. Les decimos elementos vacíos a aquellos que no siguen este patrón. Estos únicamente consisten en una etiqueta simple o una etiqueta de apertura que no puede tener ningún contenido. Estos elementos se utilizan normalmente para insertar algo en el documento.

Por ejemplo, el elemento <img> es utilizado para insertar un archivo de imagen, o el elemento <input> es utilizado para insertar un campo de datos en la página.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

En el ejemplo de arriba, el elemento <img> sólo consiste en una etiqueta que no tiene ningún contenido. Este elemento es usado para insertar en el documento un archivo de imagen desde Unsplash.

Como anidar elementos HTML

<div class="my-list">
  <h4>My list:</h4>

  <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Banana</li>
  </ul>
</div>

Los elementos pueden ser colocados dentro de otros elementos. Esto se llama Anidamiento. En el ejemplo de arriba, dentro del elemento <div> tenemos un elemento <h4> y un elemento <ul> o elemento de lista no ordenado. De manera similar dentro del elemento <ul> hay 3 elementos <li> o elemento de lista.

El anidamiento básico es bastante sencillo de entender. Pero cuando la página crece, el anidamiento puede complicarse.

Por lo tanto, antes de trabajar con HTML, piensa sobre la estructura de diseño que te gustaría tener. Puedes dibujarla en un papel o en tu mente. Será de mucha ayuda.

¿Qué son los atributos HTML?

Los elementos también tienen atributos que contienen información adicional acerca del elemento que no aparecerá en el contenido.

<img src="https://images.unsplash.com/photo" width="50">

En el ejemplo de arriba, el elemento <img> tiene 2 atributos: src u origen para especificar la ruta de la imagen, y width para especificar el ancho de la imagen en pixeles.

Con este ejemplo, puedes ver las siguientes características o atributos:

• Hay un espacio entre atributo y el nombre del elemento
• Los atributos se agregan en la etiqueta de apertura
• Los elementos pueden tener varios atributos
• Los atributos tienen un nombre y un valor: nombre=“valor”

Pero no todos los atributos tienen el mismo patrón. Algunos pueden existir sin valores y les decimos Atributos Booleanos.

<button onclick=“alert('Submit')" disabled>Button</button>

En este ejemplo, si queremos desactivar el botón, lo único que tenemos que hacer es pasar un atributo disabled sin ningún valor. Esto significa que la presencia del atributo representa el valor verdadero, de lo contrario, la ausencia representa el valor falso.

Elementos comunes de HTML

Existen en total más de 100 elementos. Pero 90% del tiempo sólo vas a utilizar alrededor de 20 de los más comunes. Los he colocado en 5 grupos:

Elementos de sección

  <div>, <span>, <header>, <footer>, <nav>, <main>, <section> 

Estos elementos se utilizan para organizar el contenido en diferentes secciones. Por lo general son muy obvios, por ejemplo<header> representa a un grupo de la sección de introducción y navegación, <nav> representa la sección que contiene los enlaces de navegación, etcétera.

Contenido de texto

  <h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

Estos elementos se utilizan para organizar contenido o bloques de texto. Son importantes para la accesibilidad y posicionamiento en buscadores (SEO). Estos le comunican al navegador el propósito o estructura del contenido.

Formularios

  <form>, <input>, <button>, <label>, <textarea>

Estos elementos pueden utilizarse juntos para crear formularios que los usuarios pueden completar y enviar. Los formularios pueden ser la parte más complicada de HTML.

Imágenes y enlaces

  <img>, <a>

Estos elementos se utilizan para insertar una imagen o crear un hipervínculo.

Otros

  <br>, <hr>

Estos elementos se utilizan para agregar un quiebre a la página web.

Puedes encontrar todos los elementos en developer.mozilla.org. Pero para principiantes, sólo necesitas conocer los más comunes.

Elementos HTML de nivel bloque vs en línea

De manera predeterminada un elemento puede ser un elemento de nivel bloqué o en línea.

Elementos de nivel bloqué son los elementos que siempre comienzan en una nueva línea y ocupan todo el ancho disponible.

Elementos en línea son los elementos que no comienzan en una nueva línea y sólo ocupan tanto ancho como sea necesario.‌‌

Dos elementos que representan elementos de nivel bloqué y elementos en línea, respectivamente, son <div> y <span>. En este ejemplo puedes ver que el elemento <div> ocupa 3 líneas, mientras que el elemento <span> solo ocupa 1 línea.

Pero la pregunta es: ¿Cómo sabemos cuáles son elementos a nivel de bloqué y cuáles son elementos en línea? Bueno, desafortunadamente necesitas recordarlos. La forma más sencilla es recordar cuáles son elementos en línea y el si resto son elementos de bloqué.

Si recordamos los elementos HTML más comunes, los elementos en línea incluyen: <span>, <input>, <button>, <label>, <textarea>, <img>, <a>, <br>.

¿Cómo comentar en HTML?

<p>This is a paragraph.</p>

<!-- <p>I am not showing.</p> -->

El propósito de los comentarios es incluir notas en el código para explicar la lógica o simplemente para organizar tu código.

Los comentarios HTML están contenidos por marcadores especiales: <!-- y --> y son ignorados en el navegador.

Como utilizar entidades HTML

¿Qué pasa si quieres mostrar el texto: la etiqueta <p> define un párrafo., pero el navegador interpreta <p> como una etiqueta de apertura para un nuevo elemento? En este caso, podemos usar entidades de caracteres HTML como en el siguiente ejemplo:

<p>the <p> tag defines a paragraph.</p>

<p>the &lt;p&gt; define a paragraph.</p>

Cómo utilizar emoji en HTML

En la web moderna, podemos mostrar emoji en HTML de manera bastante fácil, así: ?

<p>? Cara Sonriente.</p>

<p>? Cumpleaños</p>

Errores comunes de principiantes en HTML

1. Nombres de Etiquetas/Elementos

Los nombres de las etiquetas/elementos no no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en minúscula o mayúscula, pero se recomienda que escribas todo en minúscula: <button> no <ButTon>.

2. Etiqueta de cierre

No incluir la etiqueta de cierre es un error común de principiante. Por lo tanto, cuando estés creando una etiqueta de apertura, inmediatamente agrega la etiqueta de cierre.

3. Anidado

Esto está mal:

<div>Div 1 <span> Span 2 </div></span>

Las etiquetas  tienen que abrirse y cerrarse de tal forma que queden dentro o fuera de las otras.

4. Comillas simples o Comillas dobles

Esto está mal:

<img src="https://images.unsplash.com/'>

No se pueden mezclar comillas simples con comillas dobles. Siempre deberías usar comillas dobles y usar entidades HTML si fuera necesario.

¿Cómo crear un sitio web simple con HTML?

Los elementos HTML individuales no son suficientes como para crear un sitio web. Entonces veamos qué más necesitamos para crear un sitio web simple desde cero.

¿Cómo crear un documento HTML?

Primero, abramos Visual Studio Code (o tu editor de código favorito). En la carpeta que elijas, crea un nuevo archivo y dale el nombre de index.html.

En el archivo index.html, escribe! (signo de exclamación) y presiona enter. Vas a ver algo como esto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Esto es el código mínimo que un documento HTML debe tener para armar un sitio web. Aquí tenemos:

1. <!DOCTYPE html>: Primero tenemos Doctype. Por alguna extraña razón histórica tenemos que incluir el doctype para que todo funcione correctamente.
2. <html lang="en"></html>: El elemento<html> envuelve todo el contenido de la página, también conocido como el elemento raíz. Siempre debemos incluir el atributo lang para declarar el idioma de la página.
3. <head></head>: El elemento <head> es un contenedor para todo lo que quieras incluir pero no contenido que muestres a tus usuarios.
4. <meta charset="UTF-8" />: El primer elemento meta es utilizado para establecer el set de caracteres para que sea UTF-8, el cual incluye la mayoría de los caracteres del lenguaje escrito.
5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />: El segundo elemento meta especifica el viewport del navegador. Esta configuración es para un sitio web optimizado para dispositivos móviles.
6. <title>Document</title>: Este es el elemento <title>. Establece el título de la página.
7. <body></body>: El elemento <body> contiene todo el contenido en la página.

¿Cómo crear una página de recetas de panqueques?

Bien, ahora que tenemos el código inicial creemos la página de recetas de panqueques. Vamos a usar el contenido de la página AllRecipes.

Primero, vamos a darle al elemento <title> contenido de la receta de panqueques. Vas a ver cambiar el texto en la pestaña de la página web. En el elemento <body>, creamos 3 elementos: <header>, <main> y <footer> que representan las 3 secciones.

1. Crear la sección de encabezado

En el encabezado, queremos tener el logo y la navegación. Por lo tanto, vamos a crear un div con el contenido ALL RECIPE para el logo.

Para la navegación, usemos el elemento <nav>. Dentro del elelmento <nav>, podemos usar <ul> para crear una lista desordenada. Queremos tener 3 elementos <li> para 3 enlaces: Ingredientes, Pasos, y Suscribirse. El código del encabezado se ve así:

...
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredientes</a></li>
          <li><a href="#steps">Pasos</a></li>
          <li><a href="#subsribe">Suscribirse</a></li>
        </ul>
      </nav>
    </header>
...

2. Crear la sección principal

En la sección main, primero, queremos tener un título y una imagen. Podemos usar h1 para el título y <img> para la imagen (podemos usar una imagen desde Unsplash gratis):

...
    <main>
      <h1>Panqueques Clásicos</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502"
        alt="pancake"
        width="250"
      />
    </main>
...

Después, queremos listar todos los ingredientes. Podemos usar <ol> para crear una lista ordenada y <input type="checkbox" /> para crear una casilla de verificación.

Pero antes de esto, podemos usar <h2> para comenzar un nuevo bloque de contenido. También vamos a agregar el atributo id para el <h2> para que el enlace en la navegación sepa donde ir:

...
    <main>
    ...
      <h2 id="ingredients">Ingredientes</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ tazas de harina para todo uso</li>
        <li><input type="checkbox" /> 3 ½ cucharaditas de levadura en polvo</li>
        <li><input type="checkbox" /> 1 cucharadita de sal</li>
        <li><input type="checkbox" /> 1 cucharada de azucar blanca</li>
        <li><input type="checkbox" /> 1 ¼ tazas de leche</li>
        <li><input type="checkbox" /> 1 huevo</li>
      </ol>
    </main>
...

Después de los ingredientes, vamos a listar todos los pasos. Podemos usar <h4> para el encabezado de los pasos y <p> para el contenido de los pasos:

...
    <main>
    ...
      <h2 id="steps">Pasos</h2>
      
      <h4>Paso 1</h4>
      <p>
        En un tazón grande, tamice la harina, el polvo de hornear, la sal y el azúcar.
        Hacer un hueco en el centro y verter la leche, el huevo y la mantequilla derretida;
        mezclar hasta que quede suave.
      </p>
      
      <h4>Paso 2</h4>
      <p>
        Caliente una plancha o sartén ligeramente engrasada a fuego medio-alto.
        Verter o coloque la masa en la plancha, usando aproximadamente 1/4 taza para cada panqueque.
          Dorar por ambos lados y servir caliente.
      </p>
    </main>
...

Bien, ahora que hemos terminado con la sección principal, sigamos con la sección pie de página.

3. Crear la sección pie de página

En el pie de página queremos tener el formulario de suscripción y el texto de derechos de autor.

Para el formulario de suscripción, podemos usar el elemento <form>. Dentro podemos tener un <input type="text"> para la entrada de texto y un botón <button> para el botón de enviar.

Para el texto de derechos de autor, simplemente podemos usar un <div>. Tome nota aquí, podemos usar la entidad HTML $copy; para el símbolo de copyright.

Podemos incluir un <br> para agregar espacio entre el formulario de suscripción y el texto copyright:

...
    <footer>
      <h6 id="subscribe">Suscribirse</h6>
      <form onsubmit="alert('Suscrito')">
        <input type="text" placeholder="Ingrese Email" />
        <button>Enviar</button>
      </form>
      <br />
      <div>&copy; dakota kelly en Allrecipe.com</div>
    </footer>
...

Bien, ahora hemos terminado! Aquí está el código completo para referencia:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Receta para Panqueques</title>
  </head>
  <body>
    <header>
      <div>ALL RECIPE</div>
      <nav>
        <ul>
          <li><a href="#ingredients">Ingredientes</a></li>
          <li><a href="#steps">Pasos</a></li>
          <li><a href="#subsribe">Suscribirse</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Panqueques Clásicos</h1>
      <img
        src="https://images.unsplash.com/photo-1575853121743-60c24f0a7502?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8cGFuY2FrZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
        alt="pancake"
        width="250"
      />
      <h2 id="ingredients">Ingredientes</h2>
      <ol>
        <li><input type="checkbox" /> 1 ½ tazas de harina para todo uso</li>
        <li><input type="checkbox" /> 3 ½ cucharaditas de levadura en polvo</li>
        <li><input type="checkbox" /> 1 cucharadita de sal</li>
        <li><input type="checkbox" /> 1 cucharada de azucar blanca</li>
        <li><input type="checkbox" /> 1 ¼ tazas de leche</li>
        <li><input type="checkbox" /> 1 huevo</li>
      </ol>    
      <h2 id="steps">Pasos</h2>
      
      <h4>Paso 1</h4>
      <p>
        En un tazón grande, tamice la harina, el polvo de hornear, la sal y el azúcar.
        Hacer un hueco en el centro y verter la leche, el huevo y la mantequilla derretida;
        mezclar hasta que quede suave.
      </p>
      
      <h4>Paso 2</h4>
      <p>
        Caliente una plancha o sartén ligeramente engrasada a fuego medio-alto.
        Verter o coloque la masa en la plancha, usando aproximadamente 1/4 taza para cada panqueque.
          Dorar por ambos lados y servir caliente.
      </p>
    </main>
    <hr />
    <footer>
      <h6 id="subscribe">Suscribirse</h6>
      <form onsubmit="alert('Suscrito')">
        <input type="text" placeholder="Ingrese Email" />
        <button>Enviar</button>
      </form>
      <br />
      <div>&copy; dakota kelly en Allrecipe.com</div>
    </footer>
  </body>
</html>

Conclusión

Puedes crear un sitio web simple con solo HTML. Pero para poder construir sitios web hermosos y funcionales, necesitas estudiar CSS y JavaScript.

Me puedes seguir en redes sociales o Youtube para actualizaciones futuras sobre estos temas. Pero mientras tanto, puedes chequear el Plan de Estudios de freeCodeCamp para practicar HTML resolviendo pequeñas tareas.

Si no, puedes seguir codeando y nos vemos en futuros posts ?.

__________ ? Acerca de mí __________

• Soy el fundador de DevChallenges
• Suscríbete a mi Canal
• Sigue mi Twitter
• Únete al Discord

El portafolio debe ser un documento con vida. Terminas un proyecto, agregas ese proyecto a tu portafolio para enseñárselo al mundo. Añades cosas constantemente, demostrando tu trayectoria de crecimiento personal. Se lo das a potenciales reclutadores y gestores de contratación para añadir dimensión a tú resume.

De los cinco proyectos para conseguir esa certificación, he puesto sin lugar a dudas la mayor parte del trabajo en mi portafolio. Si iba a ser mi primera impresión digital, quería asegurarme de que fuera la mejor que pudiera hacer.

El método de facto para completar proyectos en freeCodeCamp es usar codepen.io. La versión gratis te deja hacer código en panel HTML, CSS y JavaScript, y ver los cambios según los escribes en la ventana. Puedes abrir la página en ventana completa, lo que elimina los paneles HTML, CSS y JavaScript, pero deja un cartel negro en la parte superior. La URL es un "hash", algo como https://codepen.io/cam-barts/full/ZPWpqo, lo que no es memorable, no da ninguna indicación sobre contenido de la dirección, y en mi opinión no impresiona en un resume.

Además, a no ser que pagues por una afiliación con CodePen, no puedes cambiarlo.

Al mismo tiempo que estaba terminando mi proyecto, las estrellas se alinearon y descubrí dos tecnologías que ayudarían a mi portafolio a sobresalir: GitHub Pages y Google Lighthouse.

Github Pages te permite alojar una página web directamente desde un repositorio GitHub. Te ofrece un URL github.io bastante profesional que despertó mi interés para ponerlo en un resume. También me permite controlar por completo lo que mis usuarios pudieran ver cuando ellos naveguen a la página, y no tendría que lidiar con alojamiento propio o pagar por algún otro servicio de alojamiento.

Escuché sobre Google Lighthouse en el Podcast de CodeNewbie con Frances Coronel. Google Lighthouse inspecciona tu página web directamente desde Chrome DevTools en cinco áreas: Rendimiento, Aplicación Web Progresiva, Accesibilidad, Mejores Prácticas y SEO. SEO, u Optimización de Motor de Búsqueda, ayuda a que tu página suba a lo alto de los motores de búsqueda como Google, lo que ayuda a que te encuentren. También, ahora que iba a alojar mi página en Pages, quería asumir la responsabilidad del rendimiento de mi página, y para hacerlo de manera eficiente necesitaba un punto de referencia.

Mi meta al escribir este artículo es ayudarte a crear un sitio de portafolio que se vea profesional y que sea rápido sin costo alguno para tí. Quiero que estés orgulloso en publicarlo en LinkedIn y enlistarlo como el primero en tú resume. Eso por eso que vamos a utilizar GitHub Pages y Google Lighthouse.

Antes de ir más lejos, he hecho algunas suposiciones. La primera es que tienes una cuenta GitHub. Si no tienes una ya, crear una es fácil. La segunda es que tienes un conocimiento básico de git. Si eres nuevo, hay muchos artículos excelentes sobre como dar el primer paso. Este artículo presupone que hayas completado tu portafolio en CodePen. Finalmente, deberías tener Google Chrome instalado.

Este artículo sigue mi portafolio personal. Puedes encontrar el pen aquí, el código aquí y el producto final está en cam-barts.github.io.

Primeros pasos

Montar tu página con GitHub Pages es bastante directo. La versión corta es:

• Crea un Repositorio siguiendo la convención de denominación [Usuario de GitHub].github.io
• Clonar localmente
• Crear los archivos index.html, style.css, script.js dentro del repositorio.
• Añadir código a esos archivos
• Commit y push a GitHub
• ¡Listo!

Creas un repositorio con un título que siga la convención [Tu Usuario de GitHub].github.io. Aquí está el mío: cam-barts.github.io. Cualquier código que subas con push a ese repositorio se mostrará cuando navegues a esa página.

¿Así que, cuando hayas clonado el repositorio localmente, exactamente qué le pones?

Deberías empezar con estos tres archivos, un archivo index.html, un archivo style.css y un archivo script.js. En el editor que más te guste (yo uso Atom), deberías empezar con el siguiente fragmento de código en tu index.html:

Aquí hay bastantes cosas con las que quizás no estés familiarizado si solo has estado trabajando con codepen.io.

El atributo dir en la etiqueta HTML indica que el documento debería ser leído de derecha a izquierda (Left To Right ). Eso simplemente se asegura de que cuando tu página se muestre, todos los elementos estén justificados a la izquierda, que es como normalmente se lee.

Las etiquetas meta en el head indican los metadatos de la página, lo que ayuda a los motores de búsqueda como a Google a indexar tu página.

Llegados a este punto, deberías rellenar las etiquetas de meta y title. Atento a que el contenido de la etiqueta meta keywords debe estar separado por comas, y debe incluir términos que quieras que la gente use para encontrar tu portafolio en Google.

El siguiente paso es copiar la sección HTML de tu portafolio pen en la sección de body de tu fragmento. Una vez completado, si has vinculado cualquier CSS o JS externos en la configuración de tu pen, como Bootstrap o Font Awesome, tienes que vincularlos en tu index.html.

Crea más etiquetas link para CSS y etiquetas script para JavaScript y añade los vínculos que estén en la configuración a los atributos href y src, respectivamente. Para asegurarte de que tus estilos y scripts se muestren, asegúrate de ponerlos antes de las etiquetas de cierre de link y script del fragmento. Por ejemplo, vincular Boostrap a JQuery se vería así:

Luego, tienes que añadir tu propio CSS a tu style.css, y si tienes algún JavaScript, añade ese a tu script.js.

Después de eso, estás listo para hacer un commit a todo tu trabajo y subirlo a GitHub con push. ¡Inmediatamente después de hacer eso, puedes navegar a [Tu Usuario GitHub].github.io y echarle un vistazo a tu página!

Optimizar la página de tu portafolio

¡Enhorabuena por publicar tu portafolio!

Los siguientes pasos implican optimizar tu página. Para ello, vamos a usar Google Lighthouse. Es mejor hacer esto en una ventana Privada de Navegador para que cualquier cache o extensión de Chrome que puedas tener no afecte al resultado. Cuando navegues por tu página, abre las Herramientas de Desarrollador Chrome (Ctrl + Shift+ i) y haz clic en la pestaña de Audits.

Las Aplicaciones Progresivas Web están fuera del alcance de este tutorial, pero hacer todas las inspecciones no hace daño. Cuando las ejecutes, deberías tener una página que se parece a esta:

Lo mejor de estos informes es que te da “Oportunidades” para mejorar tus puntuaciones.

En la sección de rendimiento, te dice que uses formatos de archivo de próxima generación como WebP frente a imágenes .PNG tradicionales, y sugiere cargar las imágenes con lazy loading.

En la sección de SEO, sugiere mejoras SEO como añadir una etiqueta meta de descripción y usar tamaños de font legibles. No solo nos da sugerencias, vincula a artículos con ejemplos prácticos y cosas que cambiar en tu código para optimizar esas áreas.

A mí, me llevó solo una hora para subir la puntuación de mi página a 90 y tantos para Rendimiento, Accesibilidad, Mejores Prácticas y SEO. Puedes ver todos los cambios que hice aquí.

Llendo más lejos

Tú decides los siguientes pasos para tu página. Podrías vincularlo a Google Analytics para ver cuantas visitas está teniendo tu portafolio. Podrías añadir secciones para tus premios y para mostrar tus certificaciones de freeCodeCamp según las vayas consiguiendo. ¡La evolución de tu página está completamente en tus manos!

Traducido del artículo de Cam Barts - Boost your Developer Portfolio with GitHub Pages and Lighthouse

Hoy en día utilizo el término tan a menudo que, de hecho, recientemente he intentado pedir un API en un bar.

La respuesta del barman fue lanzar un 404: recurso no encontrado.

Conocí a mucha gente, tanto de la industria tecnológica como de otros sectores, que tiene una idea bastante vaga o incorrecta sobre lo que significa este término tan común.

Técnicamente, API significa Interfaz de Programación de Aplicaciones (Application Programming Interface). En algún momento u otro, la mayoría de las grandes empresas han creado un API para sus clientes o para uso interno.

Pero, ¿Cómo se explica API en un Español simple? ¿Existe un significado más amplio que el que se utiliza en el desarrollo y en los negocios? En primer lugar, retrocedamos y veamos cómo funciona la propia web.

WWW y los servidores remotos

Cuando pienso en la Web, me imagino una gran red de servidores conectados.

Cada página de Internet está almacenada en algún lugar de un servidor remoto. Un servidor remoto no es tan místico después de todo — es sólo una parte de una computadora remota que está optimizada para procesar peticiones.

Para poner las cosas en perspectiva, puedes levantar un servidor en tu laptop capaz de servir un sitio web entero a la Web (de hecho, un servidor local es lo que los ingenieros utilizan para desarrollar sitios web antes de liberarlos al público).

Cuando escribes www.facebook.com en tu navegador, se envía una petición al servidor remoto de Facebook. Una vez que tu navegador recibe la respuesta, interpreta el código y muestra la página.

Para el navegador, también conocido como el cliente, el servidor de Facebook es un API. Esto significa que cada vez que visitas una página en la Web, interactúas con la API de algún servidor remoto.

Un API no es lo mismo que el servidor remoto — sino que es la parte del servidor que recibe las solicitudes y envía las respuestas.

Las APIs como una forma de servir a tus clientes

Probablemente has oído hablar de empresas que empaquetan las APIs como productos. Por ejemplo, Weather Underground vende acceso a su API de datos meteorológicos.

Ejemplo: El sitio web de tu pequeña empresa tiene un formulario que se utiliza para inscribir clientes a sus citas. Quieres dar a tus clientes la posibilidad de crear automáticamente un evento de calendario de Google con los detalles de esa cita.d

Uso del API: La idea es que el servidor de tu página web hable directamente con el servidor de Google con una petición para crear un evento con los detalles datos. Tu servidor recibiría entonces la respuesta de Google, la procesaría y enviaría información relevante al navegador, como un mensaje de confirmación al usuario.

De forma alternativa, el navegador puede enviar a menudo una solicitud de API directamente al servidor de Google sin tener que pasar por tu servidor.

¿En qué se diferencia la API de Google Calendar de la API de cualquier otro servidor remoto?

En término técnicos, la diferencia es el formato de la solicitud y la respuesta.

Para mostrar toda la página web, tu navegador espera una respuesta en HTML, que contiene código de presentación, mientras que la llamada al API de Google Calendar sólo devolvería los datos — probablemente en un formato como JSON.

Si el servidor de tu sitio web hace la solicitud del API, entonces el servidor de tu sitio web es el cliente (de manera similar a como tu navegador es el cliente cuando lo utilizas para navegar a un sitio web).

Desde la perspectiva de los usuarios, las APIs les permiten completar la acción sin salir de tu sitio web.

La mayoría de los sitios web modernos consumen al menos algunas APIs de terceros.

Muchos problemas ya tienen una solución de terceros, ya sea en forma de librería o servicio. A menudo es más fácil y más fiable utilizar una solución existente.

No es raro que los equipos de desarrollo dividan su aplicación en varios servidores que se comunican entre sí a través de las APIs. Los servidores que realizan funciones de ayuda para el servidor principal de la aplicación se denominan comúnmente como microservicios.

En resumen, cuando una empresa ofrece un API a sus clientes, sólo significa que ha construido un conjunto de URLs dedicadas que devuelven respuestas de datos puros — lo que significa que las respuestas no contendrán el tipo de sobrecarga de presentación que se esperaría en una interfaz gráfica como un sitio web.

¿Puedes hacer estas solicitudes con tu navegador? A menudo, sí. Dado que la transmisión HTTP ocurre en texto, tu navegador siempre hará lo mejor que pueda para mostrar la respuesta.

Por ejemplo, puedes acceder al API de GitHub directamente con tu navegador sin necesidad de un token de acceso. Aquí tienes la respuesta JSON que obtienes cuando visitas la ruta API de un usuario de GitHub en tu navegador (https://api.github.com/users/petrgazarov):

{  "login": "petrgazarov",  "id": 5581195,  "avatar_url": "https://avatars.githubusercontent.com/u/5581195?v=3",  "gravatar_id": "",  "url": "https://api.github.com/users/petrgazarov",  "html_url": "https://github.com/petrgazarov",  "followers_url": "https://api.github.com/users/petrgazarov/followers",  "following_url": "https://api.github.com/users/petrgazarov/following{/other_user}",  "gists_url": "https://api.github.com/users/petrgazarov/gists{/gist_id}",  "starred_url": "https://api.github.com/users/petrgazarov/starred{/owner}{/repo}",  "subscriptions_url": "https://api.github.com/users/petrgazarov/subscriptions",  "organizations_url": "https://api.github.com/users/petrgazarov/orgs",  "repos_url": "https://api.github.com/users/petrgazarov/repos",  "events_url": "https://api.github.com/users/petrgazarov/events{/privacy}",  "received_events_url": "https://api.github.com/users/petrgazarov/received_events",  "type": "User",  "site_admin": false,  "name": "Petr Gazarov",  "company": "PolicyGenius",  "blog": "http://petrgazarov.com/",  "location": "NYC",  "email": "petrgazarov@gmail.com",  "hireable": null,  "bio": null,  "public_repos": 23,  "public_gists": 0,  "followers": 7,  "following": 14,  "created_at": "2013-10-01T00:33:23Z",  "updated_at": "2016-08-02T05:44:01Z"}

El navegador parece haber hecho bien en mostrar una respuesta JSON. Una respuesta JSON como esta está lista para ser usada en tu código. Es fácil extraer datos de este texto. Entonces puedes hacer lo que quieras con los datos.

A es de “Aplicación”

Para cerrar, vamos a añadir un par de ejemplos más de APIs..

"Aplicación" puede referirse a muchas cosas. Aquí hay algunos de ellos en el contexto de la API:

1. Una pieza de software con una función distinta.
2. Todo el servidor, toda la aplicación o sólo una pequeña parte de una aplicación

Básicamente, cualquier pieza de software que se pueda separar de forma distintiva de su entorno, puede ser una "A" en la API, y probablemente también tendrá algún tipo de API.

Digamos que estás usando una librería de terceros en tu código. Una vez incorporada a tu código, una librería se convierte en parte de tu aplicación general. Al ser una pieza de software distinta, la librería probablemente tenga una API que te permita interactuar con el resto de tu código.

Aquí tienes otro ejemplo: En el Diseño Orientado a Objetos, el código se organiza en objetos. Tu aplicación puede tener cientos de objetos definidos que pueden interactuar entre sí.

Cada objeto tiene un API: un conjunto de métodos y propiedades públicas que utiliza para interactuar con otros objetos de tu aplicación.

Un objeto también puede tener una lógica interna que es privada, lo que significa que está oculto al ámbito exterior (y no una API).

De lo que hemos cubierto, espero que elimine el significado más amplio de API, así como los usos más comunes del término hoy en día.

Traducido del artículo de Petr Gazarov - What is an API? In English, please