1

Introducción

El proceso de Diseño y desarrollo de aplicaciones web consiste en crear herramientas interactivas o

servicios en línea a los que los usuarios pueden acceder a través de un navegador web.

Estas aplicaciones o apps ofrecen experiencias dinámicas y ricas en funciones como las aplicaciones
de escritorio o móviles, pero sin necesidad de instalar software adicional.

Diseño y Desarrollo WEB

Un sitio web es un conjunto de páginas enfocadas principalmente en mostrar información,

mientras que una aplicación web es un sistema interactivo que permite al usuario realizar
acciones para obtener un resultado.

En otras palabras, el desarrollo de aplicaciones web es la práctica de crear software accesible a través
de un navegador web.

Por otro lado, el diseño y desarrollo van de la mano, ya que el Diseño se refiere a la parte estética
y el Desarrollo a la parte funcional y lógica

En la siguiente grafica se muestra la diferencia de un diseño y un desarrollo.

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

2

Navegador Web

Un navegador web o explorador de internet es un software, que permite interpretar la información

de distintos tipos de archivos o sitios web para que estos puedan ser vistos.

La función principal del navegador es interpretar documentos HTML y mostrarlos en pantalla

En la siguiente grafica se muestra como funciona un navegador.

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

3

Editores de código

Los editores de código son herramientas esenciales para escribir y editar código fuente, ofreciendo
resaltado de sintaxis, autocompletado y gestión de extensiones para mejorar la productividad.

Entre sus funciones más comunes destacan:

• Resaltado de sintaxis: diferencia visualmente los elementos del lenguaje de

programación.
• Autocompletado de código: sugiere comandos o fragmentos mientras escribes.
• Numeración de líneas: facilita la detección de errores y el seguimiento del código.
• Integración con sistemas de control de versiones: como Git, para seguir los cambios en los
archivos.
• Soporte para múltiples lenguajes: como Python, JavaScript, C++ o Java, entre otros.

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

4

Visual Estudio Code

Visual Studio Code, al se conoce también como VScode, es un editor de código para programadores
gratuito, de código abierto y multiplataforma. Está desarrollado por Microsoft.

Cuenta con conjunto de características bien pensadas que lo han convertido en una herramienta
indispensable para desarrolladores de todos los niveles. Desde su interfaz hasta su capacidad de
extensión, cada aspecto de VScode está diseñado para mejorar la productividad.

Para obtener la descarga se accede a la siguiente página: [Link]

Para la instalación y configuración básica de VScode, favor de ver el siguiente video:

Configuración básica

Instalación y configuración mejorada de VScode:

Configuración mejorada

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

5

Lenguajes de Programación WEB

Los lenguajes de programación web son sistemas de instrucciones que permiten a los
desarrolladores crear sitios y aplicaciones que se ejecutan tanto en navegadores como en
servidores. Su principal propósito es transformar ideas en soluciones digitales funcionales y
escalables, para garantizar que el contenido se presente correctamente, que las interacciones sean
fluidas y que los datos estén seguros.

A diferencia de los lenguajes de programación para escritorio o móvil, los lenguajes web están
diseñados específicamente para:

• Experiencia de usuario: crean interfaces interactivas, responsivas y atractivas.

• Procesamiento de datos: gestionan información proveniente de bases de datos, APIs o
formularios.
• Interoperabilidad: se integran con servicios externos y sistemas en la nube.
Adaptabilidad: funcionan en distintos navegadores y dispositivos sin perder funcionalidad.

Lado del Cliente (Frontend)

Corresponde a todo lo que el usuario ve y con lo que interactúa en un sitio web; es la capa de
presentación que se ejecuta directamente en el navegador de la persona en otras palabras, lo que
interpreto el navegador.

Lenguajes
HTML, CSS, JavaScript.
principales:

Estructura, diseño y dinamismo en sitios y aplicaciones. Por ejemplo, la creación

Funciones: de menús desplegables, formularios interactivos, animaciones y transiciones
suaves.

Desarrollo rápido, cambios de diseño, mejora de la experiencia de usuario,

Ventajas:
posibilidad de crear interfaces altamente personalizadas

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

6

Lado del Servidor Backend

maneja la lógica, la seguridad y el procesamiento de datos de una aplicación web. Aunque es
invisible para el usuario, garantiza que las funciones solicitadas por el frontend se ejecuten
correctamente y de manera segura. En pocas palabras, lo que se ejecuta en el servidor.

Lenguajes Python, PHP, Java, C#, Ruby, [Link]

principales: (JavaScript)

Gestión de bases de datos, ejecución de lógica de negocio, autenticación y

Funciones: autorización de usuarios, y protección frente a vulnerabilidades como
inyecciones SQL.

Desarrollo de aplicaciones robustas, escalables y eficientes. Trabaja en

