Introducción y Santísima Trinidad del Desarrollo Web

Este artículo le brindará una descripción general del desarrollo front-end, el desarrollo back-end y el desarrollo de pila completa y le dará una idea sobre cada uno de ellos en detalle para que pueda decidir su campo de interés por sí mismo.
A partir de la definición básica del libro, ‘Desarrollo web se refiere a la construcción, creación y mantenimiento de sitios web. Incluye aspectos como el diseño web, la publicación web, la programación web y la gestión de bases de datos.’

Now let’s cover each aspect of web development in detail.

Front End:
«Front End» generalmente se refiere a todos los tipos de cosas que el usuario realmente ve en el sitio web, una vez que se carga por completo. Es por eso que también se le llama el «lado del cliente» del front-end.
Esto incluye elementos de la interfaz de usuario como menús y menús desplegables, barra de navegación, barras laterales, encabezados, pies de página y también animaciones CSS. El front-end de cualquier sitio web tiene que comunicarse tanto con el usuario como con la parte de back-end del sistema. Por lo tanto, el desarrollador front-end es responsable de la estética, el diseño y la apariencia del sitio web. Además, según las tendencias recientes del mercado, un desarrollador front-end debe tener el conocimiento para hacer que un sitio web responda a diferentes dispositivos, navegadores y tamaños de pantalla. Esto se debe a que el mercado es muy versátil y los diferentes navegadores y dispositivos tienen algunas complicaciones y propiedades que deben tenerse en cuenta antes de crear un sitio web o un blog (por ejemplo, la propiedad shadow).

Un desarrollador front-end se centra en gran medida en la comprensión de HTML , CSS y JavaScript .

Los desarrolladores front-end también deben asegurarse de que la interacción del usuario con el sitio web sea fluida y amigable. Un desarrollador front-end no necesita habilidades de desarrollo back-end y los sitios web creados por los desarrolladores front-end no necesitan interactuar con la información almacenada en una base de datos para ser funcionales.
Ahora hablando de las oportunidades de trabajo, hay múltiples puestos de trabajo y vacantes disponibles en la industria. Sin embargo, el conjunto de habilidades requeridas para un perfil de trabajo en una empresa puede diferir completamente del conjunto de habilidades requeridas en otra empresa para el mismo perfil de trabajo.
Esto significa que un título de trabajo puede significar algo en una empresa y luego completar otra cosa en otra empresa. Por lo tanto, siempre es mejor no adivinar nada sobre el perfil de trabajo por sí mismo y buscar y leer sobre las habilidades necesarias y el trabajo que tendrá que hacer después de ser contratado, antes de ir a la entrevista.

Los títulos de trabajo más comúnmente vistos, relacionados con el desarrollo front-end son:

• Desarrollador front-end
• diseñadores de UI/UX
• Diseñador web

Nota: UI significa Interfaz de usuario, mientras que UX significa Experiencia de usuario . Los diseñadores de UI deben cuidar los aspectos virtuales del diseño del sitio web, mientras que los diseñadores de UX realizan pruebas de usuario para garantizar el buen funcionamiento del sitio web.

Una pregunta muy común entre los aspirantes a desarrolladores web y los buscadores de empleo es ‘ ¿Cuál es la diferencia entre un desarrollador web y un diseñador web? y ‘¿En qué se diferencia uno de otro ?’.

• Un diseñador web utiliza gráficos y software de diseño gráfico como Adobe Photoshop, Illustrator o InDesign para crear una apariencia para el sitio web. Para ser un buen diseñador web, se requiere una sólida comprensión de una variedad de conceptos, incluidos el color y la tipografía, las relaciones especiales, la audiencia y la experiencia del usuario. Entonces, el trabajo principal de un diseñador de sitios web es crear el aspecto más estético posible para un sitio web utilizando software como Adobe Photoshop, InDesign, etc.
• Considerando que, un desarrollador web es responsable de desarrollar el diseño dado por el diseñador web a un modelo de trabajo al que pueden acceder diferentes usuarios en todo el mundo. HTML, JavaScript, JQuery y CSS son algunas de las herramientas que un desarrollador web debe tener en su kit.

Back End:
La parte de la aplicación que reside básicamente en el servidor se denomina backend del sitio web. Dado que esta parte es accesible para los visitantes y usuarios del sitio web, también se conoce como el lado del servidor del sitio web. El objetivo principal del backend es asegurarse de que se envíen los datos correctos al navegador a pedido del usuario. Aunque no es un proceso fácil y se debe hacer mucho para recuperar la información del backend y luego mostrársela al usuario en el front-end.
Tomemos un ejemplo para aclarar las cosas; Un estudiante quiere obtener su resultado semestral del sitio web de su universidad. Después de completar el formulario requerido (número de inscripción, fecha de nacimiento, etc.), envía el botón Enviar. Después de presionar el botón de enviar, el sitio web comienza a comparar la información ingresada por el usuario con la información almacenada en su base de datos. Si se determina que la información es correcta, el back-end recopila y procesa los datos del back-end y los envía al front-end del sitio web donde finalmente se muestra el resultado al estudiante.

