Scribd
Cargar
28 vistas11 páginas

Establecer Los Componentes Frontend de La Aplicación Web

Cargado por

Datro Cc
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
28 vistas11 páginas

Establecer Los Componentes Frontend de La Aplicación Web

Cargado por

Datro Cc
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

Evidencia de desempeño: GA6-

220501096-AA4-EV02 establecer los


componentes frontend de la aplicación
web

Presentado por:
Jhon Javier Cerda Castro

ANALISIS Y DESARROLLO DE
SOFTWARE. (2739448)
Categoría del curso
Formación Titulada Virtual y a
Distancia
lOMoARcPSD|21092441

INTRODUCCIÓN
Frontend, o "desarrollo del lado del cliente", se refiere a la práctica de producir HTML,
CSS y HTML
JavaScript. Estos tres elementos son los encargados de diseñar el front end del sitio web o
solicitud Esto incluye fondo, colores, texto, animaciones o efectos. puede construir
complementa lo que los usuarios ven e interactúan mientras exploran el sitio. La interfaz de
usuario se utiliza para cambiar la interfaz de usuario de un sitio web de su estructura a
estilos,
como definir colores, texturas, fuentes y secciones. usándolo
Es importante que el usuario tenga una buena experiencia con el sitio web o la aplicación.

1. Estructuras de navegación. Este elemento se refiere al orden en que se organizan


las diferentes páginas de un sitio web y a los componentes que se vinculan entre sí para
realizar diferentes funciones dentro del sitio.
2. Layout. También nombrado como diseño de página, se refiere a todos los
componentes de la página web, por ejemplo: ubicación del menú, botones, footer; todo lo
necesario para que un sitio sea útil y fácil de navegar.
3. Contenido web. Todo aquello que brinde información relevante o interesante para
los usuarios. Es importante destacar que el contenido no tiene que ser necesariamente texto,
puede incluir sonido o materiales interactivos.
4. Imágenes. Todos los recursos visuales ayudan a aumentar el interés de los usuarios.
Esto también puede incluir videos, animaciones, mapas, gráficas, infografías, GIFs,
ilustraciones, diagramas, etc.
5. Logotipo. Para que un sitio web tenga mayor identidad es vital que contenga el
logotipo que represente a la marca o empresa. 6. Diseño gráfico. Este elemento engloba
todo lo relacionado con cómo se ve el sitio web y su apariencia: colores, formas,
tipografías, tamaños, etc.
PLANTEAMIENTO DEL PROBLEMA
Con base en las características del software a desarrollar realice un documento donde
especifique la estructura de componentes que se van a utilizar para cumplir con las
necesidades del software a desarrollar.
Desarrollo
Se utiliza el editor de texto Visual estudio Code y se instalan complementos que facilitan la
implementación de código, auto completado, diseño de cada etiqueta HTML y CSS

Se crea una carpeta llamada GA6-220501096-AA4-EV01 fundamentos en la


implementación de componentes frontend, HTML, CSS, JS. Aquí se crean archivos
llamados index.html y style.css,
lOMoARcPSD|21092441

también se crea una carpeta llamada img donde se almacenan las imágenes a utilizar en la
página.
Se establece la estructura básica de un documento HTML, estableciendo un título al
documento y creando un enlace a los estilos CSS

Se crea una etiqueta llamada main con clase contenedor que es una etiqueta principal que
contiene a todas las demás etiquetas HTML

Se utiliza una etiqueta header que permite crear el encabezado de una página, aquí
podemos establecer etiquetas como div, nav, a que permite crear un menú de navegación
Se crea una etiqueta de navegación que contiene la introducción de la clase, que contiene
etiquetas como h1, h2, p, ul, li, div, img, que le permite crear contenido de página
introductorio. Por todas esas etiquetas, él es Crea clases para identificar cada uno de estos
elementos agregando código CSS
lOMoARcPSD|21092441
Se crea una etiqueta nav con clase news cards la cual va a contener etiquetas como h1, h2,
p, div, img, que van a permitir crear el contenido de navegadores web dentro del contenido
de la página. A cada una de estas etiquetas se les crea unas clases para identificar cada uno
de sus elementos a la hora de añadir código CSS
lOMoARcPSD|21092441

Se crea por ultimo una etiqueta Footer para la creación de pie de página, el cual contiene
etiquetacomo div, img, con sus respectivas clases
GLOSARIO
Doctype: informa al navegador qué versión de HTML (o XML) se usó para escribir el
documento. Doctype es una declaración no una etiqueta. Además, podemos referirnos a ella
como "document type declaration" o por las siglas "DTD". Head: provee información
general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas
de estilos. Body: de HTML representa el contenido de un documento HTML. Solo puede
haber un elemento en un documento.
Main: representa el contenido principal del de un documento o aplicación.
Header: El elemento de HTML Header () representa un grupo de ayudas introductorias o
de navegación. Puede contener algunos elementos de encabezado, así como también un
logo, un formulario de búsqueda, un nombre de autor y otros componentes.
Div: div de "division" -division. Sirve para crear secciones o agrupar contenido, sus
etiquetas son: y (ambas obligatorias).
Img: representa una imagen en el documento. H1-h2-h3-h4-h5-h6: Los encabezados
HTML son títulos o subtítulos que desea mostrar en una página web. P: (párrafo) es el
apropiado para distribuir el texto en párrafos, sus etiquetas son: y (la de cierre es opcional).
Ul: de "unordered list" -lista no ordenada. crea una lista no ordenada, sus etiquetas son: y
(ambas obligatorias). Li: en inglés item list o elemento de lista declara cada uno de los
elementos de una lista, sus etiquetas son: y (la de cierre es opcional).
Footer :() representa un pie de página para el contenido de sección más cercano o el
elemento raíz de sección

CONCLUSION

El frontend está completamente centrada en el usuario y todo lo que puede usar y ver
cuando navega por el sitio web.
lOMoARcPSD|21092441

Siempre trata de causar una buena impresión, de hacer que un usuario ser feliz Entonces
usas HTML, CSS y JavaScript para esto. Se esfuerza por garantizar que cada usuario de la
web tenga una buena inmersión y experiencia de usuario. para la creatividad de
herramientas y recursos es algo realmente valioso porque tiene que usar fuentes, colores,
fotos y todo lo que necesitas para crear una fuente real bueno y agradable a la vista en cada
dispositivo y revolución. A otro parte, se enfoca en hacer todo lo posible para que el sitio
web funcione correctamente.

BIBLIOGRAFÍA
Coppola, M. (2022). Frontend y backend: qué son, en qué se diferencian y ejemplos.
Obtenido de
https://blog.hubspot.es/website/frontend-
ybackend#:~:text=El%20frontend%20o%20«desarrollo%20del,%2C%20texto%2C%20ani
maciones
%20o%20efectos.
Plus, M. (s.f.). HTML: Lenguaje de etiquetas de hipertexto. Obtenido de
https://developer.mozilla.org/es/docs/Web/HTML w3schools. (2023).
HTML Tutorial. Obtenido de
https://www.w3schools.com/html/html_headings.asp

También podría gustarte