¿Alguna vez te has preguntado cómo funciona la programación de computadoras, pero no has hecho nada más complicado en la web que subir una foto a Facebook?

Entonces estás en el lugar correcto.

A alguien que nunca está codificado antes, el concepto de crear un sitio web desde cero (diseño, diseño y todo) puede parecer realmente intimidante. Es posible que se esté imaginando a los estudiantes de Harvard de la película, The Social Network sentados en sus computadoras con auriculares gigantescos y código, y piense: "Nunca podría hacer eso".

En realidad , puede.

 Descargue aquí nuestra colección completa de ejemplos de páginas de inicio, blogs y páginas de destino para inspirar el diseño de su propio sitio web.

Cualquiera puede aprender a codificar, al igual que cualquiera puede aprender un nuevo idioma. De hecho, la programación es como hablar un idioma extranjero, razón por la cual 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 computadora qué hacer. Más específicamente, en la programación web, son formas de decirle a sus navegadores qué hacer.

El objetivo de esta publicación es, en un lenguaje sencillo, enseñarle los conceptos básicos de HTML, CSS, y uno de los lenguajes de programación más comunes, JavaScript. Pero antes de comenzar, tengamos una idea de qué son realmente los lenguajes de programación.

¿Qué es un lenguaje de programación?

La programación, o codificación, es como resolver un rompecabezas. Considera un lenguaje humano, como el inglés o el francés. Utilizamos estos idiomas para convertir pensamientos e ideas en acciones y comportamiento. En la programación, el objetivo del rompecabezas es exactamente el mismo: solo estás conduciendo diferentes tipos de comportamiento, y la fuente de ese comportamiento no es un humano. Es una computadora.

Un lenguaje de programación es nuestra manera de comunicarnos con el software. Las personas que usan lenguajes de programación a menudo se llaman programadores o desarrolladores. Lo que le decimos 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 humano realiza una determinada acción.

Programación en desarrollo web

Por lo tanto, cuando a un diseñador web se le asigna un objetivo final como "crear una página web que tenga 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," el trabajo del diseñador web es tome esa gran idea y divídala en partes pequeñas, y luego convierta estas piezas en instrucciones que la computadora pueda entender, incluso ponga todas estas instrucciones en el orden o sintaxis correcta.

Cada página de la web que visite es construido utilizando una secuencia de instrucciones separadas, una tras otra. Su navegador (Chrome, Firefox, Safari, etc.) es un gran actor al traducir 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; es cuando se coloca ese archivo de texto en un navegador cuando ocurre la magia. Cuando abre una página web, su navegador obtiene el HTML y otros lenguajes de programación involucrados y lo 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 lenguajes verdaderos, necesita conocer los conceptos básicos de HTML y CSS, ya que están en la parte delantera 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 esta publicación, hablaré sobre HTML, CSS y uno de los lenguajes de programación más comunes: JavaScript.

HTML, CSS y JavaScript: Un tutorial

Una descripción general:

  • HTML proporciona la estructura básica de los sitios, que está mejorada y modificada por otras tecnologías como CSS y JavaScript.
  • CSS se usa para controlar la presentación, el formato y el diseño . [19659020] JavaScript se usa para controlar el comportamiento de los diferentes elementos.

Ahora, repasemos cada uno individualmente para ayudarte a entender los roles que juega cada uno en un sitio web y luego cubriremos como encajan Comencemos con un buen código HTML.

HTML

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 una habilidad esencial para cualquier profesional de la web. Es el punto de partida para cualquier persona que aprende a crear contenido para la web. Y, por suerte para nosotros, es sorprendentemente fácil de aprender.

Déjame mostrarte lo que quiero decir. Echa un vistazo al artículo a continuación. Si le pidiera que etiquetara los tipos de contenido en la página, probablemente lo haría bastante bien: hay un encabezado en la parte superior, luego un subtítulo debajo, el texto del cuerpo y algunas imágenes en la parte inferior, seguido de una algunos bits más de texto.

 magazine-page-example

