Hoja de ruta para principiantes hacia el desarrollo web

Esta hoja de ruta para principiantes establece todos los conceptos básicos para el desarrollo web. Vamos a pasar por cada paso, desde averiguar qué editor de código usar, hasta qué marco de JavaScript o lenguaje de back-end puede elegir. Y también incluiremos enlaces a recursos donde puede aprender estas habilidades.

El hecho es que, si recién está comenzando, todo lo que necesita saber ahora son los conceptos básicos. Realmente no necesita conocer todas las tecnologías, herramientas o idiomas existentes desde el principio. (Cruzarás ese puente cuando llegues, créeme!)

Al final de esta guía, comprenderá los conceptos básicos del desarrollo web, las habilidades que necesita saber y dónde encontrarlas.

1: ¿Qué es el desarrollo web : cómo funcionan los sitios web, front-end vs back-end, editor de código?

2: Interfaz básica: HTML, CSS y JavaScript‌‌

3: Herramientas : administradores de paquetes, herramientas de compilación, control de versiones‌‌

4a: Interfaz adicional: Sass, diseño receptivo, marcos de JavaScript‌‌

4b: back-end básico: gestión de servidores y bases de datos, lenguaje de programación

En esta hoja de ruta, recomiendo realizar los pasos 1, 2 y 3 en orden. Luego, dependiendo de si desea enfocarse en más front-end o back-end, puede realizar los pasos 4a o 4b en cualquier orden.

Personalmente, creo que es una buena idea que los desarrolladores web front-end conozcan al menos un poco de back-end, y viceversa. Por lo menos, conocer los conceptos básicos de ambos te ayudará a descubrir si te gusta más el front-end o el back-end.

¡También puede consultar la versión actualizada de este artículo en mi blog!

1: ¿Qué es el desarrollo web?

Antes de entrar en la codificación real, primero echemos un vistazo a información general sobre qué es el desarrollo web: cómo funcionan los sitios web, la diferencia entre el front y el back-end y el uso de un editor de código.

¿Cómo funcionan los sitios web?

Todos los sitios web, en su forma más básica, son solo un grupo de archivos que se almacenan en una computadora llamada servidor. Este servidor está conectado a Internet. Luego puede cargar ese sitio web a través de un navegador (como Chrome, Firefox o Safari) en su computadora o teléfono. Su navegador también se denomina cliente en esta situación.

Por lo tanto, cada vez que está en Internet, usted (el cliente) obtiene y carga datos (como imágenes de gatos) del servidor, así como también envía datos al servidor (¡ cargue imágenes de gatos moar! ) . entre el cliente y el servidor es la base de Internet.

Cualquier cosa a la que pueda acceder en su navegador es algo que creó un desarrollador web. Algunos ejemplos son los sitios web y blogs de pequeñas empresas en el lado más simple, hasta aplicaciones web muy complejas como AirBnb, Facebook y Twitter.

¿Cuál es la diferencia entre front-end y back-end?

Los términos desarrollador web "front-end", "back-end" y "full stack" describen con qué parte de la relación cliente / servidor está trabajando.

"Interfaz" significa que se trata principalmente del lado del cliente. Se llama "interfaz" porque es lo que puede ver en el navegador. Por el contrario, el "back-end" es la parte del sitio web que realmente no se puede ver, pero maneja gran parte de la lógica y la funcionalidad necesarias para que todo funcione.

Una forma de pensar en esto es que el desarrollo web de front-end es como la parte "frontal de la casa" de un restaurante. Es la sección donde los clientes vienen a ver y experimentar el restaurante: la decoración interior, los asientos y, por supuesto, la comida.

Por otro lado, el desarrollo web de back-end es como la parte "trasera de la casa" del restaurante. Es donde se gestionan las entregas y el inventario, y ocurre todo el proceso para crear los alimentos. Hay muchas cosas detrás de escena que los clientes no verán, pero experimentarán (y con suerte disfrutarán) el producto final: ¡una comida deliciosa!

Dejando a un lado las ilustraciones divertidas, tanto el desarrollo web frontal como el back-end cumplen funciones diferentes pero muy importantes.

Usando un editor de código

Cuando crea un sitio web, la herramienta más esencial que utilizará es su editor de código o IDE (entorno de desarrollo integrado). Esta herramienta le permite escribir el marcado y el código que compondrán el sitio web.

