¿Alguna vez te has preguntado cómo funciona la programación de páginas web, pero no has hecho nada más complicado que subir una foto a Facebook? Bienvenido, estás en el lugar correcto. Para alguien que no ha programado nada en su vida, el concepto de crear un sitio web desde cero puede parecer imposible. En realidad puedes, y de una forma mucho más sencilla de lo que te imaginas.
Cualquiera puede aprender a codificar, al igual que cualquiera puede aprender un nuevo idioma. De hecho, la programación se parece mucho a hablar un idioma extranjero, por eso se les llama lenguajes de programación. Cada uno tiene sus propias reglas y sintaxis que deben aprenderse paso a paso. Esas reglas son formas de decirle a tu ordenador qué hacer.
El objetivo de este artículo, es enseñarte los conceptos básicos de HTML, CSS y uno de los lenguajes de programación más comunes, JavaScript. Pero antes de comenzar, vamos a aclarar lo que realmente son los lenguajes de programación.
Programar, o codificar, es como resolver un rompecabezas. Considera un idioma humano, como el inglés o el francés. Usamos estos idiomas para convertir pensamientos e ideas en acciones y comportamientos. En la programación, el objetivo del rompecabezas es exactamente el mismo: solo estás dirigiendo diferentes tipos de comportamiento, y la fuente de ese comportamiento no es un ser humano. Es un ordenador.
Un lenguaje de programación es nuestra forma de comunicarnos con el software. Las personas que usan lenguajes de programación a menudo se llaman programadores o desarrolladores. Lo que le indicamos al software que usa un lenguaje de programación podría ser hacer que una página web se vea de cierta manera, o hacer que un objeto en la página se mueva si el usuario realiza una determinada acción.
Entonces, cuando un diseñador web tiene un objetivo final como "crear una página web con este encabezado, esta fuente, estos colores, estas imágenes y un unicornio animado que recorre la pantalla cuando los usuarios hacen clic en este botón," su trabajo comienza por recopilar esa gran idea y dividirla en partes pequeñas, y luego traducir estas piezas en instrucciones que la computadora pueda entender, en el orden o sintaxis correcta.
Cada página de la web que visitas se crea mediante una secuencia de instrucciones separadas, una tras otra. Tu navegador (Chrome, Firefox, Safari, etc.) es un gran actor que traduce el código en algo que podemos ver en nuestras pantallas e incluso interactuar con él. Puede ser fácil olvidar que el código sin navegador es solo un archivo de texto: cuando se pone ese archivo de texto en un navegador, se produce la magia. Cuando abres una página web, tu navegador lee el HTML y otros lenguajes de programación involucrados y los interpreta.
HTML y CSS en realidad no son lenguajes de programación técnica; son solo la estructura de la página y la información de estilo. Pero antes de pasar a JavaScript y otros idiomas verdaderos, debes conocer los conceptos básicos de HTML y CSS, ya que están en la parte frontal de cada página web y aplicación.
A principios de la década de 1990, HTML era el único idioma disponible en la web. Los desarrolladores web tenían que codificar con esmero los sitios estáticos, página por página. Mucho ha cambiado desde entonces: ahora hay muchos lenguajes de programación disponibles. En la actualidad, el HTML proporciona la estructura básica de los sitios, que está mejorada y modificada por otras tecnologías como CSS y JavaScript. El CSS se utiliza para controlar la presentación, el formato y el diseño.
JavaScript se utiliza para controlar el comportamiento de diferentes elementos.
Ahora, repasemos cada uno individualmente:
El HTML es el núcleo de cada página web, independientemente de la complejidad de un sitio o la cantidad de tecnologías involucradas. Es el punto de partida para cualquier persona que esté aprendiendo a crear contenido web. Y, por suerte para nosotros, es sorprendentemente fácil de aprender.
HTML significa lenguaje de marcado de hipertexto. "Lenguaje de marcado" significa que, en lugar de usar un lenguaje de programación para ordenar funciones, el HTML utiliza etiquetas para identificar diferentes tipos de contenido y los fines de cada uno para la página web.
El HTML usa etiquetas o elementos para identificar los distintos tipos de contenido. Estas etiquetas tienen nombres bastante intuitivos: etiquetas de encabezado, etiquetas de párrafo, etiquetas de imagen, etc. Cada página web se compone de un montón de estas etiquetas HTML que identifican cada tipo de contenido en la página.
Por ejemplo, las palabras que estás leyendo en este momento son parte de un párrafo. Si estuvieras codificando esta página web desde cero, habrías empezado este párrafo con una etiqueta de párrafo inicial: <p>. La parte de "etiqueta" se señala con corchetes abiertos, y la letra "p" le dice al ordenador que estamos abriendo un párrafo en lugar de otro tipo de contenido.
Una vez que se ha abierto una etiqueta, se asume que todo el contenido que sigue es parte de esa etiqueta hasta que "cierre" la etiqueta. Cuando el párrafo termina, pondrías una etiqueta de párrafo de cierre: </p>. Observa que las etiquetas de cierre tienen exactamente el mismo aspecto que las etiquetas de apertura, excepto que hay una barra diagonal hacia delante después del soporte de ángulo izquierdo.
CSS no son más que hojas de estilo en cascada. Este lenguaje de programación determina cómo deben aparecer los elementos HTML de un sitio web en la parte frontal de la página.
El HTML proporciona las herramientas en bruto necesarias para estructurar el contenido en un sitio web. El CSS, por otro lado, ayuda a diseñar este contenido para que se vea por el usuario de la forma en que estaba destinado a ser visto. Estos idiomas se mantienen separados para garantizar que los sitios web se construyan correctamente antes de ser reformateados.
Si el HTML es la pared, el CSS es la pintura. ¿Esos colores lisos, fuentes interesantes e imágenes de fondo? Todo gracias al CSS. Este lenguaje influye en todo el estado de ánimo y el tono de una página web, por lo que es una herramienta increíblemente poderosa, y una habilidad importante para aprender por los desarrolladores. También es lo que permite que los sitios web se adapten a diferentes tamaños de pantalla y tipos de dispositivos.
En pocas palabras, el CSS son una lista de reglas que pueden asignar diferentes propiedades a las etiquetas HTML, ya sean especificadas para etiquetas individuales, etiquetas múltiples, un documento completo o documentos múltiples. Existe porque, al desarrollarse elementos de diseño como fuentes y colores, los diseñadores web tuvieron muchos problemas para adaptar el HTML a estas nuevas funciones.
Entonces, ¿qué significa exactamente CSS? Es sinónimo de hojas de estilo en cascada, y "hoja de estilo" se refiere al documento en sí. Cada navegador web tiene una hoja de estilo predeterminada, por lo que cada página web se ve afectada por al menos una hoja de estilo sin importar si el diseñador web aplica o no algún estilo. Ahí es donde la expresión "en cascada" entra en juego. Piensa en una cascada: como el agua cae en cascada y golpea todas las rocas en su descenso, pero solo las rocas del fondo influyen en el lugar donde terminará fluyendo. De la misma manera, la última hoja de estilo definida, le informa a mi navegador qué instrucciones tienen prioridad.
JavaScript es un lenguaje más complicado que el HTML o el CSS, y no se lanzó en versión beta hasta 1995. Hoy en día, JavaScript es compatible con todos los navegadores web modernos y se usa en casi todos los sitios web para una funcionalidad más potente y compleja.
JavaScript es un lenguaje de programación basado en la lógica que se puede usar para modificar el contenido del sitio web y hacer que se comporte de diferentes maneras en respuesta a las acciones de un usuario. Los usos comunes de JavaScript incluyen cuadros de confirmación, llamadas a la acción y agregar nuevas identidades a la información existente.
En resumen, JavaScript es un lenguaje de programación que permite a los desarrolladores web diseñar sitios interactivos. La mayor parte del comportamiento dinámico que verás en una página web es gracias a JavaScript, que aumenta los controles y comportamientos predeterminados de un navegador.
Otros usos para JavaScript incluyen la creación de contraseñas de seguridad, formularios de verificación, juegos interactivos, animaciones y efectos especiales. También se utiliza para crear aplicaciones móviles y crear aplicaciones basadas en servidor.
La parte más difícil de la codificación es comenzar, pero una vez que aprendas los conceptos básicos, será más fácil aprender lenguajes de programación más avanzados. Y si alguna vez te sientes abrumado, dirígete a hackertyper.net y pulsa teclas aleatorias en tu teclado.
Confía en mí, te sentirás mejor.
Fuente: Traducción de un artículo de Lindsay Kolowich para el blog de Hubspot