Los desarrolladores back-end usan lenguajes como Java, PHP, Ruby on Rails, Python y.Net para realizar el trabajo. El desarrollo de back-end es muy necesario para crear un sitio web dinámico. Los sitios web dinámicos son aquellos sitios web cuyos datos se actualizan con el tiempo. Por ejemplo, cuando inicia sesión en su cuenta de Twitter después de un período de tiempo considerable, recibe automáticamente las últimas actualizaciones de las personas que sigue en su feed. No van a ser las mismas actualizaciones que viste ayer. ¿Cómo cambió la página? No hay posibilidad de que ninguna empresa contrate empleados solo para actualizar manualmente las noticias. En realidad, un script en el back-end de Twitter habría recibido las actualizaciones y regenerado el front-end en consecuencia.
Los ejemplos de sitios dinámicos incluyen Facebook, Twitter y Google Maps.
El back-end tiene tres partes: servidor, aplicación y base de datos.
Nota: Para la gestión de la base de datos se utilizan tecnologías como MySQL y MongoDB.

Full Stack
Podemos definir a un desarrollador full-stack como alguien que es altamente competente en uno de los dos extremos pero que también puede trabajar con el otro extremo cuando sea necesario. Básicamente, los desarrolladores de pila completa están familiarizados con el desarrollo de front-end y back-end. Sin embargo, es posible que no tengan la misma profundidad de conocimiento que alguien que se especializa en front-end o back-end. Esta es la razón por la que a veces se les conoce como el ‘Jack de ambos oficios’.

La Santísima Trinidad del Desarrollo Web

El front-end web básicamente se compone de HTML y CSS , que son el lenguaje de secuencias de comandos, y JavaScript , que es el lenguaje de programación. Los front-ends de todos los sitios web, ya sean pequeños o grandes, se construyen usando estos tres lenguajes. Por eso se les llama la Santísima Trinidad del desarrollo web Front-End.
También es esencial que los desarrolladores de pila completa estén familiarizados con estos tres lenguajes, para que puedan comprender cómo los cambios del lado del servidor afectan el lado de la interfaz de usuario del sitio web (útil para el desarrollo de sitios web dinámicos).

Aquí hay un breve resumen de los tres idiomas.
HTML (lenguaje de marcado de hipertexto):
HTML es el lenguaje utilizado para crear los sitios web que visita todos los días y proporciona una forma lógica de estructurar el contenido de los sitios web. También podemos definir HTML como el lenguaje que ayuda a crear la columna vertebral de cualquier sitio web.
A continuación se mencionan las etiquetas HTML básicas que dividen todo el documento en varias partes, como la cabeza, el cuerpo, etc.

• Cada documento HTML comienza con una etiqueta de documento HTML. Aunque esto no es obligatorio, es una buena convención comenzar el documento con esta etiqueta mencionada a continuación:

  <!DOCTYPE html>

• <html> : Cada código HTML debe estar encerrado entre etiquetas HTML básicas. Comienza con <html> y termina con la etiqueta </html> .
• <head> : la etiqueta de encabezado viene a continuación, que contiene toda la información del encabezado de la página web o documento, como el título de la página y otra información diversa. Esta información se incluye dentro de la etiqueta principal que se abre con <head> y termina con </head> . El contenido de esta etiqueta se explicará en las secciones posteriores, por supuesto.
• <title> : Podemos mencionar el título de una página web usando la etiqueta <title> . Esta es una información de encabezado y, por lo tanto, se menciona dentro de las etiquetas de encabezado. La etiqueta comienza con <title> y termina con </title>
• <body> : El siguiente paso es el más importante de todas las etiquetas que hemos aprendido hasta ahora. La etiqueta del cuerpo contiene el cuerpo real de la página que será visible para todos los usuarios. Esto abre con <body> y termina con </body> . Todo el contenido incluido en esta etiqueta se mostrará en la página web, ya sean escritos, imágenes, audios, videos o incluso enlaces. Veremos más adelante en la sección cómo usando varias etiquetas podemos insertar dichos contenidos en nuestras páginas web.

Todo el patrón del código se verá así:

<html>
<head>
    <!-- Information about the page -->
    <!--This is the comment tag-->
    <title>GeeksforGeeks</title>
</head>
<body>
    <!--Contents of the webpage-->
</body>
</html>

Este código no mostrará nada. Simplemente muestra el patrón básico de cómo escribir el código HTML y nombrará el título de la página como GeeksforGeeks. es la etiqueta de comentario en HTML y no lee la línea presente dentro de esta etiqueta.

CSS (hojas de estilo en cascada):