Hay bastantes buenas opciones, pero actualmente el editor de código más popular es VS Code. VS Code es una versión más ligera de Visual Studio, el IDE principal de Microsoft. Es rápido, gratuito, fácil de usar y puede personalizarlo con temas y extensiones.

Otros editores de código son Sublime Text, Atom y Vim.

Sin embargo, si recién está comenzando, le recomiendo que consulte VS Code, que puede descargar de su sitio web.

Ahora que hemos cubierto algunos de los conceptos más amplios de lo que es el desarrollo web, entremos en más detalles, comenzando por la interfaz.

2: Interfaz básica

El front-end de un sitio web se compone de tres tipos de archivos: HTML, CSS y JavaScript. Estos archivos son los que se cargan en el navegador, en el lado del cliente.

Echemos un vistazo más de cerca a cada uno de ellos.

HTML

HTML, o HyperText Markup Language, es la base de todos los sitios web. Es el tipo de archivo principal que se carga en su navegador cuando mira un sitio web. El archivo HTML contiene todo el contenido de la página y usa etiquetas para indicar diferentes tipos de contenido.

Por ejemplo, puede utilizar etiquetas para crear títulos de titulares, párrafos, listas con viñetas, imágenes, etc. Las etiquetas HTML por sí mismas tienen algunos estilos adjuntos, pero son bastante básicos, como lo que vería en un documento de Word.

CSS

CSS, o Hojas de estilo en cascada, le permite diseñar ese contenido HTML para que se vea agradable y elegante. Puede agregar colores, fuentes personalizadas y diseñar los elementos de su sitio web como desee que se vean. ¡Incluso puedes crear animaciones y formas con CSS!

CSS tiene mucha profundidad y, a veces, la gente tiende a pasarlo por alto para poder pasar a cosas como JavaScript. Sin embargo, no puedo sobrestimar la importancia de comprender cómo convertir un diseño en un diseño de sitio web usando CSS. Si desea especializarse en el front-end, es esencial tener habilidades de CSS realmente sólidas.

JavaScript

JavaScript es un lenguaje de programación que fue diseñado para ejecutarse en el navegador. Con JavaScript, puede hacer que su sitio web sea dinámico, lo que significa que responderá a diferentes entradas del usuario u otras fuentes.

Por ejemplo, puede crear un botón "Volver al principio" que cuando el usuario haga clic en él, se desplazará hacia la parte superior de la página. O puede crear un widget del tiempo que muestre el tiempo de hoy según la ubicación del usuario en el mundo.

Especialmente si desea desarrollar sus habilidades más adelante con un marco de JavaScript como React, comprenderá más si se toma el tiempo para aprender primero el JavaScript estándar. Es un idioma muy divertido de aprender, ¡y hay mucho que puedes hacer con él!

Dónde aprender HTML, CSS y JavaScript

A menudo me preguntan cuáles son los mejores lugares para aprender a codificar y, por lo general, les diré algunos de los siguientes recursos. Además, tengo una lista más detallada de los mejores cursos para aprender sobre desarrollo web en mi blog. ¡Puede que te resulte útil!

Nota : Algunos de los enlaces a continuación (los de cursos y libros pagados) son enlaces de afiliados, lo que significa que obtendré una comisión si compra a través de ellos sin costo adicional para usted. ¡Es una forma de ayudarme a crear recursos útiles como este!

freeCodeCamp

Uno de mis lugares favoritos para recomendar es freeCodeCamp. ¡Es un bootcamp de codificación en línea sin fines de lucro y completamente gratuito! Me encanta esta opción porque si eres un principiante y no estás completamente seguro de si la codificación es para ti, es una forma de baja presión y sin riesgos para ver si te gusta.

Una desventaja de freeCodeCamp es que si bien tienen un plan de estudios increíble con un entorno de codificación incorporado, no tienen videos estructurados como parte de él.

Entonces, si realmente le gusta aprender de los videos, aquí hay algunas otras opciones:

Team Treehouse

Team Treehouse es una plataforma de aprendizaje en línea premium que se basa en videos y tiene múltiples pistas que puede seguir. Incluso tienen un programa de grado técnico en línea que es como un campo de entrenamiento en línea que puede completar en 4-5 meses.

