Acreditación Institucionald eA lta Calidad

DESARROLLO
WEB FULLSTACK
-BÁSICO

Autor de contenido
Andrés Fernando Pineda Guerra

Autor de contenido

EMPEZAR
 Tabla de
Contenido
Presentación

Objetivos del curso (competencias)

Objetivo general
Objetivo específico

Mapa de contenido de la unidad

Unidad 4: Fundamentos del desarrollo web.

4.1. ¿Qué es Internet?

4.2. Historia y estructura de la web.
4.3. Servicios basados en Internet.
4.4. Introducción al modelo cliente servidor.
4.5. Tipos de sitios web.
4.6. Alojamiento web, manejo de hosting, dominio de un sitio web.
4.7. Repositorios GitHub, bitbucket.

Otros materiales para profundizar

Recursos de video

Referencias bibliográficas de la unidad

2
 Presentación

En la actualidad, con el evidente auge de las tecnologías y el avance

tan significativo de las mismas, las empresas, universidades y com-
pañías a nivel mundial se obligan a involucrar dentro de su core, la
adquisición de soluciones tecnológicas, dichas soluciones son creadas
por grupos capacitados de personas los cuales involucran e integran
diversas herramientas las cuales permiten el éxito de los proyectos.
Con el “CURSO BÁSICO EN DESARROLLO FULL STACK”, aprenderás los
fundamentos, estructuras y principales bases para el éxito en el desa-
rrollo de soluciones tecnológicas, partiendo desde el diseño, hasta la
ejecución, pasando por procesos de lógica matemática, maquetación
de aplicaciones (web y móviles), aplicación de principios del diseño,
lenguajes de modelado y maquetado web, introducción a las redes,
bases de datos, gestión de contenidos y diversos temarios, los cuales
permitirán ser más competitivo en el ámbito profesional y laboral.

Objetivos del curso (competencias)

Objetivo general
Formar a los participantes en el desarrollo web en todo el ciclo de vida del
software, en donde adquieran los conocimientos básicos para implementar
soluciones web.

Objetivo específico
- Conocer los conceptos y teoría básica del desarrollo web.

- Identificar y conocer los diferentes lenguajes de programación y herra-

mientas para el desarrollo web.

- Aplicar las diferentes tecnologías web, tendencias y herramientas en el

desarrollo de soluciones web.

- Diseñar, desarrollar e implementar soluciones web básicas en donde

se integren los componentes de Front End, Back End, seguridad, redes y
buenas prácticas utilizando metodologías ágiles.

3
Mapa de contenido de la unidad

IMAGEN

Ideas clave
El desarrollo web es, entonces, la construcción y el mantenimiento de los sitios web, lo
que incluye a las aplicaciones. Lo que se ve y lo que no se ve. Algo así como el detrás de
escena de una obra pero incluyendo la puesta en marcha y la posterior exhibición. En
donde se involucran los servicios basados en internet, modelo cliente servidor, reposi-
torios, entre otros.

4
4.1. ¿Qué es Internet?

El internet es la red informática descentralizada de alcance global, el cual está confor-

mada por un conjunto de redes interconectadas mediante diversos protocolos el cual
ofrece diversos servicios, como por ejemplo uno de los más conocidos el cual es el ac-
ceso a archivos de transferencia de hipertexto a través de la web.

El internet como fuente de acceso a información y conocimiento en múltiples forma-

tos son casi ilimitadas. De allí que en las últimas décadas, los medios de comunicación
tradicionales se hayan visto impulsados a ofrecer plataformas y soluciones adaptadas a
nuevos tiempos y consumidores de información.

En un principio (inicio de los años 90), muchos medios de comunicación usaban la

internet como un apoyo, una herramienta secundaria sobre la que se vaciaba el conte-
nido a través de la web. Poco a poco, los medios comenzaron a ajustar los formatos de
sus contenidos para que fuesen más compatibles, en forma y fondo, con las caracterís-
ticas de internet y de la web.

Las características propias de internet permiten la presentación de información en

multitud de formatos como, por ejemplo, sonido, video, imágenes y texto. Permite
combinar elementos de otros medios de comunicación, como la radio, el periodismo y
la televisión. De allí que en las últimas décadas muchos medios no solo hayan logrado
adaptarse al avance tecnológico que internet supone, sino que además han surgido
nuevos medios y plataformas inéditas para la creación y transmisión de información y
contenidos (Tom&aacute & Herrera, 2006).

4.2. Historia y estructura de la web.

La World Wide Web es la culminación del hipertexto y, como tal, sus orígenes se re-
montan a la propia historia del hipertexto. Quince años después de Tim Berners-Lee
inventor de la WWW que Ted Nelson, en 1965 imaginara las máquinas literarias que
permitirían a usuarios de todo el mundo publicar información en hipertexto, un joven
ingeniero Propuesta de Berners-Leebritánico buscaba cómo hacer realidad el proyecto
de Nelson. Tim Berners-Lee, en sus ratos libres, investigaba un sistema de difusión des-
centralizada de información basado en el hipertexto y en el que cooperaban una red
de centros de investigación.