CSS se utiliza para estilizar los contenidos HTML presentes en un sitio web. Esto incluye modificar el color de la página, la familia de fuentes, el tamaño de fuente, la posición de los elementos y más.
Hay tres tipos de CSS:

1. En un archivo separado (externo)
2. En la parte superior de un documento de página web (interno)
3. Justo al lado del texto que decora (en línea)

Hojas de estilo externas: Archivos separados que tienen instrucciones CSS con la extensión de archivo (.css) . La principal ventaja de usar una hoja de estilo externa es que puede cambiar el estilo de todo el sitio web a la vez, sin tener que volver a escribir o modificar la etiqueta de estilo de cada página. Por lo tanto, ahorra mucho tiempo y energía. Sin embargo, la hoja de estilo externa debe vincularse al archivo HTML usando la etiqueta intermedia para que funcione.

<head>
    <link rel="stylesheet" type="text/css" href="gfg.css">
</head>

Estilos internos: ubicados en la parte superior de cada documento de página web antes de que se enumere cualquier contenido. Los códigos CSS de estilo interno se escriben entre las etiquetas de encabezado en el propio archivo HTML. Los estilos internos son muy fáciles de encontrar y se les da la segunda prioridad más alta, junto a las hojas de estilo externas.

<head>
   <style>
      body {
      background-color: linen;
      }
      h1 {
      color: maroon;
      font-style: bold; 
      }
   </style>
<body>
   <h1>Hello,GeeksforGeeks</h1>
</body>
</head>

Producción:

 Hello, GeeksforGeeks 

Estilos en línea: colocados justo donde los necesita, junto al texto o los gráficos que desea decorar. Los estilos en línea se pueden insertar en medio del código HTML. Esto da la libertad real de especificar cada elemento de la página web, sin embargo, puede dificultar el trabajo de mantenimiento del sitio web.

<h1 style="color:blue; font-style: italic;"> Hello, GeeksforGeeks </h1>

Producción:

 Hello, GeeksforGeeks 

Pero, ¿puede un sitio web tener varias hojas de estilo?
Sí, pero habrá algunas reglas que se seguirán. Echa un vistazo al siguiente ejemplo.

Asumiendo que un nombre de hoja de estilo externo como gfg.css tiene el siguiente estilo para el elemento <h1>:

h1 {
    color: orange;
}

Si el estilo interno se define después del enlace a la hoja de estilo externa (como se muestra a continuación), los elementos <h1> serán «verdes»:

Ejemplo:

<head>
   <link rel="stylesheet" type="text/css" href="gfg.css">
   <style>
      h1 {
      color: green;
      }
   </style>
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

Producción:

Hello, GeeksforGeeks

Sin embargo, si el estilo interno se define antes del enlace a la hoja de estilo externa, los elementos <h1> serán «naranjas»:

Ejemplo:

<head>
   <style>
      h1 {
      color: green;
      }
   </style>
   <link rel="stylesheet" type="text/css" href="gfg.css">
</head>
<body>
   <h1>Hello, GeeksforGeeks</h1>
</body>

Producción:

Hello, GeeksforGeeks

JavaScript:
una cosa que se debe tener en cuenta es que JavaScript y Java son lenguajes completamente diferentes, tanto en concepto como en diseño, y ambos no tienen correlación entre sí. Java es un lenguaje de Programación Orientada a Objetos (POO) creado por James Gosling de Sun Microsystems. JavaScript es un lenguaje de secuencias de comandos y originalmente se conocía como LiveScript. JavaScript se usa en el desarrollo front-end, mientras que Java se usa para el desarrollo back-end en el desarrollo web.
La función principal de un Javascript es agregar lógica e interactividad a una página web (por ejemplo, un enlace cambia de color una vez que el usuario hace clic en él).
Sin embargo, el script debe incluirse o hacer referencia a un documento HTML para que el navegador interprete el código. Significa que una página web no necesita ser un HTML estático, sino que puede incluir programas que interactúan con el usuario, controlan el navegador y crean dinámicamente contenido HTML.

Los méritos de usar JavaScript son:

1. Menos interacción con el servidor: la entrada del usuario se puede validar antes de enviar la página al servidor. Esto ahorra tráfico del servidor, lo que a su vez hace que el sitio web se cargue más rápido.
2. Los visitantes no tienen que esperar a que se vuelva a cargar una página para ver si se han olvidado de introducir algo. Por ejemplo, el sitio web notifica instantáneamente al usuario sobre las correcciones necesarias en el formulario antes de enviarlo.
3. Se pueden crear tales interfaces que cambiarán el estilo de fuente o el color de fuente de un enlace, una vez que el usuario pasa el mouse sobre ellos.
4. JavaScript se puede usar para incluir elementos como componentes de arrastrar y soltar y controles deslizantes, creando así una interfaz mejor y más rica para el usuario.

Así que esta fue información sobre HTML , CSS y JavaScript y debe conocerlos si desea convertirse en un desarrollador front-end o un desarrollador de pila completa.