¬ŅQu√© es el desarrollo web? Descubre los fundamentos para crear tu sitio web

01 de Marzo del 2021

user

Lucas Martinez

¬ŅQu√© es el desarrollo web? Descubre los fundamentos para crear tu sitio web ¬ŅQu√© es el desarrollo web? Descubre los fundamentos para crear tu sitio web

¬ŅSabes qu√© es el desarrollo web? Apuesto a que no te imaginas todo el movimiento invisible que hay detr√°s de entrar a la pesta√Īa de inicio de Facebook o de buscar un video en YouTube.

Bueno, ¡hoy lo conocerás! Descubrirás en qué consiste el desarrollo web, cómo trabaja un desarrollador web y las distintas fases de desarrollo que existen. 

Acomp√°√Īame en este viaje repleto de c√≥digos y etiquetas ūüĆź.¬†

 

√ćndice

  1. En qué consiste el desarrollo web
  2. ¬ŅQu√© hace un desarrollador web?
  3. ¬ŅQu√© es desarrollo front-end?¬†
  4. ¬ŅQu√© es desarrollo back-end?
  5. ¬ŅQu√© es desarrollo web full-stack?
  6. Diferencia entre desarrollo web y dise√Īo web

 

En qué consiste el desarrollo web

Si estás dando tus primeros pasos con un nuevo proyecto, sabrás de las posibilidades que brinda internet para los nuevos negocios. Tener un sitio web con buen funcionamiento es una de las claves para emprender. Para eso, entender qué es el desarrollo web, también conocido como web development, te será de utilidad.

Es prácticamente una cédula de identidad tener tu propio sitio web donde se muestre toda la información de lo que haces y puedas permitirles a los usuarios interactuar con tu producto. A través de él puedes ofrecer una serie de acciones: 

  • Ofrecer informaci√≥n relevante y contenido de calidad.
  • Permitir que los usuarios se inscriban a un newsletter para, de ese modo, obtener informaci√≥n.¬†
  • Ofrecer descuentos.
  • Permitir a las personas realizar compras.
  • Incrustar un enlace directo para que puedan descargar tu aplicaci√≥n web a un celular.

 

Para ofrecer algunas de estas acciones, es necesario que incluyas dentro de tu equipo de trabajo a un desarrollador web, que puedas transmitirle los valores de tu empresa para que él pueda plasmarla a través del sitio web.

 

computadora que es el desarrollo web
Fuente: Freepik

¬ŅQu√© hace un desarrollador web?

Si te preguntas qué es el desarrollo web, deberás saber primero que el profesional indicado para llevarlo a cabo es un desarrollador web o web developer. Su función es programar sitios web y aplicaciones en virtud de los objetivos comerciales que tenga una empresa.

¬ŅC√≥mo lo hace? Pues, a trav√©s de l√≠neas de c√≥digo complejo en las que utiliza una gran variedad de lenguajes de programaci√≥n, tales como CSS y Javascript. Tambi√©n tiene a disposici√≥n distintas herramientas de desarrollo web.

Las funciones de un desarrollador web son las siguientes: 

  • Se encarga de crear sitios web y aplicaciones web.
  • Define la interfaz gr√°fica, es decir, la interacci√≥n que se da entre la persona y el artefacto.
  • Mantiene el correcto funcionamiento del sitio web.¬†
  • Identifica y corrige errores que puedan afectar a la navegaci√≥n del usuario.¬†
  • Desarrolla nuevas funcionalidades para facilitar la interacci√≥n y el acceso al contenido.

 

Continuando con esta intención de entender qué es el desarrollo web, ahora que ya sabes las funciones de un desarrollador web, veamos cómo estas funciones se dividen en tres áreas distintas: desarrollo front-end, desarrollo back-end y desarrollo full-stack.

 

programadores trabajando en qué es el desarrollo web
Fuente: Freepik

 

Crehana premium
 

¬ŅQu√© es desarrollo front-end?¬†

Si no sabes cuáles son los primeros pasos que debes dar a la hora de pensar en qué es el desarrollo web y cómo llevarlo a cabo, déjame decirte que la respuesta es front-end.

Obviamente que hay equipos de trabajo grandes que pueden llevar en paralelo el desarrollo del front-end y el back-end. Pero, en caso de que recién estés empezando con el desarrollo de una programación web desde cero te recomiendo que primero desarrolles el front-end.

En programación, front-end es, básicamente, todo lo que el usuario puede ver apenas ingresa al sitio:

  • Estilo de tipograf√≠a
  • Efectos visuales
  • Colores
  • Adaptaci√≥n a las distintas pantallas
  • Movimientos

 

