Anteproyecto

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 12

INTITUTO TECNOLOGICO SUPERIOR DE LA

REGION SIERRA

INGENIERIA INFORMATICA

PROPUESTA PARA EL DESARROLLO DEL PROYECTO:

DESARROLLO WEB: FRONTEND EN DISEÑOS DE

PAGINAS WEB

PRESENTA:

SANTIAGO BELTRAN DOMINGUEZ

NUMERO DE CONTROL:

21E30258

ASESOR:

MTRA ALEJANDRA GUADALUPE VAZQUEZ MARTINEZ

TEAPA, TABASCO 02 DE MARZO DEL 2023


Front-end en Diseños de Pagina Web

Objetivo General

Desarrollar una guía de herramientas y técnicas de diseño de lenguajes de programación para

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.

 Mejorar el rendimiento del sitio web optimizando la carga de recursos, minimizando el

tiempo de respuesta y reduciendo el tamaño de los archivos.

 Adaptar el diseño de una web a diversos dispositivos y navegadores

 Crear herramientas que mejoren la interacción entre usuario y web

 Ser creativo

 Herramientas que se utilizan para facilitar el desarrollo web moderno de lado del cliente.

 Configuración básica y conocimientos sobre cómo aprender

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

dispositivos. Además, el desarrollo web en front-end también se enfoca en la optimización del

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

cualquier dispositivo, lo que a su vez aumenta la satisfacción del usuario.

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

posicionamiento en los resultados de búsqueda y una mayor visibilidad en línea.

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

SEO y, en última instancia, aumenta la rentabilidad del sitio web o aplicación.


Bosquejo del Método

1 investigación y Análisis:

 Comprender los requisitos del proyecto y los objetivos del sitio web.

 Realizar investigaciones sobre el público objetivo, la competencia y las tendencias de

diseño actuales.

 Analizar los recursos disponibles, como las herramientas de desarrollo, el diseño de

marca y los activos de contenido.

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,

incluyendo la disposición de los elementos en la página.

 Utilizar hojas de estilo como CSS para dar estilo a los elementos del sitio web y controlar

su diseño y apariencia visual.

 Implementar interacciones y animaciones utilizando JavaScript para mejorar la

experiencia del usuario.


 Realizar pruebas de compatibilidad en diferentes navegadores y dispositivos para

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

otros elementos visuales que componen la apariencia de una aplicación.

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

usuarios de la misma, es todo el código que se ejecuta en el navegador de un usuario, al que se le

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)

Un sistema de frontend se utiliza principalmente para enviar preguntas y solicitudes, y recibir

datos desde el sistema anfitrión. Sirve o proporciona a los usuarios la capacidad de interactuar y utilizar

un sistema de información. Típicamente, los sistemas de front-end tienen capacidades de procesamiento

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)

Es el encargado de definir la jerarquía de la información que se visualiza y su distribución: los

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

herramientas de front end más importantes:

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

propiamente dicha: los colores, las fuentes, los fondos, etc.

JavaScript

JavaScript es el tercer imprescindible en lo relativo al diseño de páginas web y el desarrollo

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

importancia de los frameworks que hacen posible el responsive web design.

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

vez códigos o funciones, sin tener que empezar de cero).

Herramientas para la Creación de Interfaces

Herramientas como Adobe XD (Adobe Experience Design CC), Sketch, Invision o Figma nos

permitirán hacer tareas de diseño y prototipado de aplicaciones web.

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.

Solo necesitas pasión, formación y constancia (Edix, 2022)

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

explorador) haciendo que su diseño sea intuitivo y atractivo. (Edix, 2022)

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

Reuniones con el equipo de diseño para definir los


requisitos de diseño y establecer la apariencia y la
experiencia del usuario (UX) del sitio o aplicación
web.
                       
Creación de mockups y prototipos de la interfaz de
usuario.                        

Revisión y aprobación del diseño con el cliente.


                       

Creación de la estructura HTML de la página o


aplicativo web, incluyendo la definición de las
etiquetas semánticas apropiadas y la organización
del contenido.                        
Implementación de la estructura básica de
navegación y menús.                        

Desarrollo de la base del estilo CSS, incluyendo la


definición de clases y estilos globales.                        

Creación de componentes de UI reutilizables, como


botones, formularios, carruseles, etc.                        
Integración de APIs y servicios externos, si es
necesario.                        
Corrección de errores y ajustes según los resultados
de las pruebas.                        
Integración del front-end con el back-end, si
corresponde, asegurando la correcta comunicación
entre ambos.                        
Ajustes finales de diseño y funcionalidad, basados en
el feedback del cliente y del equipo de pruebas.                        

Preparación para la entrega final, incluyendo la


documentación necesaria y la compilación de los
archivos finales para su puesta en producción.                        

Presupuesto

Se tiene contemplado los siguientes gastos en la elaboración de este trabajo de investigación

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

Optimización de Rendimiento : $1,000 - $3,000

Pruebas y Depuración $1,000 - $3,000

Bibliografía

Castillo, A. (04 de 04 de 2022). Servnet. Obtenido de https://www.servnet.mx/blog/backend-y-frontend-

partes-fundamentales-de-la-programacion-de-una-aplicacion-web

Edix, R. (22 de Noviembre de 2022). Edix. Obtenido de https://www.edix.com/es/instituto/front-end-

developer/

KeepCoding. (02 de Marzo de 2023). KeepCoding. Obtenido de https://keepcoding.io/blog/que-es-el-

desarrollo-front-end/

Mendez, A. (15 de Julio de 2022). Arimetrics. Obtenido de

https://www.arimetrics.com/glosario-digital/frontend

También podría gustarte