Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Establecer Los Componentes Front-End de La Aplicación Web GA6-220501096-AA4-EV02

    Cargado por

    Gregorio alfonso leiva cardoso
    58 vistas10 páginas
    sistemas

    Título original

    Establecer los componentes front-end de la aplicación web GA6-220501096-AA4-EV02

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    sistemas

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como docx, pdf o txt
    58 vistas10 páginas

    Establecer Los Componentes Front-End de La Aplicación Web GA6-220501096-AA4-EV02

    Cargado por

    Gregorio alfonso leiva cardoso
    sistemas

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    Descargar como docx, pdf o txt
    de 10

    ESTABLECER LOS COMPONENTES

    FRONT-END DE LA APLICACIÓN WEB GA6-220501096-AA4-EV02

    APRENDIZ:

    GREGORIO ALFONSO LEIVA


    CARDOSO

    FICHA:2721402

    INSTRUCTORA: DEISI CAROLINA

    TECNÓLOGO EN ANÁLISIS Y DESARROLLO DE

    SOFTWARE CENTRO DE FORMACION LA ANGOSTURA -

    REGIONAL HUILA

    2024
    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 components 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 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 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
    INTRODUCION

    HTML es el lenguaje de marcado estandar para crear páginas ,.eb.

    HTML s gnofiu eog"a¡e de m•�•do dt h perttxto


    HTML ts ti lengua¡t dt m•�•do tst4ndar pano crear Q4g,nas web.
    HTML desenbe la estructura de una páo na \Veb

    Se crea una etiqueta navcon clase editores la cual va a contener


    etiquetas como hl, 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 Codigo 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 y
    enlaces 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 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: <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 una lista, 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

    También podría gustarte