Jorge Torres Torres - freeCodeCamp.org

Cómo aprender a programar: La guía que desearía haber tenido cuando empecé a aprender a programar

Jorge Torres Torres — Wed, 08 Mar 2023 19:53:26 +0000

Artículo original: How to Learn Programming – The Guide I Wish I Had When I Started Learning to Code

Solo el pensamiento de aprender a programar puede ser muy intimidante. La palabra programar es misteriosa por definición. Eso implica una forma técnica comunicación que las computadoras, y no los humanos, deben entender.

Una forma en que muchas personas empiezan a programar es eligiendo un lenguaje de programación popular y saltando de cabeza sin dirección. Esto podría ser haciendo un curso de programación en línea, un proyecto de tutorial, o una compra aleatoria de un libro sobre un tema en específico.

Rara vez los posibles desarrolladores comienzan con una ruta de aprendizaje -una vista panorámica del mundo de la codificación que describe un conjunto de conceptos, lenguajes y herramientas de programación relevantes que casi el 100% de los desarrolladores usan todos los días.

En este artículo, propongo una de esas rutas de aprendizaje. Hago esto describiendo 14 pasos, cada uno de los cuales analiza un concepto, lenguaje o herramienta esencial, que los desarrolladores profesionales usan para escribir código, colaborar y crear proyectos profesionales.

Elegí meticulosamente estos 14 pasos en función de mi propio viaje personal aprendiendo a programar, que abarca casi 20 años.

Parte de la razón por la que me tomó tanto tiempo sentirme cómodo como desarrollador es que aprendía sobre temas específicos sin un contexto más amplio del mundo de la programación.

Cada uno de los pasos de este artículo analiza un "esenciales de programación", algo que creo que es fundamental para al menos saber que existe al comienzo de tu viaje de aprendizaje de programación.

Una nota final antes de enumerar los pasos en la hoja de ruta: por supuesto, leer este artículo no te convertirá en unprogramador o programadora experto(a).

No está destinado a ser así. El propósito de este artículo es informarte que cada uno de estos temas existe y, con suerte, darte una idea básica de cómo funciona cada uno para que puedas desarrollarlos de manera inteligente en el futuro.

14 Pasos en la ruta de aprendizaje para Desarrolladores principiantes

Familiarízate con Computer Architecture y Básicos de Base de Datos
Aprende como trabajan los lenguajes de Programación
Comprende como funciona el Internet
Practica básica de la Línea de Comandos
Incrementa tus habilidades en el Editor de Texto con VIM
Aprende algo de HTML
Abordar algo de CSS
Empieza a Programar con JavaScript
Continua Programando con Python
Amplia tu conocimiento con Java
Rastrea tu Código usando Git
Guarda Datos usando Base de Datos y SQL
Leer sobre Web Frameworks y MVC
Jugando con Administradores de Paquetes

Sin más preámbulo, empecemos por lo primero.

1) Familiarízate con Arquitectura Computacional y Básicos de Datos

Una de las cosas más maravillosas de los lenguajes de programación modernos es que nos permiten crear aplicaciones sofisticadas sin preocuparnos sobre los detalles medulares del hardware detrás de las escenas (en su mayor parte).

Esto es llamado Abstracción – La habilidad de trabajar con herramientas de niveles altos (en este caso los lenguajes de programación) que simplifican y disminuyen el ámbito requerido de nuestra comprensión y habilidades.

Sin embargo, eso no significa que no sea de utilidad saber los básicos de la estructura que tu código está ejecutando. Y al final, estar consciente de algunas cosas que te ayudan a navegar en tus conversaciones en el lugar de trabajo sobre el elevado uso de la CPU y memoria.

Así que aquí hay un mínimo de arquitectura computacional para que empieces.

La parte más importante de tu computadora son los microchips (también conocidos como circuitos integrados).

Los microchips dependen para funcionar de un componente eléctrico llamado transistor. Los transistores son pequeños interruptores eléctricos que están apagados (0) o encendidos (1) en un momento dado. Un solo microchip puede contener millones o miles de millones de diminutos transistores incrustados en él.

Las computadoras más modernas tienen un procesador llamado Unidad Central de Procesamiento (CPU, Central Processing Unit ). Puedes comparar a la computadora con un cerebro. Maneja la mayoría de las tareas lógicas y de procesamiento de números que realiza la computadora.

Cada CPU tiene algo llamado conjunto de instrucciones, que es una colección de comandos binarios (ceros y unos) que la CPU entiende. Afortunadamente, ¡No es realmente necesario preocuparnos por esto como desarrolladores de software! Ese es el poder de la abstracción.

Si la CPU es el centro lógico del cerebro, es útil tener una memoria para guardar la información temporalmente o a largo plazo.

Las computadoras tienen Random Access Memory (RAM) como "memoria de trabajo" (o memoria de corto plazo) para guardar información que se usa de forma activa por programas abiertos.

La RAM se compone de una colección de direcciones de memoria, que se pueden utilizar para almacenar bits de datos. En lenguajes más antiguos como C, los programadores tienen acceso para trabajar directamente con direcciones de memoria usando una característica llamada punteros, pero esto es raro en lenguajes más modernos.

Finalmente, hablaremos de un componente con el que seguramente está familiarizado: el disco duro. En nuestra analogía del cerebro, esto representa la memoria a largo plazo. Un disco duro es un dispositivo interno o externo que almacena datos que deberían persistir incluso después de apagar la computadora.

Antes de pasar a más detalles sobre los lenguajes de programación, dediquemos un segundo a hablar sobre los datos. Pero, ¿qué queremos decir exactamente con la palabra datos?

En un nivel alto, pensamos en cosas como documentos de texto, imágenes, videos, correos electrónicos, archivos y carpetas. Todas estas son estructuras de datos de alto nivel que creamos y guardamos en nuestras computadoras todos los días.

Pero debajo de la cubierta, un chip de computadora (como un chip de CPU o RAM) no tiene idea de qué es una "imágen" o un "video".

Desde la perspectiva de un chip, todas estas estructuras se almacenan como largas secuencias de unos y ceros. Estos unos y ceros se llaman bits.

Los bits se almacenan comúnmente en un conjunto de ocho a la vez, conocido como byte. Un byte es simplemente una secuencia de ocho bits, como 00000001, 01100110, o 00001111. Representar la información de esta manera se llama representación binaria.

2)Aprende cómo funcionan los Lenguajes de Programación

En la sección anterior, mencionamos que la mayoría de las computadoras dependen de una CPU, y una CPU puede comprender un conjunto específico de instrucciones en forma de unos y ceros.

Por lo tanto, teóricamente podríamos escribir código que le diga a la CPU qué hacer al unir largas secuencias de unos y ceros en una forma que la CPU entienda. Las instrucciones escritas en forma binaria como esta se llaman código de máquina.

Suena horrible trabajar con él, ¿no? Bueno, probablemente lo sea, pero no lo sabría ya que principalmente uso lenguajes de programación de alto nivel como JavaScript, Python y Java.

Un lenguaje de programación de alto nivel proporciona un conjunto de palabras clave, declaraciones, y reglas de sintaxis legibles por humanos que son mucho más simples para que las personas aprendan, depuren y trabajen.

Los lenguajes de programación proporcionan un medio para cerrar la brecha entre la forma en que nuestros cerebros humanos entienden el mundo y la forma en que los cerebros de las computadoras (CPU) entienden el mundo.

En última instancia, el código que escribimos debe traducirse a las instrucciones binarias (código de máquina) que comprende la CPU.

Según el lenguaje que elijas, decimos que su código se compila o se interpreta en un código de máquina capaz de ser ejecutado por su CPU. La mayoría de los lenguajes de programación incluyen un programa llamado compilador o intérprete que realiza este paso de traducción.

Solo para dar algunos ejemplos: JavaScript y Python son lenguajes interpretados, mientras que Java es un lenguaje compilado. El hecho de que un lenguaje sea compilado o interpretado (o alguna combinación de ambos) tiene implicaciones para la conveniencia del desarrollador, el manejo de errores, el rendimiento y otras áreas, pero no entraremos en esos detalles aquí.

3)Comprende cómo funciona el Internet

Cualquiera que sea el tipo de programación que te gustaría hacer, te encontrarás con situaciones en las que será útil saber cómo interactúan las computadoras entre sí. Esto suele ocurrir a través de Internet.

Internet no es más que una colección global de computadoras conectadas. En otras palabras, es una red global. Cada computadora en la red acuerda un conjunto de reglas que les permiten comunicarse entre sí. Para una computadora, "hablar" significa transferir datos.

Como discutimos en la sección anterior, todos los tipos de datos (páginas web, imágenes, videos, correos electrónicos, etc.) se pueden representar como unos y ceros.

Por lo tanto, podemos pensar en el Internet como un conjunto muy grande de computadoras que pueden transferir unos y ceros entre sí, de una manera que preserva el significado de esos datos. Internet no es más que un medio de conversación digital.

Si Internet es solo un gran escenario de conversación, definamos a los participantes de la conversación.

Primero, una analogía: la mayoría de las conversaciones humanas requieren al menos dos participantes. En la mayoría de los casos, una persona inicia la conversación y la otra responde, asumiendo que ambos están presentes y disponibles.

En la jerga de Internet, la computadora que inicia la conversación se llama cliente. La computadora que responde o contesta se llama servidor.

Por ejemplo, supongamos que abres un navegador web y accede a "www.google.com". En este escenario, tu navegador web es el cliente. Por extensión, también puedes pensar en la computadora en la que está trabajando como el cliente.

En un sentido más abstracto, TÚ eres el cliente porque es quien inicia la conversación. Al escribir "www.google.com" en la barra de búsqueda y hacer clic en , tu navegador solicita iniciar una conversación con una de las computadoras de Google.

La computadora de Google se llama el servidor. Responde enviando los datos necesarios para mostrar la página web de Google en tu navegador. ¡Y voilá! La página web de Google aparece frente a sus ojos. Todas las transferencias de datos por Internet utilizan este tipo de relación cliente/servidor.

4) Practica básica de la Línea de Comandos

La Línea de Comandos puede resultar intimidante a primera vista. A menudo aparece en las películas como una pantalla negra críptica con texto, números y símbolos incomprensibles que se desplazan. Por lo general, se asocia con un pirata informático malvado o un compañero genio de la tecnología.

La verdad es que no hace falta ser un genio para usar o entender la línea de comandos. De hecho, nos permite realizar muchas de las mismas tareas con las que nos sentimos cómodos mediante un ratón de apuntar y hacer clic.

La principal diferencia es que acepta principalmente entradas a través del teclado, lo que puede acelerar las entradas significativamente una vez que lo domines.

Puedes utilizar la línea de comandos para navegar por las carpetas, enumerar el contenido de una carpeta, crear nuevas carpetas, copiar y mover archivos, eliminar archivos, ejecutar programas y mucho más. La ventana en la que puedes escribir comandos en la línea de comandos se llama terminal.

Veamos un breve tutorial de comandos básicos de navegación que te dará una idea de cómo trabajar en la línea de comandos.

Una vez que abres tu terminal, una primera pregunta típica es "¿Dónde estoy?". Para averiguarlo podemos usar el comando pwd (que significa, "print working directory" o en español sería "Imprimir directorio de trabajo"). Muestra nuestra ubicación actual en el sistema de archivos que nos dice en qué carpeta nos encontramos actualmente.

Ahora te recomiendo intentarlo tú:

Como usar la Terminal de Línea de Comandos

Si estás en una Mac, abre la aplicación de la Terminal, que es esencialmente una terminal de línea de comandos de Unix.

Si está ejecutando un sistema operativo sin una GUI (interfaz gráfica de usuario), como Linux o Unix, debería estar en la línea de comandos de forma predeterminada cuando inicie la computadora. Si su sabor de Linux o Unix tiene una GUI, deberá abrir la terminal manualmente.

En el prompt, escribe pwd y presiona . La línea de comandos imprimirá la ruta a la carpeta en la que se encuentra actualmente.

De forma predeterminada, la carpeta activa al abrir la línea de comandos es el directorio de inicio del usuario que ha iniciado sesión. Esto se puede personalizar en caso de que desees la comodidad de comenzar en una ubicación diferente.

Para mayor comodidad, se puede hacer referencia al directorio de inicio utilizando el carácter de tilde ~. Usaremos esto en algunos ejemplos en el futuro.

Ahora que sabemos en cuál carpeta estamos, podemos usar el comando ls para enlistar el contenido del directorio actual. El comando ls viene de la palabra "List".

Escribe ls y presiona. Los contenidos (archivos y sub carpetas) que residen en el directorio actual se imprimen en la pantalla.

Vuelve a ejecutar los comandos anteriores así ls -al y presiona enter . Ahora obtendremos más detalles sobre el contenido del directorio, incluidos los tamaños de los archivos, las fechas de modificación y los permisos de los archivos.

El guion en el comando anterior nos permite establecer ciertos etiquetas que modifican el comportamiento del comando. En este caso, agregamos el indicador -a que enumerará todos los contenidos del directorio (incluidos los archivos ocultos), así como el indicador -l que muestra los detalles adicionales del archivo.

A continuación, podemos crear una nueva carpeta con el comando mkdir, que significa "Crear directorio". A continuación creamos una nueva carpeta llamada "testdir".

Escribe mkdir testdir y presiona. Después escribe ls y presiona . Deberías ver tu nuevo directorio en la lista.

Para crear varios directorios anidados a la vez, utiliza la etiqueta -p f para crear una cadena completa de directorios así: mkdir -p directory1/directory2/directory3

La línea de comandos no es tan útil si solo podemos permanecer en una ubicación, así que aprendamos cómo navegar a través de diferentes directorios en el sistema de archivos. Podemos hacer esto mediante el comando cd, que significa "Cambiar directorio".

Primero, escribe cd testdir y presiona . Después escribe pwd y presiona . Ten en cuenta que el resultado ahora muestra que estamos dentro del directorio "testdir" especificado en el comando cd. ¡Lo buscamos!

Escribe cd .. y presiona . Los dos puntos .. le indica a la Línea de Comandos para navegar hacia atrás al directorio principal.

Después escribe pwd y presiona . Nota como el resultado ahora muestra que está de vuelta en el directorio original. ¡Navegamos atrás!

A continuación, aprenderemos como crear un nuevo archivo vacío en el directorio actual.

Escribe touch newfile1.txt y presiona. Puedes usar el comando ls para ver que el nuevo archivo se creó en el directorio actual.

Ahora copiaremos ese archivo de una carpeta a otra usando el comando cp.

Escribe cp newfile1.txt testdir y presiona . Ahora usa los comandos ls y ls testdir para ver que el nuevo archivo aún existe en el directorio actual y se copió en el directorio "testdir".

También podemos mover archivos en lugar de copiarlos usando el comando mv .

Escribe touch newfile2.txt y presiona para crear un nuevo archivo.
A continuación, escribe mv newfile2.txt testdir y presiona para mover el archivo a la carpeta "testdir" .

Usa los comandos ls y ls testdir para confirmar que el archivo se ha movido a la carpeta "testdir" (ya no debería aparecer en la ubicación original en la que lo creó, ya que se movió, no se copió).

El comando mv también lo puedes usar para renombrar archivos.

Para hacer eso, escribe touch newfile3.txt y presionar para crear un nuevo archivo. Después escribe mv newfile3.txt cheese.txt y presiona para actualizar el nombre del archivo. Usa el comando ls para confirmar que el archivo fue renombrado.

Finalmente, podemos eliminar archivos y carpetas usando el comando rm .

Escribe rm cheese.txt y presiona para remover el archivo. Usa el comando ls para confirmar que el archivo fue removido.

Escribe rm -rf testdir y presiona para remover el directorio "testdir" y sus contenidos. Usa ls para confirmar que el directorio fue removido.

Toma en cuenta que debemos usar las etiquetas -rf al eliminar directorios. Eso fuerza la eliminación de la carpeta y todo su contenido.

