Análisis y desarrollo de software

fundamentos en la
implementación de componentes
frontend, HTML, CSS, JS.
GA6-220501096-AA4-EV01
Código: 2522002

Versión: 01

Antonio Huertas Santamaria

Abril de 2023

Sistema Integrado de Gestión y

Autocontrol

1
 Introduccion

Teniendo en cuenta el proceso formativo, se debe tener en cuenta, que el diseño responsive de una app o una
pagina web, se considera una de las practicas optimas y de calidad según nuestra ruta de aprendizaje teniendo
en cuenta la importancia de tener conocimiento clave y vital para cualquier programador.

2
 Componentes de la página web de prueba

• Tipos de lenguajes usados

❖ Html

Se usan nociones básicas para realizar una pagina web con ejemplos y de prueba, se
describirán los componentes mas adelante

3
 1. Header

En este caso se utiliza la etiqueta header titulo notorio de la pagina web y poner indicar de
que tratara este blog de prueba realizado, adicional se marca con una etiqueta id para
identificarla y se utiliza la etiqueta h1 para el texto

2. Section

Se usaron etiquetas de sección para diferenciar del resto del cuerpo de la pagina unos
ítems que llamamos artículos y con class “post”, de esa manera cuando se use css para
darle estilo, podremos generarlos de manera unificada, teniendo en cuenta que es un blog
Adicional se usa la etiqueta h2 para cambiar el tamaño del titulo y se agregan “p” para
4
poner un párrafo o texto y se insertan imágenes con la la etiqueta ims= src llamando
imágenes almacenadas y dándole un tamaño según lo que queremos.

3. Footer
Como es importante la distribución también generamos un pie de pagina, que tiene ciertas
funciones

Dentro de las cuales esta dejarlo fuera de las section anteriores para diferenciarlo,
marcándolo con la etiqueta footer, darle una opción con la etiqueta <a href=
Para que una vez el usuario llegue al final de la pagina, con ese botón que llamamos “ir al
comienzo” pueda regresar al principio sin hacer scroll con su mouse o dedo, según el
dispositivo que este usando

5
❖ CSS

Al igual que HTML, se describirán los componentes usados para el desarrollo web mas
adelante

1. Font Family

Con css busco cambiar el tipo de fuente predeterminada para darle algo mas de estilo y
diseño al blog de prueba

6
Como podemos ver, también le damos una margen redondeada en los bordes para que
sea mas estético y con un tamaño acorde a la pagina, que permita mantener la calidad de
la imagen, se agrega color y se le da la opción de que cuando el usuario pase por encima
de los ítems su puntero cambien

7
También se le da un estilo al footer, para diferenciarlo del cuerpo del blog, con un tono
mas oscuro y que este flotando usando la etiqueta FLOAT

❖ JS

Con javascrip debido a mi corto conocimiento del mismo, genere únicamente una aleta
den una ventana emergente, indicando que se logro la conexión entre el html y javascript