En esta instancia de la programación hay que tener como objetivo que el usuario tenga una buena experiencia de navegación. Por este motivo hay que tener presente el desarrollo de interfaces web que hagan que el contenido del sitio se muestre de manera agradable, sencilla y dinámica para el usuario.

Esta parte del sitio será controlada por el navegador que la persona utilice, por este motivo es que puede llegar a presentar cambios mínimos de un navegador a otro. 

Los principales lenguajes involucrados en el front-end son: 
 

HTML  

El HTML, que es un lenguaje de marcado y etiquetado, sirve para realizar la estructura básica de una web y el contenido a nivel de: textos, imágenes, videos, etc. 

Seg√ļn nuestro profesor Sergio Agamez Negrete en su curso online de Introducci√≥n al Desarrollo Web front end: HTML y CSS desde cero HTML es:¬†

‚Äú... un lenguaje, cuyas siglas se traducen en Lenguaje de Marcas de Hipertexto, que se usa para generar la estructura de un documento que despu√©s es le√≠do y renderizado por un navegador‚ÄĚ.¬†

Una etiqueta, en HTML, son fragmentos de textos rodeados por los signo menor que (<) y mayor que (>). Dentro de estos signos va una palabra, generalmente en inglés, que le da significado a la etiqueta y todas tienen funciones y usos específicos. 

En HTML hay dos tipos de etiqueta: 

  • Apertura. <etiqueta>
  • Cierre </etiqueta>¬†¬†¬†¬†¬†¬†

 

Cuando nos referimos a la estructura, hacemos referencia al contenido. Por ejemplo, en los textos definen el orden jerárquico, como los h1, h2, h3 y h4 que se utilizan para identificar los encabezados. 

También aquí entran en juego los atributos, que definirán el comportamiento de la etiqueta. Con ellos se puede indicar desde el idioma con el que aparecerá el texto, hasta la acción a realizar. 
 

CSS 

Si el HTML se encarga de marcar y etiquetar. El CSS, tambi√©n conocido como hojas de estilo en cascada, se encarga de darle el estilo al sitio web es decir, todo lo necesario para que sea agradable a los ojos del usuario: dise√Īo, colores,etc.

CSS, llevado a una definici√≥n m√°s t√©cnica, seg√ļn nuestro profesor Sergio Agamez Negrete:¬†

‚ÄúEs un conjunto de reglas que definen c√≥mo van a lucir los elementos de nuestro documento HTML‚ÄĚ
 

Lenguaje de programación 

Seguro alguna vez escuchaste hablar de Java, que es un lenguaje de programación orientado a objetos. O quizás te preguntas qué es JavaScript y te diremos que, también, es un lenguaje de programación, pero orientado a eventos.

Pero, ¬Ņqu√© es un lenguaje de programaci√≥n? Al nivel m√°s b√°sico podr√≠amos decir que es un lenguaje que permite al programador establecer una comunicaci√≥n con la computadora.¬†

La computadora solo entiende el código binario, pero a las personas se nos hace muy difícil ese lenguaje, por lo que se inventó el lenguaje de programación. Su función es la de traducir ese mismo lenguaje al código binario para que la computadora pueda realizar la acción que le estamos pidiendo. En otras palabras, es el nexo comunicacional entre computadora y humano. 

JavaScript es fundamental para darle interacción a la página web. De este modo se podrán realizar acciones como, por ejemplo, que si le damos clic a una opción, se abra una ventana mostrando la información solicitada por el usuario. Se pueden realizar muchas acciones para que la web sea funcional. 

Al ser un lenguaje que está en continua expansión, todo el tiempo aparecen nuevas funcionalidades. Por eso, a la hora de introducirnos en qué es el desarrollo web, es clave aprender los fundamentos de JavaScript.  
 

Python 

No pod√≠amos no nombrar a Python en este apartado. Pero, ¬Ņqu√© es Python? Pues debo decirte que es considerado el lenguaje de programaci√≥n m√°s popular para aprender en estos √ļltimos a√Īos.

Si te preguntas para qu√© sirve Python, deber√°s saber que es un lenguaje de programaci√≥n multiparadigma y multiplataforma usado, principalmente, en Big Data. Entonces, si tenemos que responder a la pregunta, ¬Ņpara qu√© se usa Python? Diremos que se utiliza para construir aplicaciones web, analizar datos, automatizar operaciones, etc.

Hay grandes empresas que en este momento están utilizando este lenguaje de programación, como es el caso de Facebook, Netflix y Uber. 

 

gente trabajando en app web y que es el desarrollo web
Fuente: Freepik
 

¬ŅQuieres empezar a dise√Īar tu propio sitio web? Comienza con este curso gratuito para crear p√°ginas en WordPress¬†¬†
 