5.Incrementa tus Habilidades en el Editor de Texto con Vim

En este punto, hemos cubierto los conceptos básicos de la línea de comandos y hemos visto algunos ejemplos de cómo podemos trabajar con archivos sin un ratón.

Aunque ahora sabemos cómo crear, copiar, mover, renombrar y eliminar archivos desde la línea de comandos, no hemos visto cómo editamos el contenido de los archivos de texto en la terminal.

Trabajar con archivos de texto en la terminal es importante porque el código de computadora no es más que texto guardado en un conjunto organizado de archivos.

Seguro que podríamos usar un editor de texto elegante como Microsoft Word (o probablemente editores de código especializados como Sublime o Atom) para escribir y editar nuestro código, pero esto no es obligatorio. La terminal suele ser el lugar más conveniente para escribir y editar código, ya que normalmente lo tenemos abierto para ejecutar comandos.

Hay varios editores de texto excelentes creados específicamente para este propósito, y recomiendo aprender los conceptos básicos de uno llamado Vim.

Vim es uno de los editores de texto más antiguos y es una joya probada en el tiempo. Vim viene de "VI iMproved" que significa "VI mejorado", ya que es el sucesor de una herramienta llamada Vi.

Como se mencionó anteriormente, Vim es un editor de texto que se creó para ejecutarse directamente en la terminal, por lo que no necesitamos abrir una ventana separada para trabajar o usar un ratón. Vim cuenta con un conjunto de comandos y modos que nos permiten crear y editar contenido de texto de manera conveniente usando solo el teclado.

Vim tiene una pequeña curva de aprendizaje, pero con un poco de práctica, las habilidades que aprendas te darán dividendos a lo largo de su carrera de tu carrera en programación.

Vim está instalado de forma predeterminada en muchos sistemas operativos. Para verificar si está instalado en tu computadora, abre la Línea de comandos y escribe vim -v.

Si Vim se abre en tu terminal y muestra la versión, ¡está listo! De lo contrario, deberás instalarlo en tu sistema. (Ten en cuenta que puedes salir de Vim escribiendo :!q y presionando ). Para obtener más información sobre la instalación de Vim, consulta https://vim.org.

En mi opinión, la forma más rápida y fácil de aprender a usar Vim es usar su tutorial integrado, el VimTutor. Para ejecutarlo, asegúrate de que Vim esté instalado en tu sistema, abre la Línea de Comandos, escribe vimtutor , y presiona .

Es un tutorial tan bueno que no hay motivo para que pierda el tiempo tratando de explicarlo aquí. Así que te recomiendo revisar el VimTutor, ¡ahora! Nos vemos en la siguiente sección.

Si aún tienes energía después de haber completado VimTutor, consulta estos 7 comandos de Vim que mejorarán drásticamente tu productividad a medida que comiences a usar Vim.

6) Aprende algo de HTML

Puedes pensar en HTML, abreviatura de HyperText Markup Language, como los huesos de una página web. Determina la estructura de la página especificando los elementos que deben mostrarse y el orden en que deben mostrarse.

Cada página web que has visitado alguna vez en tu navegador tiene algo de HTML asociado. Cuando visitas una página web, el servidor web que aloja la página web envía algo de HTML a tu navegador, y tu navegador luego lo lee y lo muestra para ti.

La mayoría de las páginas web contienen un conjunto de contenido bastante estandarizado, que incluye un título, contenido de texto, enlaces a imágenes, enlaces de navegación, encabezados y pies de página, y más. Toda esta información se almacena como HTML que define la estructura de la página.

Una cosa a tener en cuenta es que HTML no es técnicamente un lenguaje de programación, aunque a menudo se le conoce como "código HTML".

Como veremos más adelante, otros lenguajes de programación nos permiten escribir código que hace cosas, como ejecutar un conjunto de instrucciones en secuencia. HTML no hace nada. No ejecutamos ni ejecutamos HTML. HTML simplemente se encuentra allí en un archivo y espera a ser enviado a un navegador web que se lo mostrará al usuario final.

De hecho, HTML es básicamente solo datos. Son datos que definen cómo debe verse una página web, nada más.

Entonces, ¿cómo se escribe HTML? HTML utiliza un conjunto estándar de etiquetas (básicamente solo etiquetas) para identificar los elementos disponibles que componen una página web. Cada etiqueta se define mediante corchetes angulares.

Por ejemplo, la etiqueta de título se define así Título de mi Página y la etiqueta de párrafo se define así

Un montón de contenido de texto aleatorio.

Cada elemento HTML se compone de una etiqueta inicial y una etiqueta final. La etiqueta de inicio es solo la etiqueta de la etiqueta entre paréntesis angulares, como esta

Esto abre la nueva etiqueta HTML. La etiqueta final es esencialmente la misma, pero usa una barra diagonal después del primer paréntesis angular, para marcarlo como una etiqueta final:

Cualquier texto entre las dos etiquetas es el contenido real que mostrará la página.

Veamos un par de las etiquetas más comunes en uso. La primera es la etiqueta . Esto define el inicio de una página HTML. Una correspondiente etiqueta (ten en cuenta la barra inclinada) define el final de la página HTML. Cualquier contenido entre estas etiquetas será parte de la página.

La segunda es la etiqueta . Esto define información adicional que el navegador utilizará para comprender la página. La mayor parte del contenido de esta etiqueta no se muestra al usuario. La etiqueta correspondiente tag define el final de la sección HEAD.

Previamente, vimos la etiqueta </code> . t define el título de la página web, que el navegador mostrará en la pestaña del navegador. Esta etiqueta debe colocarse dentro de la sección <code><head>...</head></code> .</p><p>La etiqueta siguiente es <code><body></code>. Todo el contenido dentro de esta etiqueta constituye el contenido principal de la página web. Poner estas cuatro etiquetas juntas se parece a esto:</p><pre><code class="language-html"><html> <head> <title>Título de mi Página

Un montón de contenido de texto aleatorio

El fragmento HTML simple anterior representa una página web simple con un título y un solo párrafo como contenido del cuerpo.

Este ejemplo trae a colación un punto que no mencionamos en la última sección. Las etiquetas HTML se pueden anidar unas dentro de otras. Esto solo significa que las etiquetas HTML se pueden colocar dentro de otras etiquetas HTML.

HTML proporciona muchas otras etiquetas para brindar un rico conjunto de contenido a los usuarios de la web. No los cubriremos en detalle aquí, pero a continuación hay una breve lista de referencia:

: Un párrafo de texto que comienza en una nueva línea.A
: Un encabezado de página generalmente utilizado para títulos de página.
:Un encabezado de sección generalmente utilizado para títulos de sección.
: Donde x es un número entre 3 y 6, para encabezados más pequeños.
: Una imagen.
: Un enlace.
: Un formulario que contiene campos o entradas para que un usuario complete y envíe.
: Un campo de entrada para que los usuarios ingresen información, generalmente dentro de un formulario.
: Una división de contenido, utilizada para agrupar varios otros elementos con fines de espaciado.
: Otro elemento de agrupación, pero que se usa para envolver frases de texto dentro de otro elemento, generalmente para aplicar un formato específico solo a una parte específica del contenido del texto.

7) Abordar algo de CSS

Una página web sin CSS (Cascading Style Sheets), u hojas de estilo en cascada, en español, es como un pastel sin glaseado. Un pastel sin glaseado cumple su propósito, ¡pero no parece apetitoso!

CSS nos permite asociar propiedades de estilo como color de fondo, tamaño de fuente, ancho, alto y más con nuestros elementos HTML.

Cada propiedad de estilo le dice al navegador que represente el efecto deseado en la pantalla. Al igual que HTML, CSS no es técnicamente un lenguaje de programación. No nos permite realizar acciones, simplemente nos permite agregar estilos al HTML básico.

Veamos cómo asociar estilos CSS con nuestros elementos HTML. Hay tres piezas en este rompecabezas:

El Selector de CSS: Se utiliza para identificar el elemento o elementos HTML a los que queremos que se aplique el estilo.

el nombre de la propiedad de CSS: El nombre de la propiedad de estilo específica que queremos agregar a los elementos HTML coincidentes.

El nombre de la propiedad de CSS: El valor de la propiedad de estilo que queremos aplicar.

Aquí hay un ejemplo de cómo estas piezas se unen para establecer el color y el tamaño de fuente de un párrafo:

p {
  color: red;
  font-size: 12px;
}

Comencemos por el principio, antes de las llaves. Aquí es donde va el selector de CSS. En este caso, es la letra p la que indica la etiqueta de HTML

(párrafo) . Esto significa que los estilos dentro de las llaves se aplicarán a todas las etiquetas

en la página web.

Pasemos a lo que va dentro de las llaves: los estilos que queremos aplicar a los elementos de destino.

Aquí encontramos pares de propiedades y valores CSS, separados por dos puntos. La propiedad (en este caso "color" y "font-size") están en la izquierda. Los valores de estas propiedades (en este caso "red" "12px") están del lado derecho. Un punto y coma termina cada par propiedad/valor.

Probablemente puedas ver cómo funciona esto. Los fragmentos de código CSS anteriores le indican al navegador que use letras rojas de tamaño 12px para todo el texto colocado dentro de las etiquetas

Entonces, ¿cómo sabe una página HTML que debe incluir estos estilos CSS? Ingresa la etiqueta de HTML . Por lo general, los estilos CSS se crean en archivos separados (archivos .css) del HTML. Esto significa que necesitamos alguna forma de importarlos a nuestros archivos HTML para que el navegador sepa que los estilos existen.

El elemento existe con este propósito. Incluimos los elementos en la sección de los archivos que nos permiten especificar los archivos CSS externos para importar:



    Título de mi Páginaga

En este ejemplo, estamos importando los estilos CSS especificados por el atributo href, en este caso el archivo /home/style.css.

¡En las próximas 3 secciones, (finalmente) nos sumergiremos en algunos lenguajes de programación más técnicos!

Repasaremos una descripción general de JavaScript, Python y Java, así como algunos de los conceptos de codificación esenciales comunes a los 3 lenguajes. Compararemos y contrastaremos las características del lenguaje y el código de ejemplo para que pueda obtener una comprensión completa de los conceptos básicos de los tres.

8) Empezar a Programar con JavaScript

Comencemos respondiendo la siguiente pregunta: si podemos usar HTML para construir la estructura de una página web y CSS para que se vea bonita, ¿por qué necesitamos JavaScript?

La respuesta es que técnicamente no lo hacemos. Si estamos contentos con un sitio estático que se sienta allí y se ve bonito, estamos listos para usar solo HTML y CSS.

La palabra clave aquí es "estático". Sin embargo, si queremos agregar funciones dinámicas a nuestras páginas web, como cambiar el contenido e interacciones de usuario más complejas, necesitamos usar JavaScript.

¿Qué es JavaScript?

Entonces, ¿qué es exactamente JavaScript? JavaScript es un lenguaje de programación creado específicamente para sitios web e Internet. Como mencionamos en la sección 2, la mayoría de los lenguajes de programación se compilan o interpretan, y los programas generalmente se ejecutan de manera independiente.

JavaScript es algo único a este respecto, ya que fue diseñado para ejecutarse directamente dentro de los navegadores web. Nos permite escribir código que representa conjuntos de acciones que se ejecutarán en nuestras páginas web para hacer que nuestros sitios sean mucho más dinámicos.

Puedes escribir código JavaScript en archivos de texto nombrados con una extensión .js o dentro de la etiqueta

Esto cargará el código JavaScript del archivo, que se ejecutará cuando la página web se muestre en el navegador.

Una vez que sientas más confianza con con tus habilidades de JavaScript, puedes intentar construir algunos de estos divertidos proyectos para principiantes para practicar.

9)Continua Programando con Python

Ahora que has aprendido algo de JavaScript básico, será útil saltar a otro lenguaje de programación: Python

Muchos lenguajes de programación proporcionan un conjunto similar de funciones, incluidas variables, operadores aritméticos, declaraciones if/else, bucles y funciones.

Es útil ver cómo diferentes lenguajes de programación implementan funciones similares. Los conceptos suelen ser muy similares, pero la sintaxis (la forma en que se escribe el código) varía de un idioma a otro.

Qué es Python?

Primero cubriremos un poco de información básica sobre Python. Al igual que JavaScript, Python es un lenguaje de programación de alto nivel que prioriza la facilidad de desarrollo sobre la velocidad de ejecución.

En mi opinión, Python es uno de los mejores lenguajes para principiantes. La sintaxis es limpia e intuitiva y es un lenguaje muy popular en las esferas empresarial y de código abierto.

Anteriormente hablamos de lenguajes compilados versus lenguajes interpretados. Python es un lenguaje interpretado. Cada vez que queremos ejecutar un programa en Python, el interpretador de Python procesa activamente su código y lo ejecuta línea por línea en su máquina.

Esto es diferente a los lenguajes compilados, en los que primero usaríamos un compilador para procesar el código en una forma más optimizada (un ejecutable) y luego lo ejecutaríamos más tarde.

A diferencia de JavaScript, Python no se creó para ejecutarse directamente dentro de los navegadores web. Python fue creado para ser un lenguaje de secuencias de comandos conveniente, un lenguaje que se puede usar para escribir código para tareas arbitrarias que generalmente se ejecutan en la computadora local de un usuario.

El código de Python se puede ejecutar en cualquier computadora que tenga instalado el intérprete de Python. Todavía es un lenguaje de secuencias de comandos de uso común, pero también se usa ampliamente para la ciencia de datos y las aplicaciones del lado del servidor.

Variables y Asignación en Python

Like JavaScript, Python allows us to define variables. In Python we can simply use the equals sign to create and assign variables as needed:

x = 10
y = "cheese"

Hay dos diferencias entre la sintaxis para definir variables en Python y JavaScript. En Python, no necesitamos la palabra reservada let y tampoco necesitamos un punto y coma al final de cada línea.

Python usa un conjunto de reglas de sintaxis basadas en espacios en blanco y sangría. Esto elimina la necesidad de caracteres de terminación de línea, como el punto y coma, y el alcance del bloque mediante llaves.

Tipos de Datos en Python

Python también tiene un conjunto de tipos de datos que podemos asignar a nuestras variables. Estos incluyen números enteros, números de punto flotante (decimales), cadenas, listas y diccionarios.

Los números enteros, los números de punto flotante y las cadenas son esencialmente iguales a sus contrapartes de JavaScript, por lo que no repetiremos esa información aquí.

En Python, los booleanos son muy similares a los de JavaScript, excepto que las palabras clave True y False deben estar en mayúsculas:

x = True

y = False

Declaraciones de Flujo de Control

Al igual que en JavaScript, Python tiene un conjunto similar de declaraciones de control de flujo, pero con una sintaxis ligeramente diferente.

Declaraciones if / Else

Este es el equivalente en Python del ejemplo if/else que vimos en la sección de JavaScript:

x = 10

if ( x > 5 ):
    print('X es MAYOR que 5!')
    
else:
    print('X NO es MAYOR que 5!')

Definimos una variable llamada x y establecimos su valor en 10, seguido de nuestra declaración if t. Dado que la condición entre paréntesis se evalúa cómo True, se ejecutará el código indentado después de la declaración if , y veremos la cadena de texto 'X es MAYOR que 5!' impreso en la pantalla.

En Python, usamos la función print() para imprimir información en la pantalla.

También ten en cuenta que la declaración else de arriba, que imprimirá una cadena alternativa a la pantalla si x si la condición es False.

Hay dos diferencias principales entre el código Python anterior y el código JavaScript que vimos anteriormente. Python usa dos puntos en lugar de llaves para indicar el comienzo del bloque de declaración de if .

Además, la indentación de la función print() es muy importante en Python . En JavaScript, la indentación o el espacio en blanco entre las declaraciones no importa, ya que JavaScript identifica bloques de código usando llaves e identifica el final de una declaración usando un punto y coma. ¡Pero en este ejemplo de Python, no hay punto y coma ni llaves!