Los lenguajes de marcas funcionan de la misma manera que que acabas de hacer cuando rotulaste esos tipos de contenido, excepto que usan el código para hacerlo específicamente, usan etiquetas HTML, también conocidas como "elementos". 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 denotan cada tipo de contenido en la página. Cada tipo de contenido de la página está "envuelto", es decir, rodeado de etiquetas HTML.

Por ejemplo, las palabras que está leyendo en este momento son parte de un párrafo. Si estuviera codificando esta página web desde cero (en lugar de usar el editor WYSIWG en HubSpot COS ), habría empezado este párrafo con una etiqueta de párrafo de apertura :

. La parte de "etiqueta" se denota con corchetes abiertos, y la letra "p" le dice a la computadora que estamos abriendo un párrafo en lugar de otro tipo de contenido.

Una vez que se ha abierto una etiqueta, todo el contenido que se supone que los siguientes son parte de esa etiqueta hasta que usted "cierre" la etiqueta. Cuando el párrafo termina, pondría una etiqueta de párrafo de cierre:

. Observe 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. Aquí hay un ejemplo:

Esto es un párrafo.

Usando HTML, puede agregar encabezados, párrafos de formato, saltos de línea de control, hacer listas, enfatizar texto, crear especial caracteres, insertar imágenes, crear enlaces, crear tablas, controlar algunos estilos y mucho más.

Para obtener más información sobre la codificación en HTML, recomiendo consultar nuestra guía de HTML básico y usar la versión gratuita clases y recursos en codecademy – pero por ahora, pasemos a CSS.

CSS

CSS significa 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.

Si HTML es el panel de yeso, CSS es la pintura.

Mientras que HTML fue la estructura básica de su sitio web, CSS es lo que le da a su conjunto Sitio web de su estilo. ¿Esos colores lisos, fuentes interesantes e imágenes de fondo? Todo gracias a CSS. Este lenguaje afecta a 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 que los desarrolladores web aprendan. También es lo que permite que los sitios web se adapten a diferentes tamaños de pantalla y tipos de dispositivos.

Para mostrar lo que hace CSS a un sitio web, mire las siguientes dos capturas de pantalla. La primera captura de pantalla es la publicación de blog de mi colega pero se muestra en HTML básico, y la segunda captura de pantalla es la misma publicación de blog con HTML y CSS.

Ejemplo de HTML (sin CSS)

 Ejemplo de HTML sin CSS que resulta en una publicación del blog de HubSpot sin formato

Observe que todo el contenido todavía está allí, pero el estilo visual no lo está. Esto es lo que podría ver si la hoja de estilo no se carga en el sitio web, por cualquier motivo. Ahora, así es como se ve la misma página web con CSS agregado.

Ejemplo de HTML + CSS

 Ejemplo de HTML + CSS usado para formatear una publicación de blog de HubSpot

No es eso ¿más bonito?

En pocas palabras, CSS es una lista de reglas que pueden asignar diferentes propiedades a las etiquetas HTML, ya sea especificadas para etiquetas individuales, etiquetas múltiples, un documento completo o documentos múltiples. Existe porque, como se desarrollaron elementos de diseño como fuentes y colores, los diseñadores web tuvieron muchos problemas para adaptar HTML a estas nuevas características.

Verá, el HTML, desarrollado en 1990, no tenía la intención de mostrar ningún formato físico. información. Originalmente estaba destinado solo para definir el contenido estructural de un documento, como encabezados frente a párrafos. HTML superó estas nuevas características de diseño, y CSS se inventó y lanzó en 1996: todo el formato podría eliminarse de los documentos HTML y almacenarse en archivos CSS (.css) separados.

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 – la hoja de estilo predeterminada de cualquier navegador que esté usando el visitante de la página web – sin importar si el diseñador web aplica o no algún estilo . Por ejemplo, el estilo de fuente predeterminado de mi navegador es Times New Roman, tamaño 12, así que si visitase una página web donde el diseñador no aplicara una hoja de estilo propia, vería la página web en Times New Roman, tamaño 12 .

