Diseño Gráfico Computacional

[pic 1]

MODULO 3

Diseño Gráfico Computacional

Resultado del Aprendizaje:

Crea un sitio web básico mediante línea de código abierto, aplicando la correcta estructura de HTML, en un contexto de en un contexto de diagramación de código estándar, usando las diferentes variables del lenguaje en el software gratuito sublime.

Nombre Docente:         

Nombre Alumno:        Juan Pineda Berríos.

Fecha de Entrega:         18/07/2023        

Carrera:                         Ingeniería en Informática.

Introducción

Actividad.

La siguiente actividad que deberán realizar se divide una parte práctica y otra teórica:

I. Práctica: Trabajo de un sitio web

1. Trabajen en el desarrollo de una página web (tema libre) con el software gratuito Sublime, el cual debe contener los siguientes componentes:

a. Header

b. Navigation Bar

c. Main Content

d. Sidebar o Barra Lateral

e. Footer

2. Entrega el archivo fuente desarrollado en Sublime con el nombre “index.html”.

3. Tanto el diseño como el contenido del archivo en la línea de código es libre.

4. Se evaluará la correcta estructura y desarrollo de la línea de código.

Dentro de la carpeta, está el archivo del proyecto. Junto con el código y elementos utilizados.

II. Parte Teórica:

Elijan un sitio web cualquiera, analícenlo y elaboren el siguiente informe con extensión de 1 plana:

1. Expliquen y fundamenten el porqué de la selección de este sitio.

Como grupo quisimos elegir la página web oficial del Servicio de Impuestos Internos de la República de Chile, toda vez que muestra en si una interfaz amigable, intuitiva, de fácil entendimiento y con todos los elementos vistos en las clases de este módulo. Es necesario ver que toda página gubernamental o que se ligue a ella, sea accesible a todas las personas. No todos tienen capacidades visuales optimas o mantienen otra situación.

1. Indiquen todos los componentes que tiene la página web elegida.

[pic 2]

1. Detallen la estructura de la página web dividiendo el sitio, en la estructura vista en el módulo (header, navigation bar, main content, siderbar, footer).

En lo respectivo a los componentes propios de esta página web, se puede observar que esta contiene un Header el cual tiene entre sus opciones el ingreso a la plataforma con una cuenta ya registrada al clickear en “Ingresar a Mi Sii”.

[pic 3]

La imagen corporativa de la institución pública, listas desplegables con diferentes servicios, métodos de contacto, todos distribuidos en Containers para ordenar los elementos de manera armónica.

[pic 4]

Luego en el Body de esta página tenemos diferentes “divs”, los cuales albergan; el primero un carrusel el cual va mostrando imágenes con información relevante sobre cuenta pública, focos de gestión, etc. Cada uno adosado con una imagen, un título y un botón que enlaza a opciones de revisión de documentos y/o búsqueda de información.

[pic 5]

Siguiendo con la revisión, podemos ver que, dentro de la misma página, existe un Section en el cual se dividen 06 imágenes responsivas, que son enlaces a otras páginas del mismo sitio web, además de dar en su parte superior derecha, un botón que enlaza a la opción de búsqueda de más portales como los que se muestran en la interfaz. Luego, al costado derecho de la página web, se encuentra un Aside, el que tiene por objeto mostrar noticias relevantes en lo que refiere a la página del SII, como temáticas relacionadas con la institución, dividiéndose en un título “Noticias”, un Href a su costado derecho que indica textual “Ver otras noticias” y en su parte inferior, tres segmentos de noticias actuales, ordenándose desde arriba abajo según la actualidad de la información, las cuales son responsivas y al usuario lo enlazan directamente a la noticia en general clickeando sobre él. Continuando, más abajo se encuentra un nuevo Section, en donde se ubica un nuevo Carrusel, el cual va mostrando imágenes responsivas de elementos propios del sitio web como Solicitud de información por Ley de Transparencia, Catalogo de Esquemas Tributarios, Código de Ética, Cuenta Publica Participativa, Cotizaciones para Trabajadores a Honorarios, todo lo cual se muestra por lapsos de segundo. A los costados del Carrusel, se ubican de igual manera dos flechas, las cuales son botones que al presionarlos, da la opción de volver a la imagen responsiva o avanzar a la siguiente para el interés del cliente.

...