5
Durante 1989 se realizaron varios experimentos para crear un sistema de comunicación
entre los científicos de física nuclear de todo el mundo en el Centre Européen de Re-
cherche Nucléaire (CERN) en Ginebra, donde se probaron varias técnicas sobre redes
para conectarse a Internet, llegándose a estandarizar los protocolos de conexión TCP/
IP. En marzo de ese mismo año, Tim Berners-Lee, investigador especializado en
telecomunicaciones y colaborador del Laboratorio Europeo de Física de Partículas
(CERN), propone al CERN utilizar un sistema de comunicación basado en el hipertexto
para lograr ese flujo de información entre los científicos.

En noviembre de 1990 Tim Berners-Lee puso en marcha el sistema de hipertexto lla-

mado Enquire que permitía almacenar piezas de información y conectarlas, y que se
ejecutaba en un entorno multiusuario que permitía acceder a la información a varias
personas a la vez. En marzo de 1991, Berners-Lee escribió el primer programa visualiza-
dor para un servidor y cliente, que se convirtió en el origen de la World Wide Web. Este
sistema duró hasta 1993, cuando la International Standards Organization (ISO) estanda-
rizó el lenguaje Hypertext Markup Language (HTML). Hasta entonces, los documentos
se editaban mediante TeX y PostScript, pero estos lenguajes eran demasiado compli-
cados teniendo en cuenta que debían ser leídos por todo tipo de ordenadores, desde
simples terminales hasta estaciones de trabajo gráficas X-Windows. Antes de 1990,
Internet era un archipiélago de ordenadores inconexos y no se podía cruzar de una
dirección a otra pulsando un enlace como ahora. Tampoco existían los buscadores, ni
se podían integrar imágenes en la pantalla puesto que no habían nacido las interfaces
gráficas (Moreira, 2018).

4.3. Servicios basados en Internet.

A continuación, se muestran algunos de los servicios basados en internet:

Correo electrónico: Como es bien sabido, el correo electrónico es uno de los servicios
más utilizados por los usuarios de internet, ya que debido a sus protocolos, se pueden
enviar y recibir mensajes, archivos de audio, video, imágenes, texto, entre otros.

Foros: Tienen como objetivo generar discusión entre los usuarios sobre algún tema en
específico, en el cual se pueden compartir experiencias, opiniones o dudas.

Blogs: Permite generar a la marca o sitio web, diversas publicaciones, artículos, bien
sea de manera personal , periodística, empresarial, corporativa o investigativa.

Redes Sociales: Son aplicaciones web que favorecen las comunicaciones, publicacio-
nes, visualizaciones e interacciones entre usuarios.

6
4.4. Introducción al modelo cliente servidor.

Modelo cliente servidor

Es una de las principales arquitecturas utilizadas en los servicios web, este modelo de
aplicación distribuida, permite que las tareas sean divididas entre los servidores y los
clientes.

La red cliente-servidor es una red de comunicaciones en la cual los clientes están

conectados a un servidor, en el que se centralizan los diversos recursos y aplicaciones
con que se cuenta; y que los pone a disposición de los clientes cada vez que estos son
solicitados. Esto significa que todas las gestiones que se realizan se concentran en el
servidor, de manera que en él se disponen los requerimientos provenientes de los
clientes que tienen prioridad, los archivos que son de uso público y los que son de uso
restringido, los archivos que son de sólo lectura y los que, por el contrario, pueden ser
modificados, etc. Este tipo de red puede utilizarse conjuntamente en caso de que se
este utilizando en una red mixta (Zafra et al., 2013).

Para entender mejor el modelo cliente - servidor, a continuación, se muestra una ima-
gen de la arquitectura y sus componentes:

7
La arquitectura cliente servidor, permite centralizar la información y el control de los recur-
sos e integridad de los datos que son controlados por el servidor, manteniendo separado
lo afectado o realizado por algún usuario.

Ya que está arquitectura “separa”, la parte del cliente con el servidor , facilita la escalabili-
dad y mantenimiento a futuro, ya que, si por ejemplo, se requiere de aumentar la capaci-
dad o procesamiento a los datos, se puede realizar de manera independiente a la afecta-
ción de la capa del cliente.

4.5. Tipos de sitios web.

a. Tienda Online.

Fuente: https://www.amazon.es/

8
b. Sitio Corporativo.

Fuente: https://rita.udistrital.edu.co/

c. Portafolio.

Fuente: https://www.hilaryoleary.com/

9
d. Aplicación web.

Fuente: https://www.amazon.es/

e. Landing page.

Fuente: Zespri

10
f. MultiPage.

Fuente: https://www.udistrital.edu.co/inicio

g. One Page.

Fuente: https://heippa.com/