Ventajas: proyectos corporativos y aplicaciones que manejan grandes volúmenes de
datos o transacciones

En la siguiente grafica se muestran los lenguajes de Frontend y los de Backend

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

7

Pila Completa Full-Stack

Combina las habilidades de Frontend y Backend, lo que permite a los desarrolladores construir
aplicaciones completas desde cero; escriben tanto el código que dictará el funcionamiento del
programa, como el que dará forma a la interfaz de usuario. Esta versatilidad es muy valorada hoy en
día, especialmente en startups y comercios pequeños que necesitan integrar todas las partes del
producto digital en un solo servicio.

Lenguajes HTML, CSS y JavaScript para Frontend. Python, Java, [Link] (JavaScript),
principales: PHP, Ruby para Backend

Gestión de bases de datos, ejecución de lógica de negocio, autenticación y

Funciones: autorización de usuarios, y protección frente a vulnerabilidades como
inyecciones SQL.

Integración fluida entre cliente y servidor.

Capacidad de resolver problemas en cualquier capa.
Ventajas:
Obtén una visión completa del proyecto que facilita la toma de decisiones
arquitectónicas.

Aplicaciones Plataformas interactivas y sistemas empresariales integrales que requieren

comunes: un desarrollador capaz de cubrir varios frentes.

En la siguiente grafica se muestra cómo funcionan las tecnologías juntas para un desarrollo WEB

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

8

Diseño Web
Es una actividad que consiste en la planificación, Diseño, implementación y mantenimiento de sitios
WEB. El diseño de páginas web es la construcción de documentos de Hipertexto para su visualización
en diferentes navegadores.

Lenguajes de Programación
Son un conjunto de instrucciones utilizados para crear, estructurar y dar funcionalidad a sitios y
aplicaciones en navegadores y servidores.

Los lenguajes de programación web fundamentales son JavaScript, HTML y CSS para el Frontend.

HTML
Lenguaje de Marcas de Hipertexto (del inglés HyperText Markup Language) es el componente más
básico de la Web. Define el significado y la estructura del contenido web.

HTML define la estructura de nuestro documento mediante etiquetas. Este lenguaje ofrece una gran
adaptabilidad, una estructuración lógica y es fácil de interpretar tanto por humanos como por
máquinas, compatibles con varios navegadores y plataformas

Todo documento HTML está compuesto por etiquetas. Las etiquetas tienen una sintaxis
característica que es la siguiente:

<xxx> inicio de etiqueta.

</xxx> fin de etiqueta

Las etiquetas pueden estar en mayúsculas, minúsculas o combinación de ella.

Ejemplo de Esqueleto de un documento HTML

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

9

Dentro de este código encontramos diversos elementos que vamos a describir.

Doctype

La declaración doctype define el tipo de documento. Su sintaxis depende de la versión de

HTML que estemos usando. Actualmente se define simplemente con <!DOCTYPE html>

Es importante incluirlo al inicio de cualquier página HTML para asegurar que los navegadores
saben la versión del HTML que estamos usando.

Head

La sección head contiene metainformación del documento HTML. Podemos incluir en este
bloque diversos asuntos de interés, como el conjunto de caracteres utilizado, enlace a las
hojas de estilo en el lenguaje CSS, el título de la página y muchas otras cosas.

Body

El cuerpo del documento se expresa dentro de la etiqueta body. Es donde se sitúa todo el
contenido que los navegadores mostrarán al visualizarse la página web. En el cuerpo
encontraremos como textos, imágenes y enlaces, entre otras cosas.

Elementos esenciales en HTML

Ahora, dentro del cuerpo podemos encontrar una rica cantidad de etiquetas que usaremos
dependiendo de la función que hace el contenido dentro del documento.

Títulos y encabezados (h1-h6)

Las etiquetas h1 a h6 se utilizan para definir los encabezados o titulares. El de mayor

importancia es h1 (debería haber un solo encabezamiento principal) y el menos importante
es el h6.

Párrafos (p)

Para definir un párrafo en se usa la etiqueta <p>

El resultado sería el siguiente.

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO

10

Comentarios en un documento HTML (¡-- --)

Para documentar se usa la sintaxis <!-- Tu comentario aquí -->. Las anotaciones dentro del código
que los navegadores ignoran, por lo que no se muestran en la página web, siendo invisibles para el
usuario final, pero visibles al revisar el código fuente.

Importante: Aunque el comentario no es visible en el navegador, cualquier persona puede verlo si

selecciona "Ver código fuente" en su navegador. Por lo tanto, no se debe incluir información sensible
o confidencial en los comentarios HTML.

Un documento con comentarios se vería de la siguiente manera en tiempo de desarrollo:

En tiempo de ejecución se vería de la siguiente manera:

DESARROLLO WEB JULIO CESAR NÚÑEZ LOYO