Desafortunadamente, Treehouse no es gratis, pero tienen diferentes planes mensuales o anuales según su presupuesto. Tienen una prueba gratuita de 7 días para que pueda ver si le gusta, y también puedo ofrecerle una oferta en la que puede obtener un descuento de $ 100 en 1 año de su Plan Básico. Si está bastante seguro de que quiere dedicarse al desarrollo web, Team Treehouse es un gran lugar para aprender.

Si eres más fanático de los cursos de video únicos, hay algunas opciones gratuitas y de pago:

Wes Bos

Wes Bos tiene cursos gratuitos sobre el aprendizaje de Flexbox, CSS Grid y JavaScript que son excelentes. Acabo de pasar por su curso CSS Grid, y fue muy completo y divertido. ¡Wes es un gran maestro!

Udemy

Udemy es una plataforma de aprendizaje en línea con muchos cursos excelentes. Uno en particular que le puede gustar es el curso Advanced CSS y Sass de Jonas Schmedtmann. Este curso pago cubre cuadrícula CSS, flexbox, diseño receptivo y otros temas de CSS.

Youtube

También hay un montón de recursos de video gratuitos en YouTube:

Traversy Media, probablemente el canal de desarrollo web más grande que existe, tiene un curso intensivo de HTML y un curso intensivo de CSS.

DesignCourse, un canal centrado en el diseño web y front-end, también tiene un tutorial de HTML y CSS.

Y freeCodeCamp tiene su propio canal de YouTube, con videos como un curso Learn JavaScript y otros cursos en profundidad.

Libros y artículos sobre desarrollo web

Si eres más una persona de lectura, te recomiendo encarecidamente lo siguiente:

Los libros increíblemente populares de Jon Duckett, sobre HTML y CSS, y JavaScript y jQuery. Estos libros no son sus libros de texto densos y corrientes en absoluto. Están bellamente diseñados, muy bien escritos y tienen muchas fotos e imágenes para ayudar a enseñar el material.

Eloquent JavaScript es otro libro que me gusta mucho. Puede leerlo gratis en su sitio web o comprar una copia en papel en Amazon si le gustan los libros físicos. Yo mismo tengo este, ¡y realmente me gusta!

Si desea ver más recomendaciones de libros, consulte mi publicación sobre libros recomendados para aprender sobre desarrollo web.

Y por último, pero no menos importante, algunos sitios web que tienen excelentes artículos y otros recursos son:

• Red de desarrolladores de Mozilla
• Trucos CSS
• Revista Smashing

3: herramientas

Entremos ahora en otras tecnologías de front-end. Como mencionamos, HTML, CSS y JavaScript son los componentes básicos del desarrollo web front-end. Además de ellos, hay algunas otras herramientas que querrá aprender.

Administradores de paquetes

Los administradores de paquetes son colecciones de software en línea, en gran parte de código abierto. Cada pieza de software, llamada paquete, está disponible para que la instale y utilice en sus propios proyectos.

Puede pensar en ellos como complementos; en lugar de escribir todo desde cero, puede usar utilidades útiles que otras personas ya han escrito.

El administrador de paquetes más popular se llama npm, o Node Package Manager, pero también puede usar otro administrador llamado Yarn. Ambas son buenas opciones para conocer y usar, aunque probablemente sea mejor comenzar con npm.

Si tiene curiosidad por obtener más información, puede leer este artículo sobre los conceptos básicos del uso de npm.

Construir herramientas

Los paquetes de módulos y las herramientas de compilación como Webpack, Gulp o Parcel son otra parte esencial del flujo de trabajo de front-end.

En un nivel básico, estas herramientas ejecutan tareas y procesan archivos. Puede usarlos para compilar sus archivos Sass en CSS, transpilar sus archivos JavaScript ES6 a ES5 para una mejor compatibilidad con el navegador, ejecutar un servidor web local y muchas otras tareas útiles.

Gulp , técnicamente un ejecutor de tareas, tiene un conjunto de paquetes npm que puede usar para compilar y procesar sus archivos.

Webpack es un paquete súper poderoso que puede hacer todo lo que puede hacer Gulp y más. Se usa mucho en entornos JavaScript, particularmente con JavaScript Frameworks (que veremos en un momento). Una desventaja de Webpack es que requiere mucha configuración para comenzar a funcionar, lo que puede ser frustrante.