Esto se debe a qué Python en realidad usa el espacio en blanco y los caracteres de nueva línea para identificar el final de las declaraciones y los bloques de código.

Los dos puntos le dicen al intérprete de Python que el bloque if está empezando. El código que conforma el bloque if debe estar indentado (1 tab = 4 espacios es la convención) para que el intérprete de Python sepa que es parte del bloque if . La siguiente línea sin indentación señalará el final del bloque if.

Ciclos While

A continuación, analizaremos los bucles en Python. El ciclo while en Python es esencialmente el mismo que vimos en JavaScript, pero con la sintaxis de Python:

x = 1

while ( x <= 100 ):
    print('Este es un mensaje muy importante!')
    x = x + 1

print('Esto no está en el ciclo!')

Las diferencias entre este ciclo while y la versión de JavaScript son las siguientes:

Eliminamos let al definir nuestras variables.
Eliminamos los puntos y comas al final de línea.
Reemplazamos las llaves con dos puntos.
Nos aseguramos de que el código en el ciclo esté indentado con una tabulación.

Imprimimos un mensaje adicional fuera del ciclo para mostrar que las líneas de código sin indentación no son parte del ciclo y no se repetirán.

Para Pythonistas principiantes, recomiendo echar un vistazo a Zen of Python, que es una lista de 20 reglas generales para escribir código Pythonic.

Y cuando sientas más familiaridad con los conceptos básicos, intenta crear algunos de estos divertidos proyectos de Python para principiantes.

10)Amplia tu conocimiento con Java

Ahora que hemos trabajado con un par de lenguajes de programación de alto nivel, demos un paso más abajo con Java.

A diferencia de JavaScript y Python, que ejecutan el código fuente en tiempo real mediante un intérprete, Java es un lenguaje compilado. Esto significa que se usa un compilador (en lugar de un intérprete) para convertir el código fuente de Java en una forma que la computadora pueda entender.

La mayoría de los compiladores generan uno o más archivos ejecutables compuestos por código de máquina que están listos para ejecutarse en el sistema operativo y la plataforma de hardware específicos para los que fueron compilados.

Pero Java es algo especial porque compila el código fuente de Java en una forma intermedia llamada bytecode. Esto es diferente al código de máquina que producen la mayoría de los otros lenguajes compilados. El código de bytes de Java está destinado a ser ejecutado por algo llamado Java Virtual Machine (JVM).

You can think of the JVM as a program that you install on your computer, which allows you to run Java programs by executing Java bytecode.

Puede pensar en la JVM como un programa que instala en su computadora, que le permite ejecutar programas Java ejecutando bytecode. Cuando las personas hablan de "si Java está instalado o no en una computadora", generalmente preguntan si la JVM está instalada o no en la computadora.

La JVM cumple una función similar a la de los intérpretes que discutimos en capítulos anteriores. Pero en lugar de tomar el código fuente (que se almacena en archivos .java) como entrada, toma el código de bytes compilado.

El beneficio de esta configuración es que permite que el código de bytes compilado en sistemas operativos y plataformas particulares sea ejecutado por una JVM en cualquier otra plataforma.

Por ejemplo, imagine que tenemos un archivo de código Java que fue escrito y compilado en código de bytes en una computadora que ejecuta el sistema operativo Windows. Este código de bytes se puede ejecutar (es decir, el programa se puede ejecutar) mediante una JVM en cualquier plataforma, incluidos Windows, Mac OS, Linux, etc.

Este no es el caso con la mayoría de los ejecutables compilados en otros lenguajes de programación, que solo pueden ejecutarse en el entorno para el que fueron compilados.

Variables y asignación en Java

Una gran diferencia entre Java y los lenguajes que hemos visto hasta ahora (Python y JavaScript) es que Java es un lenguaje de tipo estático.

Esto significa que los tipos de datos de nuestras variables deben conocerse y establecerse en el momento de compilar el programa.

Cada vez que creamos una variable en código Java, debemos especificar explícitamente el tipo de datos de esa variable, como un número entero, una cadena, etc. Esto se llama declaración de variables.

Una vez que declaramos el tipo de datos de una variable, solo puede contener ese tipo de datos durante la ejecución del programa.

Esto es muy diferente de JavaScript y Python, donde los tipos de datos variables se establecen durante la ejecución del programa, también conocido como tiempo de ejecución.

Por lo tanto, los lenguajes como JavaScript y Python se conocen como lenguajes de tipado dinámico: no establecemos explícitamente los tipos de datos variables en nuestro código fuente y podemos reasignar fácilmente una variable a cualquier tipo sobre la marcha.

En Java, creamos variables usando esta sintaxis:

Datatype name = value;

Aquí Datatype es el tipo de datos que almacenará la variable, como Integer, String, etc. Luego, name representa el nombre de la variable que estamos definiendo para que podamos usarla en nuestro código. Y value es el valor real que estamos asignando a la variable. Ten en cuenta que, al igual que JavaScript, todas las declaraciones de Java terminan en punto y coma.

Tipos de Datos en Java

En Java, los tipos de datos integrados básicos se denominan tipos de datos primitivos y se verán muy familiares según lo que hemos visto en lenguajes de nivel superior como Python y JavaScript. Los principales tipos primitivos son:

Integer int: Almacena números enteros entre −2,147,483,648 y 2,147,483,647.
Float float: Almacena números enteros entre 3.4x10^−038 a 3.4x10^038.
Boolean bool: Almacena números enteros entre true o false.

Ten en cuenta que hay algunos otros tipos primitivos (corto, largo, byte y doble) que no cubriremos aquí, ya que no se usan con tanta frecuencia como los demás. Así es como inicializamos estos tipos de datos:

Integer: int x = 100;

Float: float pi = 3.14;

Char: char middleInitial = 'T';

Boolean: bool isHuman = true;

Quiero reiterar que una vez que se declara el tipo de datos de una variable, esa variable solo puede contener valores del tipo de datos especificado.

Por ejemplo, se generaría un error si nuestro programa intentara almacenar un valor de carácter dentro de una variable que se declaró como un número entero. No podemos asignar el carácter 'S' a la variable entera x en el ejemplo anterior.

El siguiente tipo de datos que analizaremos es la cadena: una secuencia de caracteres, números o símbolos representados como datos textuales.

Las cadenas en Java son un tipo de datos no primitivo, lo que significa que se construyen a partir de partes más pequeñas. Para declarar una variable de cadena usamos el tipo de datos Cadena y colocamos el valor asignado entre comillas dobles:

String name = "Harry Potter";

Declaraciones de control de flujo de programa en Java

Al igual que JavaScript, Java usa llaves para definir bloques de código if para declaraciones, bucles y funciones. Examinaremos las mismas declaraciones de control de programa que en los capítulos anteriores y actualizaremos los ejemplos para usar la sintaxis de Java.

Declaraciones If / Else

Aquí está la instrucción if/else de Java que refleja los ejemplos de las secciones anteriores:

int x = 10;

if ( x > 5 ) {
    System.out.println("X es MAYOR que 5!");
} else {
    System.out.println("X NO es MAYOR 5!");
}

Este ejemplo básico de declaración if es casi idéntico a la versión de JavaScript. Las únicas diferencias son que declaramos que el tipo de datos de x es int y usamos System.out.println() en lugar de console.log() para imprimir nuestro mensaje.

A continuación, pasaremos a los bucles en Java. Dado que la sintaxis de Java y JavaScript son bastante similares, el ciclo while en Java es esencialmente el mismo que vimos en JavaScript:

int x = 1;

while ( x <= 100 ) {

    System.out.println("Este mensaje es muy importante!");
    
    x = x + 1;
    
}

Este ciclo while imprimirá el mensaje 100 veces.

Esto concluye nuestras secciones sobre lenguajes de programación específicos. Puede haber sido un poco repetitivo ya que cubrimos el mismo conjunto de conceptos en 3 idiomas, pero esperamos que esto haya ayudado a consolidar estas ideas básicas pero fundamentales.

Ahora completaremos este artículo con algunos temas intermedios que, de otro modo, no podría comenzar a aprender de inmediato.

Hablaremos de una herramienta de colaboración esencial llamada Git. Luego aprenderemos a almacenar y acceder a datos en una base de datos. A continuación, abordaremos brevemente los marcos de trabajo de desarrollo web y, por último, arrojaremos algo de luz sobre los administradores de paquetes.

11) Rastrea tu Código usando Git

Git es el sistema de control de versiones (VCS) más popular en uso hoy en día. Permite que varios desarrolladores colaboren juntos en el software. En esta sección, aprenderemos qué es Git, como funciona y como usar sus comandos básicos.

Antes de saltar directamente a Git, desarrollemos algunos conceptos comunes a la mayoría de los proyectos de programación.

El conjunto completo de directorios y archivos que componen un proyecto de software se denomina codebase. El project root es la carpeta de más alto nivel en el árbol de directorios del proyecto. Los archivos de código se pueden incluir directamente en la raíz del proyecto o se pueden organizar en varios niveles de carpetas.

Cuando el código base esté listo para la prueba o la implementación, se puede compilar en el programa que se ejecutará en su computadora. El proceso de compilación puede incluir uno o más pasos que convierten el código escrito por humanos en un ejecutable que se puede ejecutar en los chips de procesamiento de su computadora.

Una vez que se crea el código, el programa está listo para ejecutarse en tú sistema operativo específico, como Linux, Mac OS o Windows.

Con el tiempo, los desarrolladores actualizan el código del proyecto para agregar nuevas funciones, corregir errores, implementar actualizaciones de seguridad y más. En general, hay tres formas en que los desarrolladores pueden realizar estos cambios en un proyecto de software:

Agregar nuevos archivos y carpetas al proyecto
Edite el código en archivos y carpetas existentes
Eliminar archivos y carpetas existentes

A medida que crecen los proyectos y se agregan nuevas características, aumenta la cantidad de archivos y carpetas (así como la cantidad de código dentro de ellos). Los proyectos grandes pueden crecer hasta cientos de miles de archivos que contienen millones de líneas de código.

Para respaldar este crecimiento, la cantidad de desarrolladores en equipos de proyectos grandes generalmente aumenta. Los grandes proyectos de software pueden tener cientos o incluso miles de desarrolladores trabajando en conjunto.

Esto plantea la pregunta: "¿Cómo es posible que todos estos desarrolladores, que pueden estar dispersos geográficamente por todo el mundo realizan un seguimiento del código de su proyecto de software de tal manera que puedan trabajar juntos en un solo proyecto?"

Los equipos de desarrollo necesitan una forma de realizar un seguimiento exacto de los cambios que se realizaron en el código, qué archivos o carpetas se vieron afectados y quién realizó cada cambio. Cada desarrollador también debe poder obtener actualizaciones de todos los demás desarrolladores.

Este proceso se denomina versionado o control de versiones. Los desarrolladores usan herramientas especiales llamadas Sistemas de control de versiones (VCS) para rastrear, administrar y compartir las versiones de los proyectos de software. Aquí hay algunos sistemas de control de versiones populares que se utilizan activamente en estos días:

Git
Subversion (SVN)
Mercurial (Hg)

Sin embargo, Git ha ganado la corona como el VCS de referencia del día. Es, con diferencia, el VCS más popular que utilizan las comunidades gubernamentales, comerciales y de código abierto de todo el mundo.

Git forma el núcleo de las populares plataformas VCS basadas en la web como GitHub y Bitbucket. Git es una herramienta esencial para cualquier desarrollador completo para agregar a su conjunto de habilidades.

Comandos básicos de Git

Git crea y almacena información sobre nuestros proyectos de software en algo llamado repositorio de Git. Un repositorio de Git es solo una carpeta oculta en su computadora que Git usa para almacenar datos sobre los archivos de código en un proyecto de software.

Cada proyecto de software en el que trabajamos normalmente tiene su propio repositorio Git para almacenar información relacionada con ese proyecto. De esta manera, el código relacionado con diferentes proyectos en una sola computadora se puede rastrear por separado.

Hay dos formas principales de crear un repositorio Git en su computadora. El primero es crear un repositorio Git completamente nuevo en una carpeta existente en su sistema de archivos.

Para hacer esto, simplemente abra la línea de comando, cree una nueva carpeta en algún lugar conveniente como en su escritorio y navegue hasta ella:

cd ~/Desktop

mkdir testgit
 
cd testgit/

Ahora que creamos una nueva carpeta y navegamos en ella, podemos inicializar un nuevo repositorio de Git usando el comando:

git init

Deberías ver un resultado similar al siguiente:

Initialized empty Git repository in /Users/me/Desktop/testgit/.git/

Todos los comandos de Git que ejecutaremos comienzan con la palabra git seguida de un espacio y luego el comando específico de Git que nos gustaría ejecutar. A veces también agregaremos banderas y argumentos después de los comandos de Git.

El comando git init crea un folder escondido que se llama .git ien el directorio actual. Esta carpeta es el repositorio de Git que mencionamos anteriormente. Puedes ver esto ejecutando el comando ls -al.

La segunda forma de obtener un repositorio de Git en su computadora es descargar uno de otro lugar, como Bitbucket o GitHub.

Bitbucket y Github son sitios web que permiten a las personas alojar proyectos de código abierto que se pueden descargar a su computadora.

Si buscas un proyecto que te parezca interesante en Bitbucket o GitHub, verás un botón llamado Clone. Este botón te proporcionará un comando y una URL que puedes copiar y pegar en la terminal de línea de comandos. Se verá algo como esto:

git clone https://jacobstopak@bitbucket.org/jacobstopak/baby-git.git

El comando git clone descarga el repositorio desde la URL especificada a una nueva carpeta en tu computadora. La URL puede ser una URL web como en el ejemplo anterior o una URL SSH de la siguiente manera:

git clone git@bitbucket.org:jacobstopak/baby-git.git

Después de ejecutar el comando git clone, deberías ver una nueva carpeta creada. Si navegas en el, verás todos los archivos y subcarpetas que componen el proyecto que descargaste.

El siguiente comando que mencionaremos es git add . El comando git add se usa para decirle a Git qué archivos queremos que rastree y para agregar cambios en los archivos ya rastreados a Git. staging area.

Una vez que los archivos nuevos o modificados se han preparado, se pueden confirmar en el repositorio mediante el comando git commit -m "Commit message". Esto almacenará los cambios en todos los archivos preparados en el repositorio de Git.

Los comandos git status y git log son útiles para revisar el estado actual del directorio de trabajo y el historial de confirmación de su proyecto.

Apenas arañamos la superficie aquí. Git tiene muchos más comandos esenciales con los que definitivamente vale la pena familiarizarse.

12) Almacenar datos usando Bases de Datos y SQL

Una base de datos es un programa diseñado específicamente para almacenar, actualizar, recuperar y eliminar de manera eficiente grandes cantidades de datos. En pocas palabras, podemos pensar en una base de datos como un contenedor para un conjunto de tablas.

Probablemente hayas trabajado con tablas en Microsoft Excel. Una tabla es solo un conjunto de columnas y filas que contienen datos. Podemos configurar tablas en una base de datos para almacenar la información que nuestros programas necesitan para funcionar correctamente.

Ya sea que estemos escribiendo programas en JavaScript, Python, Java o algún otro lenguaje, podemos decirles a nuestros programas que interactúen con las bases de datos según sea necesario.

Podemos recuperar datos de la base de datos para mostrarlos a nuestros usuarios en una página web. Podemos aceptar un formulario de registro web de un usuario y almacenar la información de ese usuario en una base de datos para su uso posterior.

Nuestros programas pueden interactuar con bases de datos en tiempo real a medida que ocurren eventos en nuestra aplicación. Para ello, la mayoría de las bases de datos hablan un lenguaje llamado SQL, abreviatura de Structured Query Language.

SQL es un lenguaje de programación creado específicamente para bases de datos. Nos permite decirle a las bases de datos qué hacer.