Obviamente, la gran mayoría de las páginas web que visito no usan Times New Roman, tamaño 12; eso se debe a que los diseñadores web detrás de esas páginas comenzaron con una hoja de estilo predeterminada que tenía un estilo de fuente predeterminado, y luego anularon los valores predeterminados de mi navegador con CSS personalizado. Ahí es donde la palabra "en cascada" entra en juego. Piense en una cascada: como el agua cae en cascada en el otoño, golpea todas las rocas en el camino hacia abajo, pero solo las rocas en el fondo afectan a donde terminará fluyendo. De la misma manera, la última hoja de estilo definida le informa a mi navegador qué instrucciones tienen prioridad.

Para conocer los aspectos específicos de la codificación en CSS, volveré a señalar las clases y recursos gratuitos en codecademy . Pero por ahora, hablemos un poco sobre JavaScript.

JavaScript

JavaScript es un lenguaje más complicado que HTML o CSS, y no se lanzó en versión beta hasta 1995. Hoy en día, JavaScript es compatible con todas las webs modernas. y se usa en casi todos los sitios en la web para una funcionalidad más poderosa y compleja.

En resumen, JavaScript es un lenguaje de programación que permite a los desarrolladores web diseñar sitios interactivos. La mayoría del comportamiento dinámico que verá en una página web es gracias a JavaScript, que aumenta los controles y comportamientos predeterminados de un navegador.

Creación de cuadros de confirmación

Un ejemplo de JavaScript en acción son cuadros que aparecen en su pantalla. . Piense en la última vez que ingresó su información en un formulario en línea y apareció un cuadro de confirmación que le pide que presione "OK" o "Cancelar" para continuar. Eso fue posible gracias a JavaScript: en el código, encontraría una declaración "si … más …" que le dice a la computadora que haga una cosa si el usuario hace clic en "Aceptar" y otra cosa diferente si el usuario hace clic en "Cancelar".

Activación de CTA deslizables

Otro ejemplo de JavaScript en acción es un llamada a la acción (CTA) deslizante, como las que ponemos las publicaciones de nuestro blog, que aparecen en la parte inferior derecha de la pantalla cuando se desplaza más allá del final de la barra lateral. Así es como se ve:

 Slide-in CTA que usa JavaScript para aparecer en una publicación de blog de HubSpot

Almacenamiento de nueva información

JavaScript es particularmente útil para asignar nuevas identidades a elementos de sitios web existentes, de acuerdo con Las decisiones que toma el usuario al visitar la página. Por ejemplo, supongamos que está creando una página de destino con un formulario del que desea generar clientes potenciales al capturar información sobre un visitante del sitio web. Es posible que tenga una "cadena" de JavaScript dedicada al primer nombre del usuario. Esa cadena puede verse así:

función updateFirstname () {

let Firstname = prompt ('First Name');

}

Luego, después de que el visitante del sitio ingresa su nombre (y cualquier otra información que necesite en la página de destino) y envíe el formulario, esta acción se actualiza. la identidad del elemento "Nombre" inicialmente indefinido en su código. Aquí le explicamos cómo podría agradecer a su visitante de sitio web por nombre en JavaScript:

para.textContent = 'Gracias,' + Nombre + "! Ahora puede descargar su libro electrónico".

En la cadena de JavaScript anterior, al elemento "Nombre" se le ha asignado el nombre del visitante del sitio web y, por lo tanto, mostrará su nombre real en la parte frontal de la página web. Para un usuario llamado Kevin, la oración se vería así:

¡Gracias, Kevin! Ahora puede descargar su libro electrónico.

Seguridad, juegos y efectos especiales

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. Puede agregar JavaScript a un documento HTML agregando estos "scripts" o fragmentos de código JavaScript en el encabezado o cuerpo de su documento.

Si desea obtener más información sobre JavaScript, codecademy tiene cursos gratuitos en línea también puede tomar.

La parte más difícil de la codificación es comenzar, pero una vez que aprenda lo básico, será más fácil aprender más lenguajes de programación 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.

 ejemplos de una página de inicio brillante, blog y diseño de la página de destino "src =" https://no-cache.hubspot.com/cta/default/53/a1077f76-df2c-4b45-8ebc-dc2732f30850.png Backlinks19659079] </a><br />
<a class= Ejemplos de diseño de sitios web "src =" https://no-cache.hubspot.com/cta/default/53/dccbe87f-60eb-4291-993f-6f3ce791c26a.png



Source link