Parcel es un paquete más nuevo como Webpack, pero viene preconfigurado de fábrica, por lo que, literalmente, puede ponerlo en marcha en solo unos minutos. Y no tendrá que preocuparse tanto por configurar todo.

Personalmente, me gusta usar Gulp para mis propios flujos de trabajo de front-end donde solo quiero compilar mis archivos Sass y JavaScript y no hacer mucho más.

Enlaces Útiles

Si está interesado en Gulp o Parcel, tengo tutoriales para ambos:

• Usando Gulp 4 en su flujo de trabajo
• Guía de inicio rápido de Parcel

Si desea obtener más información sobre Webpack, consulte los siguientes videos de YouTube:

• Curso intensivo en Webpack por DesignCourse
• Serie de 10 partes en Webpack por Colt Steele

Control de versiones

El control de versiones (también llamado control de código fuente) es un sistema que realiza un seguimiento de cada cambio de código que realiza en los archivos de su proyecto. Incluso puede volver a un cambio anterior si comete un error. Es casi como tener infinitos puntos de guardado para tu proyecto y déjame decirte que puede ser un gran salvavidas.

El sistema de control de versiones más popular es un sistema de código abierto llamado Git. Con Git, puede almacenar todos sus archivos y su historial de cambios en colecciones llamadas repositorios.

Es posible que también haya oído hablar de GitHub, que es una empresa de alojamiento en línea propiedad de Microsoft donde puede almacenar todos sus repositorios de Git.

Para aprender Git y GitHub, GitHub.com tiene algunas guías en línea que explican cómo comenzar a funcionar. Traversy Media también tiene un video de YouTube que explica cómo funciona Git.

4a: interfaz adicional

Una vez que tenga los conceptos básicos del front-end, hay algunas habilidades intermedias más que querrá aprender. Te recomiendo que mires lo siguiente: Sass, diseño receptivo y un marco de JavaScript.

Hablar con descaro a

Sass es una extensión de CSS que hace que los estilos de escritura sean más intuitivos y modulares. Es una herramienta realmente poderosa. Con Sass, puede dividir sus estilos en varios archivos para una mejor organización, crear variables para almacenar colores y fuentes, y usar combinaciones y marcadores de posición para reutilizar estilos fácilmente.

Incluso si solo utiliza algunas de las funciones básicas, como anidar, podrá escribir sus estilos más rápidamente y con menos dolor de cabeza.

Puede obtener más información sobre Sass en este tutorial de Scotch.io, así como en un video de YouTube de Dev Ed.

Diseño de respuesta

El diseño receptivo garantiza que sus estilos se vean bien en todos los dispositivos: computadoras de escritorio, tabletas y teléfonos móviles. Las prácticas principales del diseño receptivo incluyen el uso de tamaños flexibles para los elementos, así como la utilización de consultas de medios para orientar estilos para dispositivos y anchos específicos.

Por ejemplo, en lugar de configurar su contenido para que tenga un ancho estático de 400 px, puede usar una consulta de medios y configurar el contenido para que tenga un 50% de ancho en computadoras de escritorio y 100% en dispositivos móviles.

La construcción de sus sitios web con CSS receptivo es una necesidad en estos días, ya que el tráfico móvil está superando el tráfico de escritorio en muchos casos.

Para obtener más información sobre el diseño receptivo y cómo hacer que sus sitios web respondan, consulte este artículo. ¡También hago transmisiones de codificación en vivo en mi canal de YouTube donde creo un sitio web desde cero y los espectadores pueden hacerme preguntas en tiempo real!

Marcos de JavaScript

Una vez que tenga los conceptos básicos de JavaScript vanilla, es posible que desee aprender uno de los marcos de JavaScript (especialmente si desea ser un desarrollador de JavaScript de pila completa).

Estos marcos vienen con estructuras y componentes prediseñados que le permiten crear aplicaciones más rápidamente que si comenzara desde cero.

Actualmente, tiene tres opciones principales: React, Angular y Vue.

React (técnicamente una biblioteca), fue creado por Facebook y es el marco más popular en este momento. Puede comenzar a aprender yendo al sitio web de React.js. Si está interesado en un curso de React premium, tanto Tyler McGinnins como Wes Bos tienen excelentes cursos.