Un fragmento de código SQL se denomina query. Podemos escribir consultas SQL para obtener los datos que necesitamos en un momento determinado o para insertar nuevos datos en una tabla específica. En términos generales, hay dos tipos principales de consultas SQL: read-SQL y write-SQL.

Una consulta de lectura SQL es aquella que simplemente obtiene datos de la base de datos para que los veamos o los usemos. No cambia los datos en la base de datos en absoluto.

Por otro lado, una consulta de escritura SQL inserta datos nuevos en una tabla, actualiza datos existentes o elimina datos existentes. Aprenderemos cómo escribir algunas consultas básicas de lectura SQL en esta sección.

Antes de escribir una consulta, ¡es útil saber qué estamos consultando! Las bases de datos tradicionales contienen tablas formadas por columnas y filas. Cuando escribimos una consulta de lectura SQL, nuestro objetivo suele ser recuperar un subconjunto de esas filas y columnas.

Por ejemplo, digamos que tenemos una tabla llamada PERSON con 4 columnas, FIRST_NAME y LAST_NAME. Podemos usar la siguiente consulta para seleccionar todos los datos de la columna FIRST_NAME :

SELECT FIRST_NAME FROM PERSON;

La palabra clave SELECT le dice a la base de datos que queremos recuperar datos. Le sigue el nombre de la columna, FIRST_NAME, que queremos obtener.

Luego usamos la palabra clave FROM para decirle a la base de datos de qué tabla queremos obtener los datos, en este caso, la tabla PERSONA. Además, tenga en cuenta que todos los comandos SQL terminan con un punto y coma.

Uno de los requisitos más comunes que tenemos con los datos es filtrarlos. Filtrar significa restringir el conjunto de resultados en función de una condición específica.

Por ejemplo, es posible que solo queramos seleccionar filas de la tabla PERSON para personas que se llamen "PHIL". Podemos aplicar filtros en consultas SQL usando la palabra clave WHERE :

SELECT * FROM PERSON WHERE FIRST_NAME = 'PHIL';

Esta consulta devolvería todas las columnas en la tabla PERSON ya que usamos un asterisco en * en la cláusula SELECT en lugar de enumerar nombres de columna específicos. Solo se recuperarán las filas de la tabla PERSON en las que FIRST_NAME esté establecido en "PHIL".

Por último, hablaremos sobre la clasificación. Hay muchas ocasiones en las que nos gustaría ver los resultados de nuestra consulta ordenados en un orden particular. Podemos usar la cláusula ORDER BY para esto:

SELECT *
FROM PERSON
ORDER BY LAST_NAME;

Esto devolverá todas las columnas de la tabla PERSON ordenadas alfabéticamente por apellido.

Esto devolverá todas las columnas de la tabla ordenadas alfabéticamente por apellido.

De forma predeterminada, los resultados se ordenarán en orden ascendente, de la A a la Z. Podemos agregar la palabra clave opcional ASC o DESC, para especificar si ordenar en orden ascendente o descendente:

SELECT *
FROM PERSON
ORDER BY LAST_NAME DESC;

13) Leer sobre Frameworks y MVC

A menudo, nos encontraremos escribiendo código para tipos de aplicaciones muy comunes. Las aplicaciones web (o web apps) son aplicaciones que dependen de Internet para funcionar. Las aplicaciones web son algunos de los tipos de aplicaciones de software creados con mayor frecuencia.

Una aplicación web es esencialmente una versión más funcional y robusta de un sitio web. La mayoría de las aplicaciones web implementan algún código de backend que reside en un servidor web y ejecuta la lógica en segundo plano para respaldar la funcionalidad de la aplicación.

Los lenguajes de programación comunes que se usan para el código de backend de una aplicación web incluyen Python, Java y JavaScript, entre otros.

Algunas funcionalidades comunes a la mayoría de las aplicaciones web incluyen:

Proporcionar una forma conveniente de modificar dinámicamente el contenido de las páginas web
Realización de una autenticación de usuario segura a través de una página de inicio de sesión
Proporcionar características de seguridad de aplicaciones robustas
Lectura y escritura de datos en una base de datos.

Un framework es un conjunto de bibliotecas de código que contienen las funcionalidades comunes que todas las aplicaciones web usan de manera inmediata. Los frameworks web brindan un sistema para que los desarrolladores construyan sus aplicaciones sin tener que preocuparse por escribir el código para muchas de las tareas detrás de escena comunes a todas las aplicaciones web.

Solo necesitamos utilizar las partes del marco que satisfagan las necesidades de nuestra aplicación web.

Por ejemplo, si no necesitamos conectarnos a una base de datos en una aplicación web en particular, podemos ignorar las funciones de la base de datos y usar las otras funciones que necesitamos.

Todavía tenemos la capacidad total de personalizar las páginas web que componen nuestra aplicación, el flujo de usuarios y la lógica comercial. Puede pensar en un framework como un conjunto de herramientas de programación que podemos usar para crear aplicaciones web.

Cada lenguaje de programación que cubrimos en este artículo tiene uno o más frameworks populares actualmente en uso. Esto es excelente porque brinda a los equipos de desarrollo la flexibilidad de usar el marco del lenguaje en el que son más competentes.

Java tiene Spring Framework que se hace especialmente conveniente a través de Spring Boot. Python tiene Django Framework. JavaScript tiene Node.js un entorno de tiempo de ejecución con las múltiples opciones de frameworks que incluyen Express.js y Meteor.js. Estos frameworks son todos gratuitos y de código abierto (open source).

14) Jugando con Administrador de Paquetes

El tema final que cubriremos en esta guía es el administrador de paquetes. Según el contexto, un paquete puede representar un programa independiente que está listo para instalar en una computadora o una biblioteca de código externa que queremos aprovechar en uno de nuestros proyectos de software.

Dado que nuestras aplicaciones a menudo dependen de estas bibliotecas de códigos externas, también nos referimos a ellas como dependencias.

Un administrador de paquetes es un programa que nos ayuda a mantener las dependencias de un sistema o proyecto de software. Por "mantener" nos referimos a instalar, actualizar, enumerar y desinstalar las dependencias según sea necesario.

Dependiendo del contexto, los administradores de paquetes que discutiremos pueden usarse para mantener los programas que hemos instalado en nuestros sistemas operativos o para mantener las dependencias de un proyecto de software.

Mac OS X: Homebrew

Homebrew es el administrador de paquetes más popular para el sistema operativo Mac OS X. Ofrece una forma conveniente de instalar, actualizar, rastrear, enumerar y desinstalar paquetes y aplicaciones en su Mac.

Muchas aplicaciones que se pueden instalar a través de archivos .dmg descargados también se pueden descargar e instalar usando Homebrew.

Aquí hay un ejemplo de instalación del paquete wget via Homebrew:

brew install wget

Linux: Apt y Yum

Dado que Linux se creó en torno a la línea de comandos, no sorprende que los administradores de paquetes sean la forma predeterminada de instalar programas.

La mayoría de las versiones principales de Linux vienen con un administrador de paquetes integrado. Advanced Package Tool (APT) es el administrador de paquetes nativo para las distribuciones de Linux basadas en Debian y Ubuntu. Yellowdog Updater, Modified (YUM) es el administrador de paquetes nativo para la distribución RedHat Linux.

Aquí hay un ejemplo de instalación de Vim usando APT:

sudo apt-get install vim

Y usando Yum:

sudo yum install vim

JavaScript: Node Package Manager (NPM)

Ahora que hemos visto cómo funcionan algunos administradores de paquetes a nivel del sistema operativo, echemos un vistazo a algunos administradores de paquetes específicos del lenguaje de programación. Estos pueden ayudarnos a administrar las bibliotecas de software de las que dependen muchos de nuestros proyectos de codificación. Node Package Manager (NPM) se instala de forma predeterminada con Node.js.

Una diferencia entre NPM y los administradores de paquetes anteriores que hemos visto es que NPM se puede ejecutar en modo local o global. El modo local se usa para instalar un paquete solo dentro de un proyecto/directorio en particular en el que estamos trabajando, mientras que el modo global se usa para instalar el paquete en el sistema.

De manera predeterminada, los paquetes se instalan localmente, pero puede usar el indicador -g para instalar un paquete globalmente:

npm install request -g

Python: Pip

Python también tiene un administrador de paquetes llamado Pip. Es posible que Pip ya esté instalado en su sistema, ya que viene preempaquetado con versiones recientes de Python. Pip nos permite instalar fácilmente paquetes desde Python Package Index usando el comando pip install :

pip install requests

Java: Apache Maven

Apache Maven (generalmente denominado simplemente Maven) es un conjunto de herramientas gratuito y de código abierto que incluye administración de dependencias.

Maven se usa principalmente para proyectos Java, aunque también es compatible con otros lenguajes. El uso de Maven es un poco más complicado y puede hacer muchas cosas, por lo que no entraremos en detalles aquí.

Resumen

En este artículo, presenté un conjunto de conceptos y herramientas de codificación esenciales con la intención de presentar una vista panorámica del desarrollo de software que desearía haber tenido cuando comencé a aprender a programar.

Cubrí temas que incluyen Internet, varios lenguajes de programación, sistemas de control de versiones y bases de datos con el objetivo de describir cómo encajan estas piezas del rompecabezas.

Próximos Pasos

Si disfrutaste de este artículo, escribí un libro llamado Coding Essentials Guide for Developers (Guía Básica de Programación para Desarrolladores) que tiene 14 capítulos, cada uno de los cuales cubre uno de los temas discutidos en esta publicación.

En el libro profundizo aún más en estos 14 temas, por lo que podría ser un buen recurso para que podrías revisar si obtuviste valor de este artículo.

Después de leer esto, es posible que sientas atracción por un lenguaje, una herramienta o un concepto en particular. Si este es el caso, te animo a profundizar en esa área para avanzar en su aprendizaje.

Si tienes alguna pregunta, sugerencia o inquietud sobre este libro, me encantaría saber de tí en jacob@initialcommit.io.

Como construir tu propio portafolio web de desarrollador con HTML, CSS y JavaScript

Jorge Torres Torres — Wed, 14 Sep 2022 02:37:32 +0000

Artículo original: How to Build Your Own Developer Portfolio Website with HTML, CSS, and JavaScript

En estos días todos necesitan tener un sitio web y aplicaciones web. Así que si trabajas como desarrollador web hay muchas oportunidades para ti .

Pero si quieres conseguir trabajo como desarrollador web, necesitarás un buen sitio web como portafolio para poder mostrar tus habilidades y experiencia.

En este tutorial, discutiré algunas de las razones por los que debes construir tu propio portafolio web. Luego, te guiaré en el proceso de construcción de tu portafolio web responsivo con HTML, CSS y JavaScript.

Tabla de contenidos

¿Qué es un portafolio sitio web de desarrollador?
¿Por qué deberías tener un Portafolio website?
Proyecto de Portafolio – ¿Cómo construir tu propio Portafolio en línea de Desarrollador?
La estructura de carpetas del Proyecto
El Código Básico de HTML
La Sección de Barra de Navegación
Como dar Estilos a la Barra de Navegación
Como construir la sección de Hero
Como dar estilo a la Sección de Hero
Como construir la Sección de Más sobre mí
Como construir la Sección de Habilidades
Como dar estilo a la Sección de Habilidades
Como construir la sección de Proyectos
Como dar estilos a la Sección de Proyectos
Como construir la Sección de Contacto
Como dar estilo a la sección de Contacto
Como dar estilo a los iconos de Redes Sociales
Como agregar el botón desplazarse Hacia Arriba
El HTML para el botón desplazarse Hacia Arriba
Como dar estilos al icono de Desplazarse hacia arriba
Como hacer que tu Portafolio web sea responsivo
Como crear la Consulta de Medios para Tablets y teléfonos celulares (max-width 720px)
Como construir el Menú de Hamburguesa
El JavaScript para el Menú de Hamburguesa
Como hacer responsiva la Sección de Hero
Como hacer responsiva la Sección de Más sobre mí
Como hacer responsiva la sección de Habilidades
Como hacer responsiva la Sección de Proyectos
Como hacer responsivo el formulario de Contacto
Como hacer responsivo el sitio web para teléfonos celulares pequeños
Conclusión

¿Qué es un portafolio web de desarrollador?

Un portafolio web de un desarrollador provee de información relevante sobre tus habilidades, experiencia y proyectos en los que hayas trabajado para empleadores potenciales.

Puedes considerar a tu portafolio web como tu currículum en línea.

¿Porqué deberías tener un Portafolio web de Desarrollador?

1. Un Portafolio web incrementa tu presencia en línea

Como desarrollador, necesitas tener presencia en línea. Puedes hacer crecer tu presencia en línea utilizando plataformas de redes sociales tales como Twitter, Facebook, e Instagram. Pero esas plataformas no son completamente tuyas, ya que los moderadores de esas plataformas tienen casi control total sobre tu cuenta.

En cambio, tu portafolio web, está montado en tu propio dominio en línea. Y la gente puede fácilmente encontrarte cuando hace una búsqueda de tu nombre en algún buscador como Google, siempre que pongas las cosas correctas y en su lugar haciendo uso de SEO (Search Engine Evaluation).

2. Un portafolio web es tu currículum en línea

Tu portafolio web es como tu currículum en línea. Clientes potenciales y Reclutadores de Recursos Humanos pueden encontrarte fácilmente en línea y revisar tus proyectos pasados y tus habilidades.

Esto también significa que cuando alguien te quiera dar una oportunidad para trabajar para ellos, y te pregunten por tus proyectos pasados, solamente les das el link a tu sitio web (tu portafolio). Que no solamente tiene tus proyectos, si no también tu conjunto de habilidades e información sobre tu experiencia pasada.

3. Un portafolio es evidencia de tu experiencia en tu área

Tener (y mucho menos construir tu propio) portafolio web como envía un claro mensaje como desarrollador de que estás poniendo tus habilidades en práctica y que realmente sabes lo que estás haciendo.

Un portafolio puede también ayudarte a construir confianza con clientes porque tienen evidencia de la calidad de tu trabajo.

Proyecto portafolio - Como construir tu propio portafolio en línea de desarrollador

Puedes crear tu propio portafolio web con HTML, CSS y JavaScript, Y eso es lo que haremos aquí.

Ya hice esto hace algunos meses y lo puse a disposición de todos como un producto gratuito en Gumroad, así que decidí crear un tutorial sobre cómo lo hice.

Esta es la demostración de lo que construiremos.

Para seguir el proceso conmigo, puedes obtener los archivos de inicio de Github.

La estructura de carpetas del proyecto

Para evitar confusión, ordenaré el HTML, CSS, JavaScript, iconos e imágenes del proyecto en sus respectivas carpetas.

El archivo de HTML va en la carpeta root, y los archivos de imagen, icono, CSS, y JavaScript estarán separados en sus respectivas subcarpetas en una carpeta de assets. Esta es una práctica común.

También hay un archivo readme que contiene todas las herramientas que utilicé en el proyecto con sus respectivos enlaces. También está disponible en los archivos de inicio.

El código básico de HTML

Todos tienen sus preferencias al escribir código de un proyecto completo con HTML, CSS y JavaScript. A algunos les gusta definir todo el código HTML repetitivo primero y luego el CSS, pero a mí me gusta hacerlo todo sección por sección.

Entonces empezaré con la sección de la barra de navegación. Pero es bueno mostrar primero cómo se ve el código HTML básico:



  
    
    
    

    
    

    
    
    

    
    
    Jane Doe | Desarrolladora Web

Tengo todas las secciones comentadas en el HTML para que puedas seguirlas mejor. En la plantilla también hay Content Delivery Network (Red de Distribución de Contenido), también hay CDN para animaciones de CSS (Una Biblioteca de animación CSS), iconos de Ionic, la librería de iconos que elegí para este proyecto.

Tengo un favicon hecho a través de Favicon IO y lo vinculé en la sección head. Favicon es la pequeña imagen que se muestra en una pestaña del navegador.

La Sección de la barra de navegación

