UNIVERSIDAD TECNOLÓGICA DE PANAMÁ

FACULTAD DE INGENIERÍA DE SISTEMAS COMPUTACIONALES

DEPARTAMENTO DE PROGRAMACIÓN DE COMPUTADORAS

NOMBRE DE LA CARRERA
LIC.DESARROLLO DE SOFTWARE

NOMBRE DEL CURSO

DESARROLLO SOFTWARE VII

INVESTIGACIÓN # 1

Nombre del Prof.

KEXY RODRÍGUEZ

Integrantes:
Arango, David 8-932-2275
Gómez, Gael 8-931-239
Terrones, Christian 8-941-804
Torres, Danilo 8-923-894

Grupo: 1LS132

Fecha:

2 de septiembre el 2020
Tabla de contenido

Introducción.....................................................................................................................3

Objetivo de la Investigación...........................................................................................3

Contenido de Investigación (Web FrontEnd)...............................................................4

¿Qué es un lenguaje de programación?....................................................................4

¿Diferencia entre una librería y un Framework?......................................................5

Área de desarrollo de y su utilidad en el mercado...................................................6

Lenguajes de Programación que se utilizan en el área Web FrontEnd.................6

Herramientas de programación..................................................................................7

Conclusiones Personales...............................................................................................8

Bibliografía.......................................................................................................................9

2
Introducción
Esta actividad se desarrollará una investigación referente a Web FrontEnd, abarcando
puntos importantes que bridaran una información concisa y entendible para cualquier
lector, dejando en bastante clara la definición y función de Web FrontEnd en el mundo
de la programación.

Objetivo de la Investigación
Identificar los diferentes lenguajes y herramientas para el desarrollo de aplicaciones en
diferentes áreas de programación.

3
Contenido de Investigación (Web FrontEnd)
¿Qué es un lenguaje de programación?
Es un lenguaje orientado a organizar algoritmos y procesos lógicos que son
interpretados por una computadora o sistema informático, esto permite controlar su
comportamiento físico y lógico.
Un lenguaje de programación utiliza relaciones lógicas e instrucciones, con los cuales
se escribe un código fuente que está compuesto por símbolos y reglas sintácticas y
semánticas.
En el caso de Front-end, estos tipos de lenguajes son utilizados para el desarrollo de
páginas web, que se encargan de conectar y interactuar con los usuarios que la visiten.
Front-end también es la parte visible que muestra el diseño, contenido y para que los
usuarios naveguen.
Existen 3 tipos de lenguaje de programación:
1. Lenguajes de bajo nivel:
a. Estos son lenguajes que son diseñados para equipos específicos y no
pueden ser utilizados en otros equipos.
2. Lenguajes de medio nivel:
a. Este tipo de lenguaje permite operaciones de alto nivel y gestión local de
la arquitectura del mismo sistema.
3. Lenguaje de alto nivel:
a. Este tipo de lenguaje puede ser utilizado para propósito general o
especifico y se emplean independiente de la arquitectura hardware.
Ejemplo de lenguaje de bajo nivel: Basic.
Ejemplo de lenguaje de medio nivel: C.
Ejemplo de lenguaje de alto nivel: Java.
[ CITATION Mar20 \l 6154 ] [ CITATION neo20 \l 6154 ]

4
¿Diferencia entre una librería y un Framework?
Una librería es una colección de elementos, un conjunto de rutinas, en este caso
código, que a menudo suelen tener un propósito concreto. Por ejemplo pueden ser
funciones financieras, clases para trabajar con gráficos o rutinas para importar o
exportar a Excel, PDF o cualquier otro formato. Diría que una librería es una colección
de rutinas que a menudo tienen un propósito específico.
Un framework es casi lo que el nombre indica: un marco de trabajo. Es un conjunto de
herramientas y código para trabajar de acuerdo con una metodología, utilizando unos
determinados patrones, el más popular en el mundo de la web sería el MVC (model-
view-controller o modelo-vista-controlador). [ CITATION Jos17 \l 6154 ]

Ilustración 1/ MVC (model-view-controller o modelo-vista-controlador) / [ CITATION cod17

\l 6154 ]