Angular fue el primer gran marco y fue creado por Google. Sigue siendo muy popular, a pesar de que React lo ha superado recientemente. Puede comenzar a aprender Angular en su sitio web. Gary de DesignCourse también tiene un curso intensivo de Angular en YouTube.

Vue es un marco más nuevo creado por Evan You, un ex desarrollador de Angular. Si bien es más pequeño en uso que React y Angular, está creciendo rápidamente y también se considera fácil y divertido de usar. Puede comenzar a usarlo en el sitio web de Vue.

¿Qué marco debería aprender?

Es posible que se esté preguntando ahora: "Ok, bueno, ¿qué marco es el mejor?"

La verdad es que todos son buenos. En el desarrollo web, casi nunca hay una sola opción que sea 100% la mejor opción para cada persona y cada situación.

Lo más probable es que su elección esté determinada por su trabajo, o simplemente por cuál le gusta más usar. Si su objetivo final es conseguir un trabajo, intente investigar qué marco parece ser el más común en las posibles ofertas de trabajo.

No se preocupe demasiado por qué marco elegir. Es más importante que aprenda y comprenda los conceptos detrás de ellos. Además, una vez que aprenda un marco, será más fácil aprender otros (similares a los lenguajes de programación).

Pasemos ahora a nuestra última sección: ¡desarrollo web back-end!

4b: back-end básico

El back-end, o el lado del servidor del desarrollo web, se compone de tres componentes principales: el servidor, un lenguaje de programación del lado del servidor y la base de datos.

Servidor

Como mencionamos al principio, el servidor es la computadora donde se almacenan todos los archivos del sitio web, la base de datos y otros componentes.

Los servidores tradicionales se ejecutan en sistemas operativos como Linux o Windows. Se consideran "centralizados" porque todo: los archivos del sitio web, el código de back-end y los datos se almacenan juntos en el servidor.

Hoy en día también existen arquitecturas sin servidor, que es un tipo de configuración más descentralizada. Este tipo de aplicación divide esos componentes y aprovecha a los proveedores externos para manejar cada uno de ellos.

Sin embargo, a pesar del nombre, todavía necesita algún tipo de servidor, para al menos almacenar los archivos de su sitio web. Algunos ejemplos de proveedores sin servidor son AWS (Amazon Web Services) o Netlify.

Las configuraciones sin servidor son populares porque son rápidas, económicas y no necesita preocuparse por el mantenimiento del servidor. Son excelentes para sitios web estáticos simples que no requieren un lenguaje tradicional del lado del servidor. Sin embargo, para aplicaciones muy complejas, la configuración del servidor tradicional podría ser una mejor opción.

Para obtener más información sobre las configuraciones sin servidor, Netlify tiene una publicación de blog informativa que lo guía a través de todos los pasos para configurar un sitio web estático con implementación.

Lenguaje de programación

En el servidor, debe utilizar un lenguaje de programación para escribir las funciones y la lógica de su aplicación. Luego, el servidor compila su código y transmite el resultado al cliente.

Los lenguajes de programación populares para la web incluyen PHP, Python, Ruby, C # y Java. También existe una forma de JavaScript del lado del servidor: Node.js, que es un entorno de tiempo de ejecución que puede ejecutar código JavaScript en el servidor.

También hay marcos que puede usar con cada uno de estos lenguajes del lado del servidor. Al igual que los marcos de JavaScript de front-end, estos marcos de back-end son herramientas útiles que hacen que la creación de aplicaciones web sea mucho más rápida.

Veamos una lista de los lenguajes de programación más utilizados para el desarrollo web:

C#

C # se desarrolló como competidor de Microsoft para Java. Se utiliza para crear aplicaciones web con .NET framework, desarrollo de juegos e incluso se puede utilizar para crear aplicaciones móviles.

Lugares para aprender C #: ‌‌C # Programming Yellow Book de Rob Miles‌‌C # Conceptos básicos en Udemy

Java

Java es uno de los lenguajes de programación más populares y se utiliza en aplicaciones web, así como para crear aplicaciones de Android.

Lugares para aprender Java: ‌‌University of Helsinki MOOC‌‌The Complete Java Developer Course on Udemy

Node.js

Node.js es una tecnología muy popular (según la encuesta de desarrolladores de Stack Overflow de 2019). Una cosa a tener en cuenta: técnicamente no es un lenguaje del lado del servidor, es una forma de JavaScript que se ejecuta en el servidor utilizando el marco Express.js.