La barra de navegación contiene el logotipo simple del texto h1 y el menú de navegación:

 
      JANE DOE
      
        Acerca de Mí
        Habilidades
        Proyectos
        Contacto

Si te estás preguntando que representa el elemento botón, son las barras para alternar el menú de navegación en dispositivo móvil (menu de hamburguesa). Este estará escondido en nuestra versión de escritorio pero se mostrará en dispositivo móvil.

También vincularé las secciones individuales del sitio web a estos elementos de navegación, por lo tanto, cuando el usuario hace click en cualquiera de los elementos de navegación, se le lleva a la sección que corresponde al elemento de navegación en el que hace click.

Es por eso que tengo los atributos de referencia (href) establecidos en #sobremi, #habilidades, #proyectos, and #contacto, respectivamente. La sección individual del sitio web tendrá estos atributos como ids.

La barra de navegación ahora luce así:

Como dar estilos a la barra de navegación

La barra de navegación necesita definitivamente algo de estilo para que se vea un poco mejor.

Antes de darle estilos a la barra de navegación, declararé algunas variables de CSS para facilitar las cosas más adelante. Esto se debe a que, con las variables CSS, es más fácil evitar la redundancia y la repetición en tu archivo de CSS.

La sintaxis para declarar variables de CSS luce así:

:root {
  --variable-name: value;
}

Para usar la variable, debes hacer esto:

selector {
  propiedad: var(--nombre-variable);
}

También importaré la fuente Roboto de Google, y declararé algunos resets de CSS para remover algunas funciones predeterminadas, como el margin y padding para elementos, text-decoration para etiquetas anchor y list-style-type para listas.

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap");

/* Variables */
:root {
  --font-family: "Roboto", sans-serf;
  --normal-font: 400;
  --bold-font: 700;
  --bolder-font: 900;
  --bg-color: #fcfcfc;
  --primary-color: #4756df;
  --secondary-color: #ff7235;
  --primary-shadow: #8b8eaf;
  --secondary-shadow: #a17a69;
  --bottom-margin: 0.5rem;
  --bottom-margin-2: 1rem;
  --line-height: 1.7rem;
  --transition: 0.3s;
}
/* Variables fin */

html {
  scroll-behavior: smooth;
}

/* CSS Resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

body {
  font-family: var(--font-family);
}

Si lo notas, configuré un hover state para todos los enlaces del sitio web desde la línea 39 a la 41. Cuando el usuario se desplaza sobre cualquier enlace, cambia al color secundario que establecí en las variables de CSS.

Aquí hay una buena regla general para declarar variables CSS: si te encuentras usando la misma propiedad y el mismo valor a menudo en el mismo archivo CSS, puedes declarar una variable de css para evitar repetición.

También debes hacer que los nombres de tus variables sean lo más descriptivos posible, como hice yo, para ayudar a otros que podrían trabajar con tu código.

Con los resets, hay algunos cambios en la barra de navegación del navegador:

Para dar estilos a la barra de navegación y alinear su contenido, usaremos CSS Flexbox:

nav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  background-color: var(--bg-color);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

¿Qué está haciendo el Código de CSS?

Le di a la barra de navegación el valor de sticky en la propiedad de position para que permanezca en la parte superior sin importar qué.

La propiedad de z-index con el valor de 1 se asegura de que la barra de navegación se muestre sobre cualquier otro elemento de la página web. Así es como se hace sticky una barra de navegación.

Además, también apliqué una sombra en la parte inferior de la barra de navegación con la propiedad box-shadow .

La barra de navegación tiene un nuevo aspecto:

Pero aún no hemos terminado. Los elementos del menú de navegación debe estar uno al lado del otro, no uno encima del otro. También lo haremos con Flexbox.

También terminaré el resto del estilo de la barra de navegación haciendo que h1, los elementos de navegación y el botón de menú de hamburguesas se vean mejor. Haremos esto con algunas variables CSS declaradas inicialmente.

nav h1 {
  color: var(--color-primario);
}

nav a {
  color: var(--color-primario);
  transition: var(--transicion);
}
nav a:hover {
  color: var(--valor-secundario);
  border-bottom: 2px solid var(--valor-secundario);
}

nav ul {
  display: flex;
  gap: 1.9rem;
}

nav ul li {
  font-weight: var(--negrita);
}

El menú hamburguesa también necesita estar escondido. Tiene una clase de .menu-hamburguesa, podemos aplicarle un atributo de display con valor de none y así haremos que el botón luzca mejor.

.menu-hamburguesa {
  color: var(--primary-color);
  font-size: 2rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

Nuestra barra de navegación luce más se ve mucho mejor ahora:

Como construir la sección Hero

La siguiente sección en la que trabajaremos. Esto no requerirá tanto trabajo como la barra de navegación.

La plantilla de HTML para la sección principal se encuentra en el fragmento de código a continuación:


      
      
        Sobre Mí
        
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia sed
          dolorem fugit sapiente porro veniam pariatur dolore nostrum delectus
          inventore tempore minus nemo, iste ullam illo laboriosam maiores
          repudiandae quos!

La única cosa que es un poco extraña son las clases de animate__animated animate__shakeX aplicadas al div que contiene el texto de Sobre Mí . Los nombres de clase son de CSS animado y son útiles para dar animación al container de texto Sobre Mí.

Con esto, el sitio web tiene un nuevo aspecto:

Como dar Estilo a la Sección Hero

Flexbox vendrá al rescate una vez más! Esta sección tiene dos conjuntos principales de contenido – una imagen y un texto en un div. Podemos usar flexbox para mostrarlos uno al lado del otro. A continuación puedes ver como funciona en el fragmento de código de CSS :

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  max-width: 68.75rem;
  margin: auto;
}

Nuestra imagen de Jane Doe es muy grande, así que necesitamos reducir su anchura y altura. También necesitamos darle estilo al texto de bio (Sobre Mí texto) para legibilidad. Las variables de CSS que declaramos inicialmente serán muy útiles aquí.

.hero img {
  height: 37.5rem;
  width: 37.5rem;
}

.bio {
  width: 25rem;
  padding: 0.625rem;
  border-radius: 6px;
  box-shadow: 0px 2px 15px 2px var(--primary-shadow);
}

.bio h1 {
  margin-bottom: var(--bottom-margin);
}

.bio p {
  line-height: var(--line-height);
  padding: 0.3rem 0;
}

La sección hero ahora luce genial:

Como construir la sección Más Sobre Mí

Incluí esta sección para incluir más información sobre Jane Doe con un texto placeholder.

Puedes aprovechar esto para incluir información que no tuviste posibilidad de incluir en la sección Sobre Mí.

La Plantilla HTML para esta sección es sencilla y simple:

    
      Más sobre mí
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
        nesciunt excepturi quos obcaecati incidunt voluptatem ipsam sunt ipsum,
        autem deleniti cupiditate molestias quis unde quae totam porro dicta
        iure animi inventore, veniam hic! Omnis nulla, delectus a voluptatibus
      
      
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur
        nostrum dolor minus, libero delectus praesentium perferendis
      
      
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
        consequuntur labore? Ea totam voluptas amet!

El CSS también es sencillo. Todo lo que haremos es configurar un background-color con --bg-color como variable de CSS, hacer que la sección sea legible configurando el padding, el margin y la line-height, y alinear el texto h2 al centro:

.mas-sobre {
  background-color: var(--bg-color);
  padding: 1rem 6rem;
}

.mas-sobre h2 {
  margin-bottom: var(--bottom-margin);
  text-align: center;
}

.mas-sobre p {
  line-height: var(--line-height);
  padding: 0.4rem;
}

En el navegador, la sección Más Sobre More luce así:

Como construir la sección de Habilidades

Desde la demostración en vivo, verás que la sección de habilidades contiene habilidades relevantes como HTML, CSS, JavaScript, etc. Pude conseguir los iconos de esos lenguajes en formato SVG en la página de Icons8 I.

La Plantilla de HTML para esta sección se encuentra en el fragmento de código a continuación:

 
      Mis mejores habilidades

Hay seis iconos en total. Y en lugar de tener que alinearlos con Flexbox, los agruparemos en dos lugares (3 cada uno), con las clases de primer y segundo conjunto, para que se mantengan uno encima del otro. Esto significa que los estilos que aplicaremos serán más legibles. ¡Fácil!

Tengamos en cuenta que hemos adjuntado el atributo de carga a los íconos e imágenes individuales y configurándolo en lazy. Esto asegurará que las imágenes se carguen solo cuando el usuario se desplace a las secciones que las contienen.

Como aplicar estilos a la sección de Habilidades

Sin aplicar estilos, la sección de estilos luce así:

Debemos dar un poco de estilos a la sección por que aun no se ve lo suficientemente bien::

.habilidades {
  max-width: 68.75rem;
  margin: auto;
  text-align: center;
  margin-top: 2.5rem;
}

.encabezado-habilidad {
  margin-bottom: 1rem;
}

.contenedor-habilidad img {
  padding: 1.25rem;
}

.icono {
  width: 11.875rem;
  height: 11.25rem;
}

En el CSS de arriba, establecimos un ancho máximo para toda la sección para posicionar los elementos al centro del navegador para una mejor experiencia de usuario.

Otros estilos que aplicamos están relacionados a claridad y la legibilidad. Por ejemplo, Incrementamos el tamaño de los iconos para hacerlos más visibles con sus propiedades de alto y ancho. También aplicamos un padding de 1rem (16pixeles) a todos los iconos para dar un poco de espacio entre ellos .

La sección de habilidades ahora luce mejor:

Y aún así, creo que la sección puede lucir mejor, así que he decidido hacer algunos ajustes más con la propiedad box-shadow:

Recordemos que en el HTML hay un atributo de clase llamado .tarjeta-icono adjunto a todos los iconos. I will be using the class name to put all the icons in a card:

.tarjeta-icono {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
  padding: 20px;
  margin: 10px;
}

La sección de habilidades ahora debe lucir mejor:

¡Mira eso!

Como construir la sección de Proyectos

Uno de los propósitos principales de un sitio web portafolio es mostrar tus proyectos. Por lo tanto, tendremos que crear una sección para mostrar los proyectos en los que has trabajado en el pasado.

Esta sección es probablemente la más tediosa en aplicar estilos, pero Flexbox (Modelo de Caja) no dejará de ser nuestro amigo.

La estructura de HTML para esta sección se encuentra en el fragmento de código más abajo:


      Algunos de mis proyectos recientes
      
        
          
          Rastreador de Gastos
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Check it Out
        
        
          
          Netflix Clone
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Check it Out
        
        
          
          Greeny Earth
          
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas
            ratione vel inventore labore commodi modi quos culpa aut saepe!
            Alias!
          
          Echale un vistazo!

Revisando el HTML, hay tres proyectos en total, en sus elementos divs individuales con el nombre de clase contenedor-de-proyecto y tarjeta-de-proyecto. Estas clases serán muy relevantes en aplicar estilos consistentemente al proyecto.

El elemento de sección contenedor en sí mismo tiene una clse de proyectos y un atributo de identificación de proyectos también. El nombre de la clase es para diseñar los estilos y la identificación es para vincularla al enlace Proyectos en la barra de navegación.

Los proyectos tienen sus imágenes individuales con el nombre de clase of foto-proyecto, sus títulos con una clase titulo-de-proyecto, detalles con el nombre de clase detalles-de-proyecto, y en laces con la clase de enlaces-de-proyecto.

El único propósito de darle a todos los elementos clases únicas es para aplicarles estilos.

Estos son algunos de los proyectos en los que trabajé cuando empecé como desarrollador.

La sección de proyectos luce así en el navegador:

Sin embargo, la sección no se ve tan bien, incluso hay una molesta barra de desplazamiento horizontal causada por las imágenes. Así que tenemos mucho trabajo por hacer en CSS.

Como dar estilos a la sección de Proyectos

En primer lugar, daré a toda la sección un color de fondo configurando el color grisáceo (--bg-color) que declaramos en las variables CSS como valor.

También reduciré el ancho y el alto de las imágenes del proyecto usando la clase foto-de-proyecto . Luego usaré Flexbox para poner los proyectos uno al lado del otro.

.proyectos {
  background-color: var(--bg-color);
  padding: 32px 0;
  margin-top: 2rem;
}

.foto-de-proyecto {
  width: 65%;
  height: 60%;
}

.contenedor-de-proyectos {
  display: flex;
  align-items: center;
  justify-content: center;
}

La sección ahora luce mejor:

Las imágenes ahora lucen mejor, pero el título del proyecto, detalles de proyecto, y enlaces de proyectos necesitan alinearse muy bien dentro de sus contenedores individuales.

Toda la sección del proyecto también debe ser empujada hacia el centro. Sin embargo, no necesita Flexbox para hacer esto se puede hacer configurando la propiedad de text-align con el valor de center:

.titulo-de-proyectos {
  text-align: center;
  margin-bottom: 1rem;
}

.contenedor-de-proyectos {
  text-align: center;
  width: 21.875rem;
  padding: 1rem;
}

Debemos tener en cuenta que también estable un ancho de 21.875rem (350 pixeles) para los contenedores de proyectos individuales. Esto los separará de los lados para una mejor experiencia de usuario. En este caso, el usuario no necesitaría mirar completamente para ver todo.

La sección ahora luce mejor:

Aún podemos hacer que esta sección se vea mejor. Los títulos de proyectos, detalles de proyectos y los enlaces de proyectos se ven agrupados, por lo que debemos agregar algo de padding y margin.

Los contenedores de proyectos individuales también deben verse más distintos. La propiedad box-shadow va ser fundamental aquí, así que las pondremos en sus tarjetas individuales.

.contenedor-de-proyecto p {
  padding: 0.4rem;
}

.titulo-de-proyecto {
  margin-bottom: var(--bottom-margin);
}

.detalles-de-proyecto {
  margin-bottom: var(--bottom-margin);
}

.tarjeta-de-proyecto {
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 3px 10px var(--primary-shadow);
  padding: 20px;
  margin: 10px;
}

La sección de proyectos ahora luce mejor:

Como construir la sección Contacto

Si un potencial empleador o cliente encuentra tu portafolio website atractivo, podrían querer contactarte. Así que te recomendamos tener un formulario de contacto en esta sección, junto con enlaces para tus cuentas de redes sociales.

El HTML para esta sección se vería así:


      Contactame
      
        
          
            
              Nombre
              
            
            
              Correo Electrónico
              
            
            
              Mensaje

Aquí construimos el formulario de contacto con campos de entrada para nombre y correo electrónico, una etiqueta textarea para que la gente escriba el mensaje que quieran enviar, y el botón enviar para enviar el mensaje para que puedas verlo.

Si echas un vistazo al elemento form, verás que tenemos un atributo de acción establecido en una URL de Formspree. Este es el que hemos elegido para el envío de formulario. Con Formspree, puedes recibir el mensaje directamente a la bandeja de entrada de tu correo electrónico sin necesidad de configurar un servidor con PHP o JavaScript complejos.

Ten en cuenta que no podrás usar mi URL -no funcionará para ti. Puedes fácilmente configurar el tuyo en el sitio web de Formspreee de forma gratuita. También adjunté un recurso sobre cómo configurar Formspree en el archvio de readme del proyecto.

Establecí algunos atributos id y class para los inputs individuales para darle estilos. También hay un atributo name para todos los campos de input. Esto es requerido por el servicio de envió de formularios de Formspree.

Para obtener una validación básica, adjunté un atributo required , de esa forma, el formulario se niega a enviar la información si el usuario deja algún campo vacío.

Como dar estilo a la sección Contacto

Sin estilo, la sección de contacto no se ve nada bien:

Todo lo que haremos en CSS es alinear todo el contenido al centro y hacer que los campos de input se vean mejor.

Con las propiedades de text align y margin, puedes alinear la etiqueta h2 y el contenedor para el formulario del contacto al centro .

También pondremos todo el formulario en una tarjeta con la propiedad de box-shadow .

.contacto {
  margin-top: 2rem;
}

.contacto h2 {
  text-align: center;
  margin-bottom: var(--bottom-margin-2);
}

.contenedor-formulario-contacto {
  max-width: 40.75rem;
  margin: 0 auto;
  padding: 0.938rem;
  border-radius: 5px;
  box-shadow: 0 3px 10px var(--secondary-shadow);
}

Los inputs, textarea, labels y los placeholders necesitan definitivamente también algo de estilo para ayudar con la alineación y la claridad:

.contenedor-formulario-contacto label {
  line-height: 2.7em;
  font-weight: var(--bold-font);
  color: var(--primary-color);
}

.contenedor-formulario-contacto textarea {
  min-height: 6.25rem;
  font-size: 14px;
}

.contenedor-formulario-contacto .input-field {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 5px;
  border: none;
  border: 2px outset var(--primary-color);
  font-size: 0.875rem;
  outline: none;
}

El formulario luce mejor

Pero los placeholders no son consistentes con las etiquetas. Así que necesitamos darle algo de color y padding. Le daremos el conjunto de color primario que asignamos en la lista de Variables de CSS.

Para seleccionar los placeholders y darle estilos, podemos usar la pseudo-class placeholder :

.input-field::placeholder {
  padding: 0.5rem;
  color: var(--primary-color);
}

En el formulario de contacto, lo único que falta es dar estilo al elemento button. Los botones son bastante fáciles de estilizar:

.submit-btn {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background-color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: var(--bold-font);
  transition: var(--transition);
}

En el fragmento de código de CSS anterior, hice que el botón pasara por todo el contenedor del formulario dándole un ancho del 100%. También lo hice más visible dando padding, margin, un borde y más font-weight.

La propiedad de border-radius con un valor de 5px remueve las bordes afilados y la transición sirven para ralentizar un poco las cosas cuando el botón está en estado de desplazamiento.

El estado de hover se define en el fragmento de código CSS a continuación:

.submit-btn:hover {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  cursor: pointer;
}

El formulario luce mucho mejor ahora:

Recuerda que tener tus enlaces de redes sociales en tu sitio web portafolio es de gran ventaja para que cualquier persona interesada en contactarte lo haga. Este es el siguiente paso que realizaremos, y lo haremos de una forma única.

El código de HTML para los botones de redes sociales está en el fragmento abajo:

Los iconos de redes sociales que elegiremos son gifs animados de la plataforma icons8. Colocaremos a todos en el mismo contenedor con la clase de sociales, y les daremos una clase individual de socicon para dar estilos más fácilmente.

Debajo puedes ver unos iconos de redes sociales animados que parpadearan en nuestro sitio web:

Como dar estilos a los iconos de redes sociales

.sociales {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 1%;
  bottom: 50%;
}

.socicon {
  width: 2rem;
  height: 2rem;
}

Con el CSS de arriba, los iconos de redes sociales estarán fijos al lado derecho del sitio web, así que todos los que visiten el sitio web podrán visualizar siempre los iconos aún cuando el usuario se desplace hacia abajo por la página.

También reduciremos el tamaño de los iconos asignándoles a todos sus valores de propiedad de width y height .

Mira el resultado!

Lo único que nos falta es el footer. No hay nada complejo en el HTML y CSS de footer, aparte de la entidad de caracteres reservados para el símbolo de derechos de autor y el corazón:


      © Copyright 2021
      
        Built with ♡ by
        Kolade Chris (Ksound)

footer {
  background-color: var(--bg-color);
  padding: 1.25rem;
  text-align: center;
  margin: 2rem 0 0;
}

Ahora tenemos un sitio web portafolio completo!

Pero necesitamos hacerlo responsivo, porque en su estado actual no se vería bien en dispositivo más chicos:

Necesitamos hacer que todo el contenido de las secciones individuales se muestre en una sección encima de la otra ( en un diseño de columna) . Podemos hacer esto muy fácilmente con media queries y Flexbox.

Antes de agregar las media queries para la responsividad de nuestra página, vamos a implementar un botón de desplazarse-hacia-arriba con HTML, CSS, y JavaScript.

Como Agregar un Botón de Desplazarse hacia Arriba

El HTML para el botón Desplazarse hacia Arriba

Para el HTML, tenemos un icono animado de Icons8 y al que asignaremos en una etiqueta de i.

La etiqueta de i tiene una clase de desplazarse-hacia-arriba para dar estilos y un id de desplazarse-hacia-arriba para seleccionarlo con JavaScript. Esto se debe a que para nuestros proyectos, recomiendo usar clases para dar estilos y ids para las funcionalidades que agregaremos con JavaScript.

Como dar estilos al icono de Desplazarse-hacia-Arriba

Haremos que el icono de desplazarse-hacia-arriba tenga una propiedad de fixed para que se quedé estático como los iconos de redes sociales. También le daremos una propiedad de pointer al cursor, para que este cambie cuando posicionamos el cursor encima del icono.

Con la clase de flecha-arriba al icono de desplazarse-hacia-arriba, incrementaremos el tamaño del icono para visibilidad:

.desplazarse-hacia-arriba {
  position: fixed;
  right: 0.5%;
  bottom: 3%;
  cursor: pointer;
}

.flecha-arriba {
  width: 3rem;
  height: 3rem;
}

El icono se ve muy bien:

Pero aún no hace nada. Así que necesitamos hacerlo funcional con algunas lineas de JavaScript:

// funcionalidad de desplazar hacia arriba
const desplazarArriba = document.querySelector("#desplazarse-hacia-arriba");

desplazarArriba.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth",
  });
});

¿Qué está haciendo el código de arriba?

La primera línea selecciona el botón de desplazar-hacia-arriba con el atributo id adjunto a el en el HTML. Usamos el método querySelector() aquí. También podríamos utilizar el método getElementById() .

En las líneas restantes, usamos el eventListener del click para obtener la acción click del usuario y hacer que reaccione la parte de scrollTo del objeto de Windows para que el botón funcione.

Con esta funcionalidad, cuando el usuario hace click en el botón desplazar-hacia-arriba, la página se desplaza hacia arriba y al lado izquierdo del sitio web suavemente. Hicimos esto configurando las propiedades top a 0, left a 0, y behavior a smooth.

Puedes aprender más sobre el objeto windows abriendo la consola de herramientas de desarrollo del navegador. Escribe en la ventana y da enter, luego verás todo lo disponible en el objeto de Windows, como lo hacemos a continuación:

Como hacer Responsivo tu Portafolio web

Para hacer responsivo tu sitio web, usaremos media queries de CSS y Flexbox.

Primero, necesitaremos hacer que las imágenes y el texto se vean más pequeños, y luego haremos que el contenido de cada sección se muestre en un diseño vertical configurando la propiedad flex-direction a column.

En la consulta de medios, estaremos usando 2 breakpoints – 720px y 420px.

El breakpoint de 720px es para tabletas y teléfonos móviles, y el de 420px es para teléfonos pequeños como un iPhone 6, y teléfonos Android pequeños.

Los breakpoints de la consulta de medios son los puntos en el que queremos que el contenido del sitio web responda de acuerdo al ancho del dispositivo. Así que, cualquier código que pongamos debajo del breakpoint de 720px se refleje en dispositivos con una pantalla menor o mayor de 720px, dependiendo de como especifiques el ancho máximo o ancho mínimo.

En el caso de utilizar un max-width of 720px, la sintaxis de la consulta de medios luce así:

@media screen and (max-width: 720px) {
  /* los cambios se reflejan en una pantalla con un ancho de 720px ye inferior */
}

