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 1: Historia e introducción al pensa-
miento Full Stack
1.1. ¿Qué es FullStack?
1.2. Historia del concepto Full Stack.
1.3. Ventajas de ser Full Stack – Mundo competitivo.
1.4. Ciclos y partes que involucran ser FullStack
1.5. ¿Por qué estudiar para ser FullStack?
1.6. Terminología técnica.
1.7. Generalidades de Tecnologías para el trabajo
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
Módulo 1
Historia e introducción al
pensamiento Full Stack
Ideas clave
Desarrollador Full Stack.
Funciones: Mantener, optimizar sitios web, desarrollar aplicaciones backend, asegurar
funcionamiento.
Formación: Ingeniería de sistemas, informática, software, programación y afines, gra-
dos,
bootcamps, cursos o aprendizaje autónomo.
Habilidades: HTML, CSS, JavaScript, Frameworks, Lenguajes de Back End, PHP, Java,
C#, servidores y
bases de datos.
Concepto: Se conocen como profesionales íntegros, versátiles, capaces de resolver pro-
blemas y
generar soluciones mediante desarrollos web, desde Front End (parte del cliente) hasta
el Back End
(servidor).
4
1.1. ¿Qué es FullStack?
Se conocen como profesionales íntegros, versátiles, capaces de resolver problemas y
generar
soluciones mediante desarrollos web, desde Front End (parte del cliente) hasta el Back
End
(servidor).
Son personas capaces de interpretar y contribuir a la construcción de soluciones web,
aportando
en todo el ciclo de vida de un software (Luna et al., 2018).
Funciones
Interpretar requerimientos Funcionales y no funcionales de una so-
lución web.
Es importante saber identificar los requerimientos funcionales y no funcionales, al
momento de realizar cualquier proyecto de desarrollo web, esto con el fin de planificar
5
de la mejor manera lo que se debe realizar.
Para ello se debe entender que los requerimientos funcionales son declaraciones de
los servicios que proveerá el sistema.
Para identificar estos requerimientos se debe tener en cuenta descripciones de los
datos a
ser ingresados en el sistema, de las operaciones a ser realizadas por cada pantalla, de
los
flujos realizados por el sistema, de los reporte del sistema y otras salidas y de quién
puede
interesar datos en el sistema, como ejemplo de requerimiento funcional se muestra la
siguiente figura:
Requerimientos no funcionales representan las características generales y restriccio-
nes de
la solución web que se esté realizando. Suelen ser difíciles de definir ya que la confor-
midad
o no conformidad se sujeta a la interpretación, para esto es recomendable con criterios
que se pueda medir.
A continuación, se presenta un ejemplo de requerimiento no funcional en donde se
especifica las características que debe tener la solución web (Luna et al., 2018).
6
Requerimientos no funcionales representan las características generales y restriccio-
nes de
la solución web que se esté realizando. Suelen ser difíciles de definir ya que la confor-
midad
o no conformidad se sujeta a la interpretación, para esto es recomendable con criterios
que se pueda medir.
A continuación, se presenta un ejemplo de requerimiento no funcional en donde se
especifica las características que debe tener la solución web (Luna et al., 2018).
Diseñar UI (Interfaces de usuario).
El proceso de diseñar interfaces de usuario es importante ya que en él se crea un me-
dio de comunicación efectivo entre los usuario y la computadora, siendo este uno de
los principios de diseño de una interfaz, ya que mediante estos diseños, se identifican
los objetos y acciones de una solución web.
Para el correcto diseño de interfaces de usuario, se deben tener claras las reglas
principales, las cuales son: simplificar el control que tenga el usuario con el uso de la
solución web, reducir la necesidad de que el usuario memorice información y hacer
interfaces consistentes.
Desarrollar la arquitectura de la solución
El desarrollador Full Stack debe tener la capacidad de elegir la mejor arquitectura para
determinado desarrollo web, en donde se tiene que tener en cuenta las variables de costo,
tiempo de desarrollo, frecuencia de usuarios y niveles de aislamiento.
Los patrones de arquitectura más utilizados son: patrón cliente-servidor, patrón de ca-
pas,
patrón master-slave, patrón modelo-vista-controlador y modelo broker.
7
• Administrar bases de datos y servidores.
• Analizar la optimización.
• Trabajar con el uso de metodología ágiles.
• Desarrollar código para el Back End.
• Desarrollar código para el Front End.
Conocimientos
• HTML, CSS, JavaScript.
• Frameworks de Front End.
• Herramientas y librerías para el desarrollo Front End.
• Herramientas y Programas para el diseño de soluciones web.
• Lenguajes y Frameworks de Back End.
• Analítica web
• Diseño de Mockups – Wire Frames.
• Librerías y herramientas de diseño
• Linux
• Bases de datos
• Repositorios digitales
• SEO (Optimización de motores de búsqueda)
• Responsive Design
• Seguridad en la web
• Metodologías Ágiles
• Entornos de desarrollo.
Habilidades
• Liderazgo
• Comunicación
• Trabajo en equipo
• Dominio de inglés técnico
• Constante aprendizaje
• Organización
8
1.2. Historia del concepto Full Stack.
El concepto Full Stack (Pila completa),a eso de los años 80, el software era desarrollado
por una única persona encargada de la construcción completa de inicio a fin, con el
auge de la tecnología y los avances, se da inicio a la arquitectura tipo cliente/servidor
(principios de los 90), debida a laalta demanda de desarrollo de software se comienzan
a generar equipos de trabajo para el desarrollo de software, en donde se comienzan a
establecer roles más claros.
Las tecnologías toman más fuerza, crece la demanda, para lo cual se requerían grupos
de trabajo mucho más experimentados y con base en la web 2.0, el desarrollador de
sitios web de extremo a extremo se vuelve más apetecido por las compañías, ya que
eran quienes comprenden todo el ciclo de vida del software (Li et al., 2017).
9
1.3. Historia del concepto Full Stack.
Alta demanda.
Al ser desarrolladores con un alto conocimiento, en todas las fases del ciclo de vida del
software, son demasiado apetecidos en el ámbito laboral, ya que con desarrolladores
Full Stack, se permiten solucionar inconvenientes de mejor manera, y suelen tener
conocimiento integral, al momento de seleccionar tecnologías de desarrollo de softwa-
re.
Buena remuneración.
Si bien, la industria de la tecnología es una de las carreras mejor remuneradas, los
desarrolladores Full Stack tienen una ventaja sobre el resto, ya que tienen conocimien-
tos desde el análisis de requerimiento, hasta la fase de implementación de soluciones
web.
Otra de las ventajas, es que debido a la posibilidad de trabajar remotamente, los
desarrolladores Full Stack, tienen la facilidad de vincularse con empresas extranjeras, lo
cual les permite ganar en dólares, euros, entre otros.
Versatilidad.
Son personas con la capacidad de adaptarse rápido a algún proyecto de software, bien
sea desde 0 o desarrollos en curso.
Trabajar desde cualquier lugar.
Debido a su alta demanda y buen posicionamiento y acogida de este cargo, los
programadores y/o desarrolladores Full Stack poseen una gran ventaja en el ámbito
tecnológico, debido a que se pueden tener trabajos como Freelance y trabajar desde
cualquier lugar del mundo, solo se necesita acceso a internet y un equipo de computo.
Este estilo de trabajo permite trabajar por objetivos, lo cual es considerado como una
gran ventaja.
Desarrollar aplicaciones de inicio a fin.
El conocimiento general del ciclo de vida del software, permite a los desarrolladores
Full Stack desarrollar aplicaciones y/o soluciones web de extremo a extremo.
Autosuficiencia.
Pensamiento globalizado.
10
Salario de los
desarrolladores de
software de nivel
IMAGEN básico (kinsta,
2021
Sueldo de un
desarrollador
senior full-stack
(kinsta, 2021)
IMAGEN
11
1.4. Ciclos y partes que involucran ser FullStack
developer.
El desarrollador Full Stack, debe comprender el funcionamiento y las partes del Front
End, Back End, Bases de datos, Desarrollo de operaciones y desarrollo de aplicaciones
móviles.
Front End: En el ámbito de diseño web, uso de HTML, CSS, JavaScript, herramientas y
librerias que permitan mejorar las soluciones web a nivel de diseño, es decir, la parte
del cliente.
Back End: Debe tener la capacidad de poder general algoritmos para la solución de
problemas informáticos, también debe tener un pensamiento matemático, en donde
se integra lógica computacional, codificación y buenas prácticas de programación.
Databases: El desarrollador Full Stack, debe tener la capacidad de realizar diseño de
bases de datos, normalización y, debe tener conocimientos de los modelos de datos
mejor adaptados a las soluciones de software que va a integrar, de esta manera permi-
te integrar y enviar datos del cliente al servidor y viceversa.
DevOps: Es una combinación de términos que integran el desarrollo y las operaciones,
cuyo objetivo principal es hacer más rápido el ciclo de vida del software fomentando la
entrega continua.
12
Mobile App
1.5. ¿Por qué estudiar para ser FullStack?
Los amplios conocimientos y integralidad de dichos profesionales lleva a que sean muy
apetecidos por el mercado laboral, haciendo de esta una de las carreras mejores paga-
das y más buscadas, ya que son profesionales capaces de crear, diseñar, planear, desa-
rrollar e implementar soluciones de alto nivel en la industria de la tecnología.
El conocimiento transferible.
Una ventaja de los lenguajes de programación es que son universales. Todo el cono-
cimiento que se adquiera en la Carrera Web Full Stack resultará de mucha utilidad y
podrás aplicarlo en cualquier país del mundo al que decidas ir o para el que quieras
trabajar de manera remota. Todas las empresas buscan desarrolladores íntegros y
aprender código es ingresar a un mundo de oportunidades globales.
13
Se tiene la posibilidad de trabajar desde cualquier lugar.
Los programadores y desarrolladores Full Stack tienen una gran ventaja en la industria
del conocimiento y la tecnología: solo necesitan una computadora y acceso a internet.
Si bien es cierto que en la actualidad la mayoría de las personas están trabajando des-
de casa dado la crisis sanitaria mundial, esto no es una excepción para los desarrollado-
res. Por el contrario, su estilo de vida les permite emigrar o trabajar mientras recorren
el mundo sin estar localizados en un lugar específico (Donati, 2021).
1.6. Terminología técnica.
Full Stack: Profesionales íntegros, versátiles, capaces de resolver problemas y generar
soluciones mediante desarrollos web, desde Front End (parte del cliente) hasta el Back
End (servidor).
Front End: Es lo que se muestra en la web y es interpretado por un navegador, basado
en HTML, CSS y Javascript
Back End: Es todo lo que corre y es interpretado por el servidor.
Web: Conjunto de información que se interpreta como página, sitio, aplicación web
contiene un dominio y un alojamiento en internet.
Diseño UI: El diseño UI, consiste en la interfaz de usuario y se basa en el diseño visual,
colores, diseño gráfico, tipografías, entre otros.
Arquitectura de software: Es el diseño de más alto nivel de un sistema, el cual con-
siste en un conjunto de patrones y abstracciones que proporcionan algún marco para
interactuar con el código fuente de un software.
Frameworks: Es un entorno de trabajo que ofrece una estructura base, el cual permite
realizar un proyecto con objetivos específicos, en términos generales es una plantilla que
sirve como punto de partida para un proyecto u organización dedicada al software.
Mockups: Un bosquejo de un sitio web o una página web, es la representación gráfica
base de algún proyecto a realizar, dicho bosquejo se puede realizar desde lo más bási-
co (en una hoja de papel), hasta lo más avanzado (utilizando herramientas de diseño
profesionales).
14
Wireframes: Es el esquema o plano de una pantalla, se crea como guía visual que re-
presenta la estructura visual de un sitio web.
Analítica web: Es representada como un proceso que ayuda a la recopilación y revisión
de los datos provenientes de un sitio web, los cuales son analizados y utilizados para la
toma de decisiones.
SEO: El SEO (Search Engine Optimization) optimización de motores de búsqueda, per-
mite generar un mejor posicionamiento en la web, utilizando buenas prácticas de la
programación, optimización en sitios web, seguridad, entre otros.
Linux: Es un sistema operativo open source desarrollado por la comunidad.
Software: Es la parte lógica que funciona en un ordenador.
Hardware: Es la parte física de un ordenador.
DevOps: El desarrollo de operaciones es un concepto que nace de la unión de perso-
nas, procesos y tecnologías. Dentro del desarrollo de operaciones encontramos: Pla-
nificación, código, testing, monitoreo, funcionamiento y despliegue de aplicaciones o
sitios web.
15
1.7. Generalidades de Tecnologías para el trabajo
Full Stack:
Se cuenta con diversidad de herramientas, gestores de contenidos, frameworks, li-
brerías, plugins, repositorios, aplicaciones y entornos de desarrollo para el trabajo Full
Stack. Básicamente integra todas las tecnologías utilizadas en el desarrollo web, tanto
Front End, Back End, Bases de datos, entre otros. Algunas herramienta para el desarro-
llo Full Stack son:
JQuery: facilita la inclusión de animaciones, configurar los estilos de la plataforma y
generar una versión responsiva de la misma.
React: permite la creación de interfaces interactivas, añadiendo distintos elementos
gráficos que mejoran la experiencia de usuario.
Angular: diseñado para crear componentes interactivos que mejoren la simplicidad y
eficiencia del sitio.
Vue: brinda plantillas basadas en HTML pensadas en mejorar el rendimiento de la pla-
taforma.
Lavarel: ofrece alojamiento instantáneo, así como métodos de seguridad de cifrado y
autenticación de usuarios.
CakePHP: permite la conexión con base de datos y almacenamiento en caché.
Symfony: gestiona la memoria caché, reduciendo el ancho de banda usado por el sitio
y la carga del servidor.
16
Phalcon: brinda funcionalidades enfocadas en evitar la sobrecarga del sitio y mejorar
su rendimiento a través de la gestión de la memoria caché del mismo.
Laminas Project: facilita módulos que tienen como objetivo separar el sitio en partes y
escalarlo si es necesario.
Django: aporta funcionalidades de seguridad como autenticación de usuarios y sesio-
nes. Asimismo, permite la conexión con servidores web y bases de datos.
CherryPy: reduce el tamaño del código de Python. Es decir, permite la reorganización
y reescritura del mismo.
Dash: esta enfocado en la administración de bases de datos y aplicaciones web.
Flask: ofrece soporte para realizar pruebas en el sitio.
Web2Py: mantiene las aplicaciones web seguras al abordar las principales vulnerabili-
dades y problemas de seguridad.
Meteor: brinda herramientas para la comunicación usuario-servidor. Esto permite la
creación de un código eficiente y libre de errores.
Express: crea rutas de comunicación entre el servidor y la interfaz gráfica, favoreciendo
la experiencia de usuario.
Next: ofrece división automática de código y enrutamiento basado en sistemas de
archivos.
Koa: utiliza métodos asincrónicos para facilitar el manejo de errores y mejorar el rendi-
miento del sitio.
Nest: brinda una serie de herramientas pre-configuradas que facilitan la creación de
un sitio eficiente y escalable.
Rendimiento: da información sobre los elementos que disminuyen la velocidad del
sito. Esto incluye imágenes y fragmentos de código.
Accesibilidad: supervisa qué tan accesible es el contenido del sitio para los usuarios.
Mejores prácticas: identifica los elementos de la plataforma que no sigue las pautas
actuales y mejores prácticas establecidas por Google.
SEO: destaca los problemas de SEO que sufre la página y brinda recomendaciones de
cómo solucionarlos.
Progressive Web App: indica los problemas de implementación que tiene el sitio o
aplicación web.
17
Otros materiales para profundizar
Recursos de video
Contenidos. (2021, marzo 6). ▷ ¿Qué es el Entorno de Desarrollo? - Neo Wiki. NeoA-
ttack. [Link]
EDteam (Director). (2022). ¿Que aprender para ser programador FULL STACK? ht-
tps://[Link]/watch?v=FbNw5-mkg6E
Referencias bibliográficas de la unidad
Donati, G. (2021). A look at the full stack. Nature Reviews Physics, 3(4), Art. 4.
[Link]
Li, Z., Zhang, Y., & Liu, Y. (2017). Towards a full-stack devops environment (plat-
form-as-a-service) for cloud-hosted applications. Tsinghua Science and Technolo-
gy, 22(01), 1-9.
[Link]
Luna, F., Millahual, C. P., & Iacono, M. (2018). PROGRAMACION WEB Full Stack 24 -
Salida laboral: Desarrollo frontend y backend - Curso visual y práctico. RedUsers.
¿Cuál Es el Salario Promedio de los Desarrolladores Full-Stack? Datos Recientes
de 2022. (2021, julio 15). Kinsta.
[Link]
18
19
20