¬ŅQu√© es desarrollo back-end?

Una vez que ya sabes cómo va a lucir el sitio, veamos qué sostiene a toda esa estructura. 

¬ŅQu√© es back-end? Podr√≠amos decir que es todo lo que ocurre detr√°s de cada acci√≥n que realizamos en un sitio web. Es toda la programaci√≥n de una p√°gina o un sitio web que no vemos, todo el engranaje que funciona por detr√°s y permite realizar acciones a los usuarios.

Si nosotros estamos en Facebook y queremos ver una foto en tama√Īo completo, le damos doble clic y se nos muestra en todo el ancho de la pantalla. ¬ŅEsto ocurre por arte de magia? La respuesta es no, ocurre por el desarrollo back-end.¬†

Para que todo este mecanismo del back-end funcione, se necesita una base de datos para guardar la informaci√≥n que se va recopilando. Por lo que el otro objetivo del back-end, es el dise√Īo de una base de datos y su custodia para garantizar la seguridad de los mismos.¬†

Si te preguntas, entonces, qué es frontend y backend para el desarrollo web y podríamos proponer el ejemplo del iceberg, donde la punta, lo que se ve de la estructura de hielo (el front-end) flota gracias a toda la masa gigante de hielo que es invisible desde la superficie (el backend).   

Desarrollo back-end que es el desarrollo web
Fuente: Freepik

¬ŅQu√© es desarrollo web full-stack?

Un desarrollador web full-stack es aquel profesional que domina un conjunto de tecnologías completo para llevar a cabo el desarrollo de una web. Por ejemplo, alguien puede ser un desarrollador web full-stack en JavaScript porque puedes manejar todo ese conjunto de tecnologías de desarrollo web para aplicarla estratégicamente en un proyecto.

Gracias al conocimiento completo de ese paquete de herramientas, el desarrollador web full-stack puede participar en todo el proceso de desarrollo web, tanto front-end como back-end. Por este motivo es un perfil muy solicitado por las empresas ya que es capaz de aplicar estos conocimientos estratégicamente para cada parte del proceso de programación. 

Cada vez son más demandadas las personas que pueden participar en todos los procesos del armado de un proyecto. Lo mismo ocurre, por ejemplo, con los productores audiovisuales, cada vez son más valorados aquellos perfiles que, además de participar en la producción, sepan manejar un micrófono y participar del armado de guión. 

Pens√©moslo a trav√©s del desarrollo de aplicaciones web, que es un sitio que, tras ser tratado por un programador, se ha podido adaptar para el acceso a trav√©s de un servidor web, utilizando internet mediante un navegador. ¬ŅNo ser√≠a m√°s fiable, para la persona interesada, que un √ļnico programador se encargue tanto del front-end como el back end, en lugar de contratar a dos profesionales distintos para el dise√Īo de cada parte?¬†

 

Crehana premium
 

Diferencia entre desarrollo web y dise√Īo web

Al preguntarnos por qu√© es el desarrollo web, no podemos dejar de lado el dise√Īo web. Si bien, ambos conceptos van de la mano, hay una diferencia que debemos destacar.

Mientras que el dise√Īo web se enfoca en trabajar la apariencia del sitio web a trav√©s del uso de herramientas y software de dise√Īo, el desarrollo web, se ocupar√° del funcionamiento y creaci√≥n de p√°ginas web, lo cual involucra el uso de c√≥digos y el lenguaje de programaci√≥n, ambos nombrados anteriormente en el art√≠culo.

El punto donde se combinan ambos procesos es en de desarrollo front-end, ya que el desarrollador, que trabaja con lenguajes, bibliotecas y frameworks para desarrollo web deber√° trabajar en conjunto con el dise√Īador que dominar√° programas como Illustrator y Photoshop, para lograr que el sitio proporcione una experiencia visual agradable a los ojos de quien navegue en √©l.

Se podr√≠a decir que el dise√Īador har√° que un sitio sea amigable e intuitivo mientras que el desarrollador har√° posible que las acciones que pretenda hacer el usuario se ejecuten a la perfecci√≥n.¬†

 

programador lluvia de ideas que es el desarrollo web
Fuente: Freepik

 

Si llegaste hasta aqu√≠, ahora debes tener los conocimientos b√°sicos sobre qu√© es el desarrollo web¬†¬ŅLos pondr√°s en pr√°ctica para crear tus propios sitios?

Recuerda que siempre puedes profundizar tus conocimientos, si quieres volverte un experto en el tema, Crehana ofrece distintos cursos de desarrollo web.

Te deseo suerte en el desarrollo de tus sitios web ūüíĽ.¬†¬†

Recomendados para ti