Como crear la Consulta de Medios para Tabletas y Teléfonos móviles (max-width 720px)

Empezaremos por hacer el sitio responsiv0 desde la barra de navegación, porque comúnmente la barra de navegación no se ve bien en dispositivos más pequeños.

Primero, vamos a reducir el padding de la barra de navegación para que el logo de h1 l y los elementos del menú de navegación encajen bien:

nav {
    padding: 1.5rem 1rem;
  }

Las cosas ahora se ven un poco mejor:

En dispositivos más pequeños, los elementos del menú de navegación deben estar uno encima del otro y deben estar ocultos. Entonces, es hora de actualizar el código para que el menú de hamburguesas esté inicialmente oculto.

Como construir el menú de hamburguesas

Para hacer el menú de hamburguesas, debemos sacar los elementos del menú de navegación del viewport. Luego, debemos establecer una clase de presentacion en los elementos de la lista de navegación que se alternarán con unas pocas líneas de JavaScrip (recordemos que los elementos de navegación están en una lista desordenada).

 nav ul {
    position: fixed;
    background-color: var(--bg-color);
    flex-direction: column;
    top: 86px;
    left: 10%;
    width: 80%;
    text-align: center;
    transform: translateX(120%);
    transition: transform 0.5s ease-in;
  }

   nav ul li {
    margin: 8px;
  }

En el fragmento anterior de código CSS, establecimos una posición de fixed en la lista desordenada (ul) para que flote en la pantalla. También lo empuje 86px hacia abajo desde la parte superior con top: 86px y 10% a la izquierda.

Le dimos un ancho de 80% en relación a su elemento padre (el elemento de navegación del HTML), lo empujó hacia el centro context-align: center, y finalmente lo oculto con la propiedad de transformación establecida en translateX(120%). Esto lo empujará hacia la derecha y lo sacará del viewport.

Y ahora, cuando el usuario de click para mostrar los elementos de la barra de navegación, todos se deslizan desde la derecha. Impresionante.

Si quieres que los elementos de la barra de navegación se deslicen desde la izquierda, cambia el valor de la propiedad transform a transform: translateX(-120%) (esto es el opuesto directo de transform: translateX(120%)). Es tan fácil como eso, dependiendo de tu preferencia.

También asigné un margen de 8px a los elementos de navegación para darles más espacio.

La barra de navegación ahora luce así:

El menú de hamburguesas permanece oculto. Por lo tanto, necesitamos mostrarlo dandole un display: block, asignándole una clase de show para en la propiedad transform dar el valor de 0 en el eje-X translateX(0) para mostrarlo, y después interactuar con el usando JavaScript .

 .menu-hamburguesa {
    display: block;
  }

  nav ul.show {
    transform: translateX(0);
  }

Nuestro menú de hamburguesa puede mostrarse, pero los elementos de la barra de navegación están ocultos. Para mostrarlos, necesitamos activar y desactivar la clase show con JavaScript.

Escribiendo JavaScript para hacer el Menú de Hamburguesa

Para activar y desactivar con JavaScript los elementos del menú de la barra de navegación, necesitamos primero seleccionar todos los elementos relevantes de la barra de navegación y guardarlos en algunas variables:

// Selecciones para Barra de navegación hamburguesa

const burger = document.querySelector("#burger-menu");
const ul = document.querySelector("nav ul");
const nav = document.querySelector("nav");

La variable burger seleccionan la barra de menú de hamburguesa.
La variable ul selecciona los elementos de la lista (los enlaces de navegación en conjunto ).
La variable nav selecciona el propio contenedor (el elemento de navegación).

Lo siguiente que necesitamos hacer es activar la clase de nav ul.show cuando el usuario hace click en el menú de hamburguesa de la barra de navegación. Haremos esto agregando un eventListener click al menú de hamburguesa del barra de menú, y después usar el método para activar to the hamburger menu bar, y luego usando el método de alternar para eliminar y agregar la clase de show. show.

Recordemos que lo seleccionamos y lo guardamos en una variable llamada burger.

burger.addEventListener("click", () => {
  ul.classList.toggle("show");
});

Nuestros elementos de navegación ahora se pueden activar y desactivar:

Pero hay un problema – la barra de navegación en móvil no se oculta cada vez que se hace click en cualquiera de los enlaces de los elementos de navegación. Por lo tanto, debemos eliminar la clase de nav ul.show cuando se hace click en cualquiera de los enlaces del elemento de navegación.

Podemos hacer esto con solo algunas líneas de JavaScript también:

// Cerrar el menú de hambuguesa cuando se hace click en un enlace  

// Seleccionar enlaces de navegación
const navLink = document.querySelectorAll(".nav-link");

navLink.forEach((link) =>
  link.addEventListener("click", () => {
    ul.classList.remove("show");
  })
);

Recuerda que los enlaces de navegación tienen una clase de enlace de navegación del HTML. Así que los seleccioné todos con esa clase y los puse en una variable llamada nav-link. Hicimos esto con el método querySelectorAll() .

Luego recorrí todos los enlaces con el método forEach de arreglos y puse un event listener de click en todos ellos. Después usé el método remove() proporcionado por el DOM para eliminar la clase de show cada vez que se hace click en cualquiera de los elementos del menú de navegación. Esto sacará del viewport todos los elementos de la lista.

Mira eso !

Esto es un gran avance. Con lo que hemos cubierto ya puedes hacer un menú de hamburguesa para cualquier sitio web.

Como hacer responsiva la sección Hero

La sección Hero no se ve muy bien actualmente:

Todo lo que tenemos que hacer es usar la propiedad flex-direction con un atributo de column en la consulta de medios, reducir el ancho y altura de la imagen de Jane Doe, y hacer que el texto de Sobre Mí (bio texto) sea legible.

.hero {
    margin-top: -4rem;
    flex-direction: column;
    gap: 0;
  }

  .hero img {
        height: 37.5rem;
        width: 30rem;
    }

  .bio {
    margin-top: -7rem;
    width: 20.5rem;
  }

La sección hero luce mejor ahora :

Como hacer responsiva la sección de Más Sobre mí

La sección de Más sobre mí no se ve tan mal, pero claramente podemos hacer algo por mejorarla:

Tenemos el siguiente código de CSS para hacerlo más legible y presentable:

 .mas-sobre {
    margin-top: 2rem;
    padding: 1rem 3.5rem;
  }

  .mas-sobre h2 {
    text-align: center;
  }

  .mas-sobre p {
    text-align: justify;
  }

Movimos toda la sección un poco hacia abajo y le incrementamos el padding en todos sus lados, alineamos el h2 al centro, y justificamos el texto.

Como hacer responsiva la sección de Habilidades

Los iconos de habilidades lucen muy grandes:

Todo lo que tenemos que hacer en la consulta de medios es reducir el tamaño de todos los iconos con las propiedades de width y height: :

.icono {
    width: 5.875rem;
    height: 5.25rem;
  }

Como hacer responsiva la sección de Proyectos

En esta sección de proyectos, necesitamos hacer que los tres proyectos se apilen uno encima del otro configurando la propiedad de flex-direction a column. También reduciremos un poco el ancho de los contenedores individuales.

 .contenedor-proyectos {
    flex-direction: column;
  }

  .contenedor-proyecto {
    width: 20.875rem;
  }

Como hacer responsivo el formulario de Contacto

Necesitamos reducir el ancho del formulario de contacto para alejarlo de los lados y asegurarse de que los iconos fijos de las redes sociales no estén encima.

Todo lo que necesitamos es establecer un ancho máximo:

 .contenedor-formulario-de-contacto {
    max-width: 23.75rem;
  }

El formulario de contacto ahora se ve mejor:

Como hacer responsivo el sitio web para teléfonos pequeños

En teléfonos pequeños como el iPhone 6, 7, y 8 plus, los iconos de redes sociales y el icono de desplazamiento-hacia-arriba no se muestran. También hay una barra de desplazamiento horizontal.

Para corregir estas peculiaridades, agregaremos consulta de medios en un breakpoint de 420px:

@media screen and (max-width: 420px) {
  .hero img {
    height: 37.5rem;
    width: 23rem;
  }

  .bio {
    width: 18.3rem;
  }

  .contenedor-proyecto {
    width: 17.875rem;
  }

  .contenedor-formulario-de-contacto{
    max-width: 17.75rem;
  }
}

Reduje el tamaño de nuestra imagen de Jane Doe y también reduje el ancho del texto de la biografía (Texto Acerca de Mí), el contenedor del proyecto, y el formulario de contacto.

Todos estos cambios harán que se muestren los iconos fijos en el lado derecho del sitio web: las redes sociales y los iconos de desplazamiento-hacia-arriba.