5
Área de desarrollo de y su utilidad en el mercado
El frontend es a menudo llamado GUI (Graphical User Interface) porque es la interfaz
que los visitantes pueden ver y usar. El frontend se utiliza principalmente para mostrar
varios tipos de contenido y hacer que la entrada del usuario esté disponible para el
backend. El contenido mostrado incluye la estructura básica del sitio web, como la
navegación. El frontend incluye textos, gráficos, vídeos y otros medios.
Un programador Frontend debe saber de códigos [HTML, CSS y JavaScript](HTML,
CSS y JavaScript) para poder usar algunos frameworks o librerías que expanden sus
capacidades para crear cualquier tipo de interfaces de usuarios. React, Redux,
Angular, Bootstrap, Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.
Por lo tanto, su utilidad en e mercado es de mucha importancia ya que es la que trabaja
en la primera fila, más cerca del usuario.[ CITATION Ryt20 \l 6154 ][ CITATION mal17 \l 6154 ]
[ CITATION dta19 \l 6154 ]

Lenguajes de Programación que se utilizan en el área Web FrontEnd

Un desarrollador FrontEnd debe poseer conocimientos sobre los siguientes lenguajes:

HTML: HyperText Markup Language, aquel que nos permitirá darle una buena
estructura y organización a nuestra página web, gracias a su base de etiquetas.
CSS: Cascading Style Sheets, nos permite darle el estilo o formato personalizado a
nuestra página web con el fin de trasmitir o representar lo que buscamos en nuestro
sitio web.
JavaScript: nos ayuda a brindar una mayor interactividad con el navegante
incorporando todo tipo de efecto ya sean de texto, animaciones, botones, ventanas
entre otros.
JQuery: es una librería de JavaScript que básicamente ayuda a simplificar la tarea de
programar, también ayuda a aplicar interactividad a la página sin tener conocimientos
del lenguaje
Ajax: Se puede decir que es una mezcla de las tecnologías ya existentes como html,
css, JavaScript, xml, etc).[ CITATION Alb14 \l 6154 ][ CITATION Pio19 \l 6154 ]

6
Herramientas de programación

Las principales herramientas que podemos utilizar a la hora de la programación del

web Front-end son las siguientes:
 HTML: lo tenemos como la base de todo el desarrollo de páginas web, no hay
desarrollador que no conozca HTML; con esta herramienta podemos llegar a
crear diseños en base a etiquetas como serian hipervínculos entre paginas web,
manejar textos, archivos de video y audio, etc.…
 CSS: esta herramienta la utilizamos junto a HTML para manejar como se ve una
pagina cambiando el diseño o los colores y así poder diseñar una página única
para el cliente o en caso de hacer una pagina para otra persona que no sea un
cliente, esta herramienta se basa en hojas de estilo que diseñamos.
 JavaScript: con JavaScript ya llegamos a los que algunos podrían decir la
verdadera programación de la pagina web ya que utilizas códigos para cambiar
el HTML ya hecho y lograr crear una pagina que respondía a nuestros usuarios
así llegando a conseguir crear una web responsiva y mucho mas agradable a
quien la use, además se puede manejar con servidores dando a nuestra página
web aun mucha más información que se pueda actualizar

También existen varios frameworks para mejorar aún más nuestra página web como
React que es una librería de JavaScript para construir interfaces, bastante flexible y
simple de utilizar; Angular que pertenece a Google, otro framework que integra las
mejores prácticas de programación para que así los participantes puedan comenzar
fácilmente, hasta llega al punto de incluir su propia consola; Ember es otro framwork de
JS que se basa en un modelo-vista-vista-modelo, permite incorporar varios idiomas en
uno.[ CITATION wik20 \l 6154 ][ CITATION Nwo20 \l 6154 ]

7
Conclusiones Personales

Concluyo en que los lenguajes de programación utilizados en Front-end, son muy útiles
para el desarrollo de páginas web, de manera en que facilitan la navegación y la
interactividad para los usuarios en el internet. -Arango, David-

Por primera vez viví la experiencia de trabajar tanto en frontend como en backend,
gracias a un proyectó del semestre pasado debido a que pocas personas teníamos una
capacidad más rápida de aprendizaje, me vi comprometido con tener que ayudar en
ambos lados y llevar al máximo mis habilidades lógicas; de la cual pude adquirí mucha
experiencia en cuanto a lo que es frontend es bastante importante ya que es la zona
que mas interactúa con el cliente y así adquirimos actualizaciones o aceptaciones de
las funcionalidades. -Terrones, Christian-

Los Lenguajes de programación del área Web Front-End son muy importantes y útiles
ya que nos ayudan a darle a nuestra página web una interfaz visual bonita, atractiva,
bien estructurada que nos permita llegar a plasmar la idea que teníamos en mente, de
esta manera podemos llamar la atención de nuestros visitantes. -Torres, Danilo-

Al realizar este trabajo me recuerda a muchas cosas utilizadas el semestre pasado, ya

que desarrollamos páginas web utilizamos herramientas como html, php y laravel para
mejorar así nuestra experiencia a la hora de crearla, ya que me encontraba en la parte
del back-end puede que no tuve la misma experiencia que otros pero puede realizar
mis partes y ahora que realizo esta investigación la mayoría de la información sale
propia de mi ya que son herramientas que ya conozco. -Gómez, Gael-

8
Bibliografía

[1] M. E. Raffino, «enguaje de programación,» concepto, 11 julio 2020. [En línea]. Available:
https://concepto.de/lenguaje-de-programacion/. [Último acceso: 30 Agosto 2020].

[2] neoattack, «front-end,» neoattack, [En línea]. Available: https://neoattack.com/neowiki/front-end/.

[Último acceso: 30 Agosto 2020].

[3] J. Valle, «¿Cuál es la diferencia entre librería y framework?,» quora, 8 Mayo 2017. [En línea].
Available: https://es.quora.com/Cu%C3%A1l-es-la-diferencia-entre-librer%C3%ADa-y-
framework#:~:text=definen%20bastante%20bien.-,Una%20librer%C3%ADa%20es%20una%20colecci
%C3%B3n%20de%20elementos%2C%20un%20conjunto%20de,suelen%20tener%20un%20prop
%C3%B3sito%20concreto.&t. [Último acceso: 31 Agosto 2020].

[4] Ryte GmbH, «Frontend,» ryte, [En línea]. Available: https://es.ryte.com/wiki/Frontend. [Último
acceso: 31 Agosto 2020].

[5] maldeadora, «Qué es Frontend y Backend,» platzi, 2017. [En línea]. Available:
https://platzi.com/blog/que-es-frontend-y-backend/#:~:text=Frontend%20es%20la%20parte
%20de,corre%20del%20lado%20del%20servidor.. [Último acceso: 31 Agosto 2020].

[6] dtagency, «Qué necesitas para convertirte en Desarrollador Frontend,» dtagency, 19 Marzo 2019.
[En línea]. Available: https://dtagency.tech/desarollador-frontend/. [Último acceso: 31 Agosto 2020].

[7] A. Pedraza, «¿Qué es desarrollo frontend?,» desarrollofrontend, 1 septiembre 2014. [En línea].
Available: https://desarrollofrontend.com/que-es-desarrollo-frontend/. [Último acceso: 30 Agosto
2020].

[8] P. Stefaniak, «¿Qué es Back end y Front end?,» descubrecomunicacion, 26 Julio 2019. [En línea].
Available: https://descubrecomunicacion.com/que-es-backend-y-frontend/. [Último acceso: 30
Agosto 2020].

[9] wikipedia, «Desarrollo web Front-end,» wikipedia, 29 Agosto 2020. [En línea]. Available:
https://es.wikipedia.org/wiki/Desarrollo_web_Front-end. [Último acceso: 31 Agosto 2020].

[1 N. Lotanna, «What are the most in-demand frontend frameworks in 2020?,» logrocket, 6 Enero
0] 2020. [En línea]. Available: https://blog.logrocket.com/state-of-javascript-what-are-the-most-in-
demand-frontend-frameworks-in-2020/#:~:text=Survey%20respondents%20ranked%20React
%20as,Angular%2C%20and%20Ember%2C%20respectively. [Último acceso: 31 Agosto 2020].

[1 codingornot, «codingornot,» Octubre 2017. [En línea]. Available: https://codingornot.com/wp-

1] content/uploads/2017/10/mvc-modelo-vista-controlador.png. [Último acceso: 31 Agosto 2020].