Fundamentos en La Implementación de Componentes Front-End, HTML, CSS, JS

lOMoAR cPSD| 17400180
TEMA:
FUNDAMENTOS EN LA IMPLEMENTACIÓN DE COMPONENTES FRONT-END, HTML, CSS, JS
PRESENTADO POR:
NARLYS PAOLA BOLAÑOS CASTILLO
TECNOLOGIA:
ANALISIS Y DESARROLLADO DE SOFTWARE
FICHA: 2627079
VALLEDUPAR – CESAR
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
Downloaded by Reynaldo Maestre Lopez

([email protected])
li 0
Se crea una etiqueta llamada ma con clase contenedor que es una
etiqueta principal quecontiene 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
00
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 l es crea
unas clases para identificar cada uno de sus elementos a la hora de añadir código CSS
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 yenlaces a
scripts y hojas de estilos.
Body: de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body>
en un documento.
Main: <main> representa el contenido principal del <body> de un documento o aplicación.
Header: El elemento de HTML Header (<header>) representa un grupo de ayudasintroductorias
o de navegación. Puede contener algunos elementos de encabezado, así como también unlogo,
un formulario de búsqueda, un nombre de autor y otros componentes.
Div: div de "division" -division. Sirve para crear secciones o agrupar contenido, susetiquetas
son: <div> y </div> (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: <p> y
</p> (la
de cierre es opcional).
Ul: de "unordered list" -lista no ordenada. crea una lista no ordenada, sus etiquetas son:
<ul> y
</ul> (ambas obligatorias).
Li: en inglés item list o elemento de lista declara cada uno de los elementos de unalista, sus
etiquetas son: <li> y </li> (la de cierre es opcional).
Footer :(<footer>) representa un pie de página para el contenido de sección más cercano o el elemento
raíz de sección
12
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 parahacerlo.
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 webpueda trabajar correctamente.

Fundamentos en La Implementación de Componentes Front-End, HTML, CSS, JS

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

Fundamentos en La Implementación de Componentes Front-End, HTML, CSS, JS

Cargado por

Copyright:

Formatos disponibles

lOMoAR cPSD| 17400180

FUNDAMENTOS EN LA IMPLEMENTACIÓN DE COMPONENTES FRONT-END, HTML, CSS, JS

NARLYS PAOLA BOLAÑOS CASTILLO

ANALISIS Y DESARROLLADO DE SOFTWARE

El frontend o «desarrollo del lado del cliente» se refiere a la práctica de

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

6. Diseño gráfico. Este elemento engloba todo lo relacionado con cómo se

PLANTEAMIENTO DEL PROBLEMA

Se utiliza el editor de texto Visual estudio Code y se instalan complementos que

Downloaded by Reynaldo Maestre Lopez

Se utiliza una etiqueta header que permite crear el

También podría gustarte