Ahora todo se ve bien:

Ese es el final de todo. Tenemos un portafolio de nuestro sitio web totalmente responsivo.

Puedes descargar la versión final en el archivo formato zip desde este repositorio de GitHub repo.

También puedes consultar la live demo del sitio web del portafolio. Tiene un archivo readme que contiene información sobre las herramientas que utilicé y como puedes personalizar el sitio web.

Conclusión

En este tutorial, aprendiste que es un portafolio de un desarrollador web y las razones por las que deberías tener uno.

También aprendiste como hacer un sitio web portafolio completamente responsivo usando HTML, CSS, y JavaScript.

Las partes diferentes de este tutorial son cada uno de de los proyectos, que combinados, se convierten en un sitio web más grande. Por ejemplo, puedes hacer el diseño de una tarjeta, una barra de menú responsiva, un formulario de contacto funcional, y un botón de desplazamiento-hacia-arriba, ya que el tutorial los cubre todos.

Siéntete libre de personalizar el sitio web a tu gusto .

Si encuentras útil este tutorial, puedes compartirlo con tus amigos y familiares. Realmente lo apreciaría.

¿Qué es el DOM? El significado del Modelo de Objeto de Documento en JavaScript

Jorge Torres Torres — Thu, 06 Jan 2022 08:00:00 +0000

Artículo original escrito por: Jessica Wilkins
Artículo original: What is the DOM? Document Object Model Meaning in JavaScript
Traducido y adaptado por: Jorge Torres

Si has empezado a estudiar JavaScript, seguramente has escuchado del DOM. ¿Pero qué es exactamente?

En este artículo, explicaré que es el DOM y daré algunos ejemplos usando código de JavaScript.

Revisaremos como seleccionar elementos de un documento HTML, como crear elementos, como cambiar estilos en línea de CSS, y como escuchar los elementos.

¿Qué es el DOM?

DOM significa Document Object Model, en español sería Modelo de Objetos del Documento. Es una interfaz de programación que nos permite crear, cambiar, o remover elementos del documento. También podemos agregar eventos a esos elementos para hacer más dinámica nuestra página.

El DOM visualiza el documento de HTML como un árbol de tres nodos. Un nodo representa un documento de HTML.

Echemos un vistazo a este código de HTML para entender mejor la estructura de árbol del DOM.



  
    
    
    
    Estructura de árbol del DOM
  
  
    Estructura de árbol del DOM
	Aprende sobre el DOM

Nuestro documento se llama nodo raíz y contiene un nodo hijo el cual es el elemento . El elemento contiene dos hijos los cuales son los elementos y .

Ambos elementos y tienen hijos propios.

Aquí hay otra forma de visualizar este árbol de nodos.

Podemos acceder a estos elementos en el documento y hacer cambios a ellos usando JavaScript.

Veamos algunos ejemplos de como podemos trabajar con el DOM usando JavaScript.

Como seleccionar Elementos en el Documento

Hay diferentes métodos para seleccionar un elemento en el documento de HTML.

En este artículo, nos enfocaremos en tres de esos métodos:

getElementById()
querySelector()
querySelectorAll()

`getElementById()`

En HTML, los ids se utilizan como identificadores únicos para los elementos HTML. Esto significa que no podemos tener el mismo nombre de id para dos elementos diferentes.

Esto sería incorrecto:

Este es mi primer parágrafo.
Este es mi segundo parágrafo.

Tendrías que asegurarte de que esos id sean únicos como los siguientes:

Este es mi primer parágrafo.
Este es mi segundo parágrafo.

En JavaScript, podemos tomar una etiqueta de HTML haciendo referencia al nombre del id.

document.getElementById("nombre de id va aquí")

Este código le dice a la computadora que obtenga el elemento

que tiene el id de para1 y que imprima el elemento en la consola.

const paragraph1 = document.getElementById("para1");
console.log(paragraph1);

Si deseamos leer solamente el contenido del párrafo, entonces podemos usar la propiedad textContent dentro del console.log().

const paragraph1 = document.getElementById("para1");
console.log(paragraph1.textContent);

`querySelector()`

Puedes usar este método para encontrar elementos con uno o más selectores de CSS.

He creado este ejemplo de HTML con información de mis shows favoritos de tv:

Favorite TV shows

  Golden Girls
  Archer
  Rick and Morty
  The Crown

Si deseamos encontrar en la consola e imprimir el elemento h1 , entonces podemos usar ese nombre de etiqueta dentro del querySelector().

const h1Element = document.querySelector("h1");
console.log(h1Element);

Si quisiera apuntar a class="list" para imprimir la lista no ordenada en la consola, entonces usaría .list dentro del querySelector().

El . antes de list le dice a la computadora que apunte al nombre de la Clase. Si deseas apuntar a un id entonces te recomiendo usar el símbolo # antes del nombre.

const list = document.querySelector(".list");
console.log(list);

`querySelectorAll()`

Este método encuentra todos los elementos que coinciden con el selector de CSS y devuelve una lista de todos esos nodos.

Si quisiera encontrar todos los elementos

en nuestro ejemplo, podría utilizar el combinador de hijos > para encontrar a todos los elementos hijos de

const listItems = document.querySelectorAll("ul > li");
console.log(listItems);

Si quisiéramos imprimir los elementos reales

con los shows de tv, podemos usar el ciclo forEach() para iterar sobre la NodeList e imprimir cada uno de los elementos.
```
const listaDeElementos = document.querySelectorAll("ul > li");

listaDeElementos.forEach((item) => {
  console.log(item);
});
```
Como agregar nuevos elementos al Documento
Podemos utilizar document.createElement() para agregar nuevos elementos al árbol del DOM.
Veamos este ejemplo:
```
Reasons why I Love freeCodeCamp:
```
Ahora, solo tengo una etiqueta
en la página. Pero quiero agregar debajo de esa etiqueta
una lista de razones por las cuales amo freeCodeCamp usando JavaScript.
Primero podemos crear un elemento

Aprende validación de formularios JavaScript: Cree un proyecto JS para principiantes ✨

Jorge Torres Torres — Fri, 12 Nov 2021 12:00:00 +0000

Artículo original escrito por: Joy Shaheb
Artículo original: Learn JavaScript Form Validation - Build a JS Project for Beginners
Traducido y adaptado por: Jorge Torres

Hoy aprenderemos como hacer una validación de formulario en JavaScript. También agregaremos imágenes y media queries para construir todo el proyecto e incluso puedes guardarlo como parte de tu portafolio.

Esta es la demostración del proyecto que vamos a construir?

Desktop design

Esta es una pequeña muestra de como funcionaría el formulario?

project sample

Si lo deseas, puedes ver también este tutorial de YouTube:

Código fuente

Puedes obtener el código fuente, incluyendo las imágenes, en los siguientes enlaces:

Como configurar el proyecto

Sigue estos pasos para configurar nuestro proyecto: ?

Crea una nueva carpeta con el nombre "Proyecto" y abre VS Code
Crea los archivos índice.html, estilos.css y main.js
Enlaza los archivos dentro del HTML
Descarga las imágenes de mi repositorio de GitHub.
Pega este enlace de font-awesome dentro de la etiqueta head en el HTML. Así podremos tener acceso a iconos de Font Awesome ??

Esto es lo que cubriremos

Escribiendo el HTML
Agregando CSS
Escribiendo JavaScript
Agregar un botón de redes sociales
Agregando imágenes
Media queries para la versión móvil (Diseño responsivo)

Table of contents

Como escribir el HTML

Crea una clase llamada .container dentro de la etiqueta body la cual va a alojar la etiqueta del formulario (form) y que al mismo tiempo tendrá el identificador de form.?

Y dentro de la etiqueta form, crea 4 divs, como este ejemplo ?



    Empezar

Dentro de esas 3 etiquetas div vacías, vamos a crear 3 entradas [nombreDeUsuario, correoElectronico y contraseña] junto con los iconos y etiquetas.

Nota: vamos a crear una clase con nombre .error. Aquí usaremos JavaScript para insertar el mensaje de error.

Entrada de nombreDeUsuario


        

	Nombre de Usuario

Entrada de correo electrónico


        

	Correo Electrónico

Entrada Contraseña


        

	Contraseña

Como hacer un botón

Finalmente, agrega el botón antes del cierre de la etiqueta del formulario de la siguiente manera:

Aquí el resultado hasta ahora: ?

Result So far

Felicidades por completar la parte del HTML! ???

Como agregar el CSS

Vamos a agregar estilos con CSS a nuestro Formulario. Primero, eliminemos los estilos predeterminados de nuestro navegador incluyendo la fuente?

/**
* ! cambiando estilos predeterminados del navegador
**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

Ahora, aplicaremos esos estilos a la etiqueta del formulario:

/**
* ! reglas de estilo para la sección del formulario
**/

formulario {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 50px;
}

Posteriormente, haremos los siguientes cambios para el título del texto: ??

.titulo {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}

Tu resultado hasta ahora??

Result so far

Ahora, agrega un margen al botón del texto de nuestra etiqueta label así:

label {
  display: block;
  margin-bottom: 5px;
}

Y agrega estos estilos para cambiar el aspecto de nuestras etiquetas input??

formulario div input {
  width: 100%;
  height: 40px;
  border-radius: 8px;
  outline: none;
  border: 2px solid #c4c4c4;
  padding: 0 30px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

Agrega este código para dar más espacio y efectos de cambio de color:

formulario div {
  position: relative;
  margin-bottom: 15px;
}

input:focus {
  border: 2px solid #f2796e;
}

El resultado hasta ahora ??

Result so far

Como dar Estilo a los iconos

Ahora le daremos estilo a los iconos que importamos de font-awesome. Sigue el código conmigo :✨✨

/**
* ! reglas de estilo para los iconos del formulario
**/

formulario div i {
  position: absolute;
  padding: 10px;
}

Aquí tenemos el resultado de agregar esas dos líneas??

Result so far

Ahora, agrega estos estilos para dar estilo a la clase error, junto con el icono de success y failure ??

.failure-icon,
.error {
  color: red;
}

.success-icon {
  color: green;
}

.error {
  font-size: 14.5px;
  margin-top: 5px;
}

Aquí el resultado hasta ahora??

Result so far

Mira, los iconos success y failure se superponen entre sí. No te preocupes, manipularemos eso con JavaScript. Por ahora, puedes esconderlos así??

.success-icon,
.failure-icon {
  right: 0;
  opacity: 0;
}

Ahora, vamos a dar estilo a nuestro botón de enviar, de esta manera ?

/* Reglas de estilo para botón enviar */

button {
  margin-top: 15px;
  width: 100%;
  height: 45px;
  background-color: #f2796e;
  border: 2px solid #f2796e;
  border-radius: 8px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

Si quieres agregar un efecto hover, entonces, agrega estos estilos ??

button:hover {
  opacity: 0.8;
}

¡Toma un descanso!

Hasta ahora todo muy bien. Toma un descanso – lo mereces.

Como agregar JavaScript

Primero, necesitamos apuntar a todas nuestras clases y al id del HTML dentro del JavaScript. Para hacer esta tarea eficientemente, haz estas dos funciones ??

let id = (id) => document.getElementById(id);

let classes = (classes) => document.getElementsByClassName(classes);

Después, guarda las clases y el id dentro de estas variables?

Nota: Trata de no cometer errores de ortografía. De lo contrario, tu JavaScript no funcionará.

let nombreDeUsuario = id("nombreDeUsuario"),
  email = id("email"),
  contrasena = id("contrasena"),
  formulario = id("formulario"),
  
  msjError = classes("error"),
  iconoExito = classes("success-icon"),
  failureIcon = classes("failure-icon");

Ahora, vamos a apuntar a nuestro formulario y agregar el event listener a enviar ?


form.addEventListener("enviar", (e) => {
  e.preventDefault();
});

Ahora, crearemos una función llamada motor que hará todo el trabajo de validación de formularios para nosotros. Tendrá tres argumentos – sigue aquí: ?

let motor = (id, serial, mensaje) => {}

Los argumentos representan lo siguiente:

id va a apuntar a nuestro identificador
serial va a apuntar a todas nuestras clases[error class, success and failure icons]
mensaje va a imprimir en mensaje dentro de nuestra clase .error

Ahora crea una sentencia if, else así ?

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
  } 
  
  else {
  }
}

Nota: id.value.trim() va a remover todos los espacios extra del valor que el usuario ingresa. Puedes darte una idea de como funciona analizando está ilustración ?

trim() used to remove extra spaces

Ahora, mira nuestros siguientes objetivos ?

Queremos que JavaScript imprima un mensaje dentro de la clase error cada que el usuario envié un formulario en blanco. Y al mismo tiempo, queremos que los iconos de failure resalten también.
Pero, si el usuario rellena todas las entradas y las envía, queremos que el botón de success se haga visible.

Para lograr esto, escribe esta lógica? para imprimir el mensaje:

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
    msjError[serial].innerHTML = mensaje;
  } 
  
  else {
    msjError[serial].innerHTML = "";
  }
}

Para que los iconos funcionen correctamente, agrega este código: ??

let motor = (id, serial, mensaje) => {

  if (id.value.trim() === "") {
    msjError[serial].innerHTML = mensaje;
    id.style.border = "2px solid red";
    
    // iconos
    failureIcon[serial].style.opacity = "1";
    successIcon[serial].style.opacity = "0";
  } 
  
  else {
    msjError[serial].innerHTML = "";
    id.style.border = "2px solid green";
    
    // iconos
    failureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
  }
}

Es tiempo de implementar nuestra función recién creada. Escribe el siguiente código en el lugar donde agregamos el event listener de enviar ?

form.addEventListener("enviar", (e) => {
  e.preventDefault();

  motor(nombreDeUsuario, 0, "El nombre de usuario no puede estar en blanco");
  motor(correoElectronico, 1, "El correo electrónico no puede estar en blanco");
  motor(contrasena, 2, "La contraseña no puede estar en blanco");
});

Aquí, pasamos los nombres de los id, las series de los nombres de nuestras clases de nombre y pasamos el mensaje que se debe imprimir cuando encontramos un error cuando el usuario envíe el formulario.

Aquí los resultados hasta ahora ?

The Result so far

Como agregar los botones de redes sociales

Todo bien hasta ahora, agreguemos las opciones de registro con redes sociales. Sigue los pasos aquí. ?

Dentro de la etiqueta del formulario, crea un nuevo div con el nombre de clase social:



    
    
      Empieza ya
      
      
        Ya estás registrado? 

        Registrate
      

      

      O

Dentro de la clase .btn, creamos dos divs más con los nombres de clase .btn-1 y .btn-2 con las imágenes y el texto también.


  
     
     Registrate
  
  
  
    
     Registrate

Así van nuestro resultado hasta ahora??

The Result so far

Ahora, primero vamos a darle estilo a .btn-1 y .btn-2 . Cambiaremos la alineación de los botones a fila de columna?

/**
* ! reglas de estilo para la sección de redes sociales
**/

.btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 15px;
}

Así es como se vería ahora:

The Result so far

Ahora, agrega estilos para el botón así: ?