11
4.6. Alojamiento web, manejo de hosting, dominio de
un sitio web.

El alojamiento de un sitio web, se describe como un servicio en donde se hospeda uno

o varios sitios web.

Hay diversos hospedajes de sitios web, como por ejemplo los alojamientos gratuitos,
por donaciones, compartidos, de imagen, de videos, de correos, por servidores dedica-
dos, alojamiento en la nube, entre otros.

Para seleccionar algún tipo de hosting, se tiene que analizar muy bien, para que se
requiere, como se va a administrar dicha infraestructura, la capacidad técnica del per-
sonal y la escalabilidad y “fuerza” que tiene el servicio web que se va a alojar.

Para esto se requiere tener en cuenta los siguientes aspectos:

• Tipo y capacidad de almacenamiento.

• Necesidad o no de correos corporativos
• Tipos de bases de datos
• Cantidad de webs que se pueden alojar
• Ancho de banda
• Servicios de migración
• Capacidad de procesamiento
• Soporte de la cantidad necesaria de usuarios concurrentes
• Herramientas o servicios adicionales

Dominio

El dominio de un sitio web es el nombre único e irrepetible que se le da a un sitio web,

con el fin de que las marcas, sean identificadas de forma sencilla por sus clientes o
usuarios de la web.

4.7. Repositorios GitHub, bitbucket.

Github

Es una herramienta esencial para los desarrolladores de software, y su popularidad es

inigualable. Actualmente cuenta con más de 25 millones de usuarios. Se trata de un
número considerable de profesionales que recurren a GitHub para mejorar el flujo de
trabajo y la colaboración.

12
En general Github es un servicio basado en la nube, que aloja un sistema de control de
versiones llamado GIT, este permite mediante unas líneas de comando mantener ac-
tualizado y controlado el ambiente de desarrollo en algún proyecto de software.

https://github.com/

Bitbucket

Con el mismo objetivo de Github, bitbucket permite realizar un control de versiones

mediante Git o Mercurial, es un repositorio inicialmente gratuito, en el cual se pueden
trabajar con base a proyectos de software y realizar trabajo colaborativo.

Comandos básicos de git

git clone <https://link-con-nombre-del-repositorio>

Git clone básicamente realiza una copia idéntica de la última versión de un pro-
yecto en un repositorio y la guarda en tu ordenador.

git branch <nombre-de-la-rama>

Las ramas (branch) son altamente importantes en el mundo de Git. Usando ra-
mas, varios desarrolladores pueden trabajar en paralelo en el mismo proyecto
simultáneamente. Podemos usar el comando git branch para crearlas, listarlas y
eliminarlas.

git push <nombre-remoto> <nombre-rama>

Este comando creará una rama en local. Para enviar (push) la nueva rama al repo-
sitorio remoto.

git checkout <nombre-de-la-rama>

Usaremos git checkout principalmente para cambiarte de una rama a otra. Tam-
bién lo podemos usar para chequear archivos y commits.

git status

Podemos encontrar información como:

Si la rama actual está actualizada

Si hay algo para confirmar, enviar o recibir (pull).

13
Si hay archivos en preparación (staged), sin preparación(unstaged) o que no es-
tán recibiendo seguimiento (untracked)

Si hay archivos creados, modificados o eliminados

git add <archivo>

Añade los cambios para poder hacer el commit.

git commit -m “mensaje de confirmación”

Git commit es cómo establecer un punto de control en el proceso de desarrollo al

cual puedes volver más tarde si es necesario.

También necesitamos escribir un mensaje corto para explicar qué hemos desa-
rrollado o modificado en el código fuente.

git push <nombre-remoto> <nombre-de-tu-rama>

Después de haber confirmado tus cambios, el siguiente paso que quieres dar es
enviar tus cambios al servidor remoto. Git push envía tus commits al repositorio
remoto.

git pull <nombre-remoto>

El comando git pull se utiliza para recibir actualizaciones del repositorio remoto.
Este comando es una combinación del git fetch y del git merge lo cual significa
que cundo usemos el git pull recogeremos actualizaciones del repositorio remo-
to (git fetch) e
inmediatamente aplicamos estos últimos cambios en local (git merge).

14
 Otros materiales para profundizar

Referencias bibliográficas de la unidad

Moreira, M. A. (2018). De la enseñanza presencial a la docencia digital. Autobiogra-

fía de una historia de vida docente. Revista de Educación a Distancia (RED), 56,
Art. 56. https://revistas.um.es/red/article/view/320691

Tom&aacute, & Herrera, s P. (2006). ?Que es Internet? Comunicar, 26, 226-227.

Zafra, A., Gibaja, E., Luque, M., & Ventura, S. (2013). Diseño de aplicaciones cliente/
servidor para el aprendizaje de las tecnologías de comunicación. Iniciación a la In-
vestigación. https://revistaselectronicas.ujaen.es/index.php/ininv/article/view/1748

15
15