Lugares para aprender Node.js: ‌‌ Tutorial de Node.js de Programming with Mosh‌‌Learn Node de Wes Bos

PHP

PHP es el lenguaje que utiliza WordPress, por lo que esta podría ser una buena opción si cree que trabajará con sitios web de pequeñas empresas, ya que muchos de ellos usan WordPress. También puede crear aplicaciones web con el marco de Laravel.

Lugares para aprender PHP: ‌‌Introducción a PHP por mmtuts‌‌PHP por Edwin Diaz en Udemy

Pitón

Python está ganando popularidad, especialmente porque se utiliza en ciencia de datos y aprendizaje automático. También se considera bueno, ya que su sintaxis es más simple que la de otros idiomas. Si desea crear aplicaciones web, puede usar los marcos Django o Flask.

Lugares para aprender Python: ‌‌The Modern Python 3 Bootcamp por Colt Steele en Udemy‌‌LearnPython.org

Rubí

Ruby es otro idioma que tiene una sintaxis que se considera fácil de aprender. Puede crear aplicaciones web con el marco Ruby on Rails.

Lugares para aprender Ruby: ‌‌The Odin Project‌‌Ruby on Rails Tutorial de Michael Hartl

Al igual que con los marcos de JavaScript, no existe el mejor lenguaje de programación número uno. Su elección debe basarse en sus intereses y preferencias personales, así como en los trabajos potenciales, así que investigue un poco cuál podría ser una buena opción para usted .

Bases de datos

Las bases de datos, como su nombre lo indica, son los lugares donde almacena información para su sitio web. La mayoría de las bases de datos utilizan un lenguaje llamado SQL (pronunciado "secuela") que significa "Lenguaje de consulta estructurado".

En la base de datos, los datos se almacenan en tablas, con filas como documentos complejos de Excel. Luego, puede escribir consultas en SQL para crear, leer, actualizar y eliminar datos.

La base de datos se ejecuta en el servidor, utilizando servidores como Microsoft SQL Server en servidores Windows y MySQL para Linux.

También existen bases de datos NoSQL, que almacenan los datos en archivos JSON a diferencia de las tablas tradicionales. Un tipo de base de datos NoSQL es MongoDB, que se usa a menudo con aplicaciones React, Angular y Vue.

Algunos ejemplos de cómo se utilizan los datos en los sitios web son:

Si tiene un formulario de contacto en su sitio web, puede crear el formulario de modo que cada vez que alguien envíe el formulario, sus datos se guarden en su base de datos.

También puede iniciar sesión como usuario en la base de datos y escribir lógica en el idioma del lado del servidor para controlar y autenticar las conexiones.

Algunos recursos para aprender los conceptos básicos de SQL son:

• El Bootcamp completo de SQL de Jose Portilla en Udemy
• SQLBolt

Algunos consejos para dejarte con ...

¡Gracias por leer! Espero sinceramente que esta guía le ayude a empezar a aprender sobre desarrollo web.

Algunos consejos que tengo si vas por la ruta autodidacta:

1. No intente aprender todo a la vez. Elija una habilidad para aprender a la vez.
2. No salte de un tutorial a otro. A medida que aprende, está bien consultar diferentes recursos para ver cuál le gusta más. Pero nuevamente, elija uno e intente recorrerlo hasta el final.
3. Sepa que aprender desarrollo web es un viaje a largo plazo. A pesar de las historias que puede haber leído sobre personas que pasaron de cero a conseguir un trabajo de desarrollador web en 3 meses, apuntaría más a 1 o 2 años para estar listo para el trabajo, si está comenzando desde el principio.
4. El solo hecho de ver un curso en video o leer un libro no lo convertirá automáticamente en un experto. Aprender el material es solo el primer paso. Crear sitios web y proyectos reales (incluso solo demostraciones para usted) le ayudará a cimentar realmente su aprendizaje.

¡Mucha suerte al comenzar a aprender sobre desarrollo web! Si está interesado en más, consulte este artículo en mi blog: Aprenda desarrollo web como un principiante absoluto.

Quieres seguirme

Publico mini-consejos sobre desarrollo web en Instagram y Twitter, y creo videos tutoriales de codificación en YouTube.