Ga6-220501096-Aa4-Ev02 Componentes Frontend

Servicio Nacional de Aprendizaje
GA6-220501096-AA4-EV02 establecer los componentes frontend de la

aplicación web
24/08/2023
INTRODUCCIÓN
El frontend o «desarrollo del lado del cliente» se refiere a la práctica de producir HTML,
CSS y JavaScript. Estos tres elementos se encargan de dar forma a la parte frontal de un
sitio web o aplicación. Esto incluye los fondos, colores, texto, animaciones o efectos. Se
puede construir por completo lo que los usuarios perciben al explorar un sitio y con el que
pueden interactuar.
El frontend sirve para realizar la interfaz de un sitio web, desde su estructura hasta los
estilos, como pueden ser la definición de los colores, texturas, tipografías, secciones, entre
otros. Su uso es determinante para que el usuario tenga una buena experiencia dentro del
sitio o 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, 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 nav con clase intro la cual va a contener etiquetas como h1, h2, p, ul,
li, div, img, que van a permitir crear el contenido de introducción 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.
CONCLUSIONES
El frontend se centra totalmente en el usuario y en todo con lo que pueda interactuar y lo que ve
mientras navega por la web. Siempre va a buscar a causar una buena impresión, a que el usuario
esté feliz. Por lo que va a usar HTML, CSS y JavaScript para hacerlo.
Busca que cada usuario de la web tenga una buena experiencia de inmersión y usabilidad. Para él
la creatividad en las herramientas y recursos es algo realmente valioso ya que deberá emplear
fuentes, colores, fotografías y cualquier elemento del que disponga para crear un sitio realmente
bueno y agradable que se pueda visualizar desde cualquier dispositivo y revolución. Por otra parte,
estará centrado en hacer todo para que un sitio web pueda trabajar correctamente.

Ga6-220501096-Aa4-Ev02 Componentes Frontend

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ga6-220501096-Aa4-Ev02 Componentes Frontend

Cargado por

Copyright:

Formatos disponibles

Servicio Nacional de Aprendizaje

GA6-220501096-AA4-EV02 establecer los componentes frontend de la

PLANTEAMIENTO DEL PROBLEMA

También podría gustarte