.btn-1,
.btn-2 {
  padding: 10px 5px;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: center;
  border: 2px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

Cambia el color del icono y el color del texto del .btn-2 así: ?

.btn-2 {
  background-color: #4f70b5;
  color: white;
}

Después agrega estos pequeños cambios para que el componente se vea mejor:

.or {
  text-align: center;
}

.pregunta {
  font-size: 15px;
}

span {
  color: #f2796e;
  cursor: pointer;
}

El resultado hasta ahora luce así:

Result so far

Como agregar imágenes

Ahora, agregaremos imágenes a nuestro proyecto. Primero, escribiremos el HTML ?



      
        
          
        
        
        
        
        
          Empieza gratis & obten 

          atractivas ofertas hoy !

El resultado hasta ahora?

Result so far

Ahora necesitamos cambiar la orientación de nuestro contenido de columna a fila. Sigue los pasos a continuación ?

.container {
  display: flex;
  flex-direction: row;
}

Agrega estas reglas de estilo para la sección de contenido:

/**
* ! reglas de estilo  para la sección de contenido
**/

.contenido {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-color: #f2796e;
  width: 55%;
  min-height: 100vh;
  padding: 10px 20px;
}

formulario {
   width: 45%;
   max-width: none;
}

El resultado hasta ahora ?

Result so far

Agrega la ilustración principal con CSS:

.imagen {
  background-image: url("https://svgshare.com/i/_gZ.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  /* border: 2px solid black; */
  height: 65%;
}

Y agrega estos estilos para la clase .texto:

.texto {
  text-align: center;
  color: white;
  font-size: 18px;
}

formulario {
   width: 45%;
   max-width: none;
}

El Resultado hasta ahora ?

Result so far

Como agregar Media Queries para la Versión Mobile

Queremos que nuestro formulario tenga un diseño responsivo. Así que agregaremos media queries para que nos ayuden a lograrlo.

Para pantallas con un ancho de 900 px, vamos a agregar estos estilos. Sigue los pasos ??

@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }

  formulario,
  .contenido {
    width: 100%;
  }

  .btn {
    flex-direction: column;
  }
  .imagen {
    height: 70vh;
  }
}

Para pantallas con un ancho de 425px, haremos estos cambios mínimos ?

@media (max-width: 425px) {
  formulario {
    padding: 20px;
  }
}

Este es el resultado final??

The final result

Conclusión

Congratulations !

Felicidades por completar tu lectura de este tutorial. Ahora puedes fácil y eficientemente usar JavaScript para manejar validación de formularios. ¡Pero no solo eso, también tienes ya un proyecto listo para mostrar a tu reclutador local!

Aquí tienes tu medalla por leer hasta el final ❤️

Sugerencias y retroalimentación serán muy apreciadas ❤️

Tutorial de JavaScript array.forEach(): Como iterar a través de elementos en un arreglo

Jorge Torres Torres — Wed, 06 Oct 2021 12:00:00 +0000

Artículo original escrito por: Kingsley Ubah
Artículo original: JavaScript Array.forEach() Tutorial - How to Iterate Through Elements in an Array
Traducido y adaptado por: Jorge Torres

En JavaScript, con frecuencia te verás en necesidad de iterar a través de una colección de arreglos y ejecutar un método callback por cada una de las iteraciones. Y para realizarlo hay un método muy útil que los desarrolladores de JavaScript típicamente utilizan: el método forEach().

El método forEach() llama a una función callback específica una vez por cada elemento sobre el que itera dentro de un arreglo. Al igual que otros iteradores de arreglos tales como map y filter, la función callback puede recibir tres parámetros.

El elemento actual: Este es el elemento del arreglo por el cual se está haciendo la iteración.
Su índice: Este es el índice de la posición que tiene el elemento dentro del arreglo.
El arreglo objetivo: Este es el arreglo por el cual se está haciendo la iteración.

El método forEach no regresa un nuevo arreglo al igual que lo hacen otros iteradores tal como filter, map y sort. En cambio, el método devuelve el valor undefined por sí solo. Por lo tanto no se puede encadenar como los otros métodos.

Otra cosa acerca de forEach es que no puedes terminar el bucle (con la instrucción break) o hacerlo saltarse una iteración (con la sentencia continue). En otras palabras, no lo puedes controlar.

La única manera de finalizar un bucle forEach es incluyendo una excepción dentro de la función callback. No te preocupes, pronto veremos todo esto en la práctica.

Como usar el método `forEach()` en JavaScript

Imagina que un grupo de estudiantes hacen una fila para el pase de lista de rutina. El coordinador de la clase se mueve a través de la fila y dice el nombre de cada uno de los estudiantes mientras marca si están presentes o ausentes.

Es importante hacer mención que el coordinador no cambia el orden de los estudiantes en la fila. También los mantiene en la misma fila después de terminar el pase de lista. Todo lo que realiza es una acción (su inspección) en cada uno de ellos.

En los siguientes ejemplos, teniendo en mente este escenario, veremos como puedes utilizar el método forEach para resolver problemas de la vida real con JavaScript.

Ejemplos del método `forEach()` en JavaScript

Como remover el primer número impar en un arreglo con `forEach()`

En este ejemplo, tenemos un arreglo que contiene un número impar en la primera posición y varios números pares después. Pero solo queremos números pares en este arreglo. Así que vamos a remover el número impar del arreglo usando el bucle forEach():

let numeros = [3, 6, 8, 10, 12]
let impar = 3;

numeros.forEach(function(numero) {
    if (numero === impar) {
        numeros.shift() // 3 será borrado del arreglo
    }
})

console.log(numeros);

[6, 8, 10, 12] // Todos son pares!

Como acceder a la propiedad del índice con `forEach()`

En este ejemplo, vamos a ejecutar la función pasarLista por cada uno de los estudiantes por los que se recorrió el bucle dentro del arreglo. La función pasarLista solamente registra en la consola una cadena perteneciente a cada uno de los estudiantes.

nombres = ["anna", "beth", "chris", "daniel", "ethan"]

function pasarLista(nombre, indice) {
    console.log(`Está el numero de estudiante ${indice + 1}  -${nombre} - presente? Sí!`)
    ;}

numeros.forEach((nombre, indice) => pasarLista(nombre, indice));


/*
"Está el número de estudiante 1  - anna presente? Sí!"
"Está el número de estudiante 2  - beth presente? Sí!"
"Está el número de estudiante 3  - chris presente? Sí!"
"Está el número de estudiante 4  - daniel presente? Sí!"
"Está el número de estudiante 5  - ethan presente? Sí!"
*/

En este ejemplo, el nombre era la única información que teníamos sobre cada estudiante. Sin embargo, también queremos saber cuáles pronombres usa cada estudiante. En otras palabras, queremos definir una propiedad pronombre para cada estudiante.

Entonces vamos a definir a cada estudiante como un objeto con dos propiedades, nombre y pronombre:

nombres = [
    {nombre:"anna",pronombre: "ella"},
    {nombre: "beth",pronombre: "elle"},
    {nombre:"chris",pronombre: "él"},
    {nombre: "daniel",pronombre: "él"},
    {nombre: "ethan",pronombre: "él"}
]

function pasarLista(estudiante, indice) {
    console.log(`El número de estudiante  ${indice + 1} ${estudiante.nombre}. Está ${estudiante.pronombre} presente? Sí!`);
}

numeros.forEach((nombre, indice) => pasarLista(nombre, indice));

/*
"El número de estudiante 1 es anna. Está ella presente? Sí!"
"El número de estudiante 2 es beth. Está elle presente? Sí!"
"El número de estudiante 3 es chris. Está él presente? Sí!"
"El número de estudiante 4 es daniel. Está él presente? Sí!"
"El número de estudiante 5 es ethan. Está él presente? Sí!"
*/

Estamos registrando en la consola el pase de lista de cada estudiante, luego realizamos una verificación para ver qué pronombre usa cada estudiante, y finalmente pasamos dinámicamente el pronombre correcto como parte de la cadena.

Como copiar un arreglo en un nuevo arreglo con `forEach()` en JavaScript

Después de tres años de estudio, es tiempo de que cada estudiante se gradúe. En nuestro JavaScript, vamos a definir dos arreglos: aunEstudiante y yaGraduado. Como probablemente adivinaste, aunEstudiante guarda el dato de los estudiantes antes de su graduación.

Posteriormente, el bucle forEach toma el dato de cada uno de los estudiantes y llama a la función estudianteGraduado en el.

En esta función construimos un objeto con dos propiedades: el nombre de estudiante y la posición en la que se graduó. Luego pasamos el nuevo objeto al arreglo yaGraduado. A este punto, el estudiante ya se ha graduado.

Este ejemplo también demuestra como puede usar el método forEach() para copiar un arreglo dentro de un nuevo arreglo.

let aunEstudiante = ["anna", "beth", "chris", "daniel", "ethan"]
let yaGraduado = []

function estudianteGraduado(estudiante, indice) {
    let objeto = { nombre: estudiante, posicion: indice + 1}
    yaGraduado[indice] = objeto
}

aunEstudiante.forEach((nombre, indice) => estudianteGraduado(nombre, indice));

console.log(yaGraduado);

/*
[
    { nombre: "anna", posición: 1}, 
    { nombre: "beth", posición: 2}, 
    { nombre: "chris", posición: 3}, 
    { nombre: "daniel", posición: 4}, 
    { nombre: "ethan", posicion: 5}]
]
*/

Como revisar el elemento siguiente en un arreglo con el parámetro arreglo

En algún momento, el profesor deberá verificar si la lista tiene a continuación un elemento en particular en la lista. En tal caso, el profesor deberá tener una visión amplia de toda la lista. De esa manera, puede saber si hay un próximo estudiante al cual llamar.

En nuestro JavaScript, podemos replicar esto porque la función callback también puede acceder al parámetro (el tercero) del arreglo. Este parámetro representa el arreglo objetivo, que es nombre.

Verificamos si hay un siguiente elemento (estudiante) en el arreglo. Si lo hay, pasamos la cadena positivo a la variable siguienteElemento. Si no hay ninguno, pasamos la cadena negativo a la variable. Luego para cada iteración, revisamos si ese estudiante es realmente el último.

nombres = ["anna", "beth", "chris", "daniel", "ethan"]

function pasarLista(nombre, indice, arreglo) {
    let siguienteElemento = indice + 1 < arreglo.length ? "positivo" : "negativo"
    console.log(`Está el número de estudiante ${indice + 1}  - ${name} presente? Sí!. Hay un próximo estudiante? ${siguienteElemento}!`);
}

nombres.forEach((nombre, indice, arreglo) => pasarLista(nombre, indice, arreglo))

/*
"Está el número de estudiante 1 - anna presente? Sí!. Hay un próximo estudiante? positivo!"
"Está el número de estudiante 2 - beth presente? Sí!. Hay un próximo estudiante? positivo!"
"Está el número  de estudiante 3 - chris presente? Sí!. Hay un próximo estudiante? positivo!"
"Está el número  de estudiante 4 - daniel presente? Sí!. Hay un próximo estudiante? positivo!"
"Está el número  de estudiante 5 - ethan presente? Sí!. Hay un próximo estudiante? negativo!"
*/

No puedes salir del bucle `forEach`, en su lugar utiliza `every()`

¿Recuerdas cuando mencioné que, por su naturaleza, no puedes salir de un bucle forEach? Una vez iniciado, va a correr hasta que alcanza el último elemento del arreglo. Así que si insertas una declaración de break, te va a regresar un error de sintaxis, SyntaxError:

let numeros = [2, 4, 5, 8, 12]
let impar = 5;

numeros.forEach(function(numero) {
    if (numero === impar) {
        break; // oops, esto no va a funcionar!
    }
})

Normalmente preferirías salir del bucle una vez que consigues que tu código realice su objetivo antes de alcanzar el último elemento. En nuestro ejemplo de arriba, ya encontramos el número impar (5), así no que no había necesidad de seguir iterando sobre los siguientes elementos (8 y 12).

Si te deseas salir de un bucle en alguna condición, entonces te recomiendo utilizar cualquiera de los siguientes métodos.

bucle for
bucle for…of o for…in
Array.some()
Array.every()
Array.find()

Así es como puedes salirte de un bucle con Array.every():

let numeros = [2, 4, 5, 8, 12]
let impar = 5;

numeros.every(numero => {
  if (numero == impar) {
    return false;
  }

  console.log(numero);
  
  return true;
});

// 2 4

Cierre

En este tutorial, te he presentado el método forEach, ilustré su funcionamiento con una simple analogía, y también te di algunos ejemplos prácticos de su uso en código de JavaScript.

Espero este artículo haya sido de tu utilidad.

Si quieres aprender más sobre Desarrollo Web, no dudes en visitar mi Blog.

Gracias por leer y espero verte pronto.

P/S: Si estás aprendiendo JavaScript, he escrito un eBook que enseña 50 temas de JavaScript con notas digitales escritas a mano. Echale un vistazo aquí.

Jorge Torres Torres - freeCodeCamp.org

Cómo aprender a programar: La guía que desearía haber tenido cuando empecé a aprender a programar

14 Pasos en la ruta de aprendizaje para Desarrolladores principiantes

1) Familiarízate con Arquitectura Computacional y Básicos de Datos

2)Aprende cómo funcionan los Lenguajes de Programación

3)Comprende cómo funciona el Internet

4) Practica básica de la Línea de Comandos

Como usar la Terminal de Línea de Comandos

5.Incrementa tus Habilidades en el Editor de Texto con Vim

6) Aprende algo de HTML

: Un encabezado de página generalmente utilizado para títulos de página.

:Un encabezado de sección generalmente utilizado para títulos de sección.

10)Amplia tu conocimiento con Java

Tipos de Datos en Java

Declaraciones de control de flujo de programa en Java

Declaraciones If / Else

11) Rastrea tu Código usando Git

Comandos básicos de Git

12) Almacenar datos usando Bases de Datos y SQL

13) Leer sobre Frameworks y MVC

14) Jugando con Administrador de Paquetes

Linux: Apt y Yum

JavaScript: Node Package Manager (NPM)

Python: Pip

Java: Apache Maven

Resumen

Próximos Pasos

Como construir tu propio portafolio web de desarrollador con HTML, CSS y JavaScript

Tabla de contenidos

¿Qué es un portafolio web de desarrollador?

¿Porqué deberías tener un Portafolio web de Desarrollador?

1. Un Portafolio web incrementa tu presencia en línea

2. Un portafolio web es tu currículum en línea

3. Un portafolio es evidencia de tu experiencia en tu área

Proyecto portafolio - Como construir tu propio portafolio en línea de desarrollador

La estructura de carpetas del proyecto

El código básico de HTML

La Sección de la barra de navegación

Como dar estilos a la barra de navegación

Como construir la sección Hero

Sobre Mí

Como dar Estilo a la Sección Hero

Como construir la sección Más Sobre Mí

Más sobre mí

Como construir la sección de Habilidades

Mis mejores habilidades

Como aplicar estilos a la sección de Habilidades

Como construir la sección de Proyectos

Algunos de mis proyectos recientes

Rastreador de Gastos

Netflix Clone

Greeny Earth

Como dar estilos a la sección de Proyectos

Como construir la sección Contacto

Contactame

Como dar estilo a la sección Contacto

Como dar estilos a los iconos de redes sociales

Como Agregar un Botón de Desplazarse hacia Arriba

El HTML para el botón Desplazarse hacia Arriba

Como dar estilos al icono de Desplazarse-hacia-Arriba

Como hacer Responsivo tu Portafolio web

Como crear la Consulta de Medios para Tabletas y Teléfonos móviles (max-width 720px)

Como construir el menú de hamburguesas

Escribiendo JavaScript para hacer el Menú de Hamburguesa

Como hacer responsiva la sección Hero

Como hacer responsiva la sección de Más Sobre mí

Como hacer responsiva la sección de Habilidades

Como hacer responsiva la sección de Proyectos

Como hacer responsivo el formulario de Contacto

Como hacer responsivo el sitio web para teléfonos pequeños

Conclusión

¿Qué es el DOM? El significado del Modelo de Objeto de Documento en JavaScript

¿Qué es el DOM?

Estructura de árbol del DOM

Aprende sobre el DOM

Como seleccionar Elementos en el Documento

getElementById()

querySelector()

Favorite TV shows

querySelectorAll()

`getElementById()`

`querySelector()`

`querySelectorAll()`

Como usar el método `forEach()` en JavaScript

Ejemplos del método `forEach()` en JavaScript

Como remover el primer número impar en un arreglo con `forEach()`

Como acceder a la propiedad del índice con `forEach()`

Como copiar un arreglo en un nuevo arreglo con `forEach()` en JavaScript

No puedes salir del bucle `forEach`, en su lugar utiliza `every()`