Anteproyecto
Anteproyecto
Anteproyecto
REGION SIERRA
INGENIERIA INFORMATICA
PAGINAS WEB
PRESENTA:
NUMERO DE CONTROL:
21E30258
ASESOR:
Objetivo General
construir interfaces de usuario atractivas, intuitivas y altamente funcionales para aplicaciones web
modernas, capaces de adaptarse a múltiples dispositivos y ofrecer una experiencia de usuario óptima.
Objetivos Específicos
Diseñar una interfaz de usuario atractiva y fácil de usar mediante el uso de HTML, CSS y
JavaScript.
Ser creativo
Herramientas que se utilizan para facilitar el desarrollo web moderno de lado del cliente.
Delimitación
El desarrollo web en front-end se enfoca en el uso de tecnologías como HTML, CSS, JavaScript
y frameworks como React, Angular o Vue.js para crear una experiencia de usuario fluida y atractiva en la
web. Los desarrolladores de front-end trabajan en estrecha colaboración con los diseñadores para
implementar sus diseños en la web y asegurarse de que el sitio sea responsive y se vea bien en todos los
rendimiento de la página, lo que incluye la carga rápida del sitio web y la optimización del SEO para
mejorar el posicionamiento en los motores de búsqueda. En resumen, la delimitación del desarrollo web
en front-end es la creación de la interfaz de usuario del sitio web para mejorar la experiencia del usuario.
Justificación
En primer lugar, la justificación del desarrollo web en front end se basa en la necesidad de crear
sitios web y aplicaciones atractivas y funcionales que atraigan y retengan a los usuarios. Una interfaz de
usuario bien diseñada puede hacer que los usuarios se sientan cómodos y comprometidos con la
aplicación o el sitio web, lo que puede traducirse en un mayor uso y, en última instancia, en una mayor
rentabilidad. En segundo lugar, el desarrollo web en front end permite la creación de aplicaciones y sitios
web accesibles en múltiples dispositivos, desde computadoras de escritorio hasta teléfonos móviles y
tabletas. Con la creciente dependencia de los dispositivos móviles, el desarrollo web en front end es
esencial para garantizar que los sitios web y aplicaciones sean fácilmente accesibles y utilizables en
Además, el desarrollo web en front end también es crucial para la optimización del motor de
búsqueda (SEO), ya que una buena UI y UX pueden mejorar la experiencia del usuario, aumentar la
permanencia en el sitio y reducir la tasa de rebote. Todo esto puede traducirse en un mejor
En resumen, el desarrollo web en front end es una parte fundamental del proceso de creación de
sitios web y aplicaciones en línea. Al permitir la creación de interfaces de usuario atractivas y accesibles
en múltiples dispositivos, el desarrollo web en front end mejora la experiencia del usuario, optimiza el
1 investigación y Análisis:
Comprender los requisitos del proyecto y los objetivos del sitio web.
diseño actuales.
2 diseño:
Crear mockups o wireframes que representen la estructura y el diseño visual del sitio
web.
Diseñar la interfaz de usuario (UI) utilizando herramientas de diseño como Sketch, Figma
o Adobe XD.
Crear prototipos interactivos para probar la usabilidad y la experiencia del usuario (UX)
del diseño.
3 desarrollo:
Utilizar lenguajes de marcado como HTML para crear la estructura del sitio web,
Utilizar hojas de estilo como CSS para dar estilo a los elementos del sitio web y controlar
garantizar que el sitio web se vea y funcione correctamente en todas las plataformas.
Marco Teórico
El diseño de interfaz de usuario es una disciplina que se enfoca en cómo se ven y se sienten las
interfaces de usuario. Esto incluye la disposición de elementos, la elección de colores, tipografía, iconos y
El frontend es la parte del desarrollo web que se dedica a la parte frontal de un sitio web, en pocas
palabras del diseño de un sitio web, desde la estructura del sitio hasta los estilos como colores, fondos,
tamaños hasta llegar a las animaciones y efectos. Es esa parte de la página con la que interaccionan los
denomina una aplicación cliente, es decir, todo lo que el visitante ve y experimenta de forma directa. Un
front-end, es la persona que se dedica básicamente al diseño web, pero esto no significa que no toque
código, tanto el front-end como el back-end están en contacto con código todo el tiempo. (Castillo, 2022)
datos desde el sistema anfitrión. Sirve o proporciona a los usuarios la capacidad de interactuar y utilizar
de la lógica computacional o de negocio muy limitadas y se basan en los datos y las funciones del sistema
anfitrión. Sin embargo, algunos sistemas de front-end de nivel avanzado mantienen copias de los datos,
tales como un duplicado de cada transacción, que se envía al sistema de back-end. (Mendez, 2022)
márgenes, los colores, los recursos audiovisuales, las animaciones, etc. El resultado es lo que todos
conocemos: una página web. ero el desarrollo front-end es más que eso. El desarrollo front end se trata de
una serie de tecnologías que no solo se centran en el atractivo de los sitios web, sino que edifican toda la
organización y jerarquía de estos, de manera que con el front-end se mejora su posicionamiento en
buscadores, así como la legibilidad y accesibilidad de cara a los usuarios en. (KeepCoding, 2023)
No obstante, el resultado del desarrollo front end o desarrollo frontal no compite con una interfaz
desarrollada por un programador profesional, que hará uso de diferentes tecnologías front end y lenguajes
front end para optimizar tanto la legibilidad como la performance de la página. Mencionamos las
HTML
Del inglés HyperText Markup Language, el lenguaje creado por Tim Berners-Lee es el estándar
más importante a la hora de crear páginas web, siendo el primer formato de publicación en la World Wide
Web. HTML permite definir todo el contenido que va a aparecer en la interfaz del fronted, desde el texto
hasta las imágenes, gráficas, vídeos, etc. Conviene destacar que el objetivo de esta herramienta de
desarrollo front-end es que la interpretación del código sea la misma en cualquier navegador.
CSS
Las Cascading Style Sheets o CSS es el lenguaje de diseño gráfico encargado de definir la
apariencia visual de las interfaces escritas en HTML para el desarrollo front. Si el anterior lenguaje se
encargaba del contenido en sí, CSS es la parte del desarrollo front-end que se centra en la forma
JavaScript
frontal o fronted. Se trata de un lenguaje de programación interpretado que, en este contexto, ejecuta sus
tareas implementado en el navegador. Algunas de sus funciones en desarrollo front-end son la mejora de
la animación e interactividad del contenido, la actualización automática sin tener que cargar de nuevo la
página o el almacenamiento de datos sobre el comportamiento del usuario (como el tiempo de lectura).
La tasa de empleo en este sector es de más del 93% y el trabajo en remoto es muy habitual.
(KeepCoding, 2023)
Frameworks front-end:
Son paquetes que contienen código prescrito, estandarizado en archivos y carpetas. Algunos de
los frameworks para front-end más populares son Angular, React, Vue o Qooxdoo. Cabe destacar la
Biblioteca jQuery
Aunque hay muchas bibliotecas, esta es una de las más utilizadas. Es clave en el día a día del front-
end, ya que te ahorrará mucho tiempo y esfuerzo (permite a los desarrolladores reutilizar una y otra
Herramientas como Adobe XD (Adobe Experience Design CC), Sketch, Invision o Figma nos
Como apuntamos antes, estas son solo algunas de las tecnologías front-end, ya que un
desarrollador tendrá que conocer también cómo funcionan las APIs avanzadas, las nuevas versiones del
lenguaje ECMAScript, así como las diversas herramientas de desarrollo y metalenguajes que existen.Pero
que no cunda el pánico porque, aunque parezca algo inabarcable o muy complejo, no tiene por qué serlo.
Su alta demanda hace que la de front-end developer se coloque en lo alto del ranking de una de
las profesiones más cotizadas. Es más, apenas tiene paro. Pero ojo, porque encontrar empleo pasa por
saber cómo formarse para llegar a ser un desarrollador web front-end a la altura que hoy requiere el
mundo laboral. Y ¿lo más importante? Actualizarse y estar al día, porque las herramientas y técnicas que
usa un desarrollador front-end están en constante cambio y evolución. Un desarrollador front-end trabaja
la interfaz de usuario desde el punto de vista del código, para que la interacción con el sistema sea
posible. Por lo tanto, se encarga de la parte visual de la web (de todo aquello que puedes ver en tu
Hipótesis
¿La velocidad de carga de una página web afecta la retención de usuarios? Esta hipótesis plantea
que, si una página web tarda mucho en cargar, los usuarios son más propensos a abandonarla antes de que
se cargue completamente, lo que resulta en una menor retención de usuarios y una menor satisfacción del
usuario.
Cronograma
Meses-Semanas
Actividad
Marzo Abril Mayo
1 2 3 4 1 2 3 4 1 2 3 4
Presupuesto
Gastos de Elaboración
Diseño de Interfaz de Usuario (UI) $1,500 - $5,000
Desarrollo de Interfaz de Usuario (UI) $3,000 - $12,000
Integración con API y Servicios Externos $2,000 - $8,000
Bibliografía
partes-fundamentales-de-la-programacion-de-una-aplicacion-web
developer/
desarrollo-front-end/
https://www.arimetrics.com/glosario-digital/frontend