essie-hila

[essie-hila]

Análisis de accesibilidad Fase2

Resumen del análisis por criterios y principios:

Principio 1: Para tener un nivel elevado en el principio, la página debe de hacer mejoras en su accesibilidad, implementar audios o más alternativas a parte de los símbolos, contiene solo un formato que funciona bien, pero podría implementar una voz de ayuda. 

1.1 La página cumple con las alternativas textuales para el contenido no textual, siendo este el uso de los símbolos acompañando al texto en la página y solo siendo el símbolo de la casita para el inicio de la página el único que no es acompañado de texto. No se limita solamente a texto. (Nivel A)

1.2 La página no cuenta con videos o grabaciones, solo un enlace para acceder a estos desde otra página, pero los videos cumplen con algunos criterios teniendo un estilo distinto para cada video, algunos sin audio solo visual, otros con audio sin la necesidad de tener que verlo, pero no cumplen al mismo tiempo todos estos criterios. Pero si contaran con un video o audio en la página principal podría aportar accesibilidad para algunos usuarios, una guía para tener mayor acceso, pero la mayoría de usuarios tienen más la facilidad de visitar al sitio que revisar la página, con este cambio podría mejorar la estancia del usuario. (Nivel A)

1.3 La página si cumple con estos criterios, es adaptable para una disposición simple sin que pierda alguna información, accesible para un usuario que no sepa específicamente dónde debe de ingresar para su objetivo, el diseño de la página tiene la intención visual de guiarte de los importante a distintos subtítulos que generan la información necesaria. (Nivel A)

1.4 Estos criterios no llegan a ser cumplidos del todo, si la página contara con más medios como audios o sonidos (cumpliendo con las normas), tendría una mejor función y sería accesible para personas con problemas de la vista, pero como la página no es visitada del todo, siendo del Banco muchas personas prefieren hacer sus preguntas desde el sitio, quizá estos cambios e implementaciones de criterios podría mejorar la estancia de la página y hacerla accesible para otros usuarios sin tener que pedir tutoría. (Nivel AA)

Principio 2: La página cumple con gran parte de los criterios, es accesible por distintas razones según los criterios que lo categoriza como un nivel “AAA”.

2.1 El uso del teclado en la página podría ser un tanto complicado para el usuario, para saber mejor de las funciones podría integrarse un manual para conocer de estas funciones y llevarlas a cabo al momento de ser usadas con respecto al teclado de una computadora. (Nivel A)

2.2 Para el tiempo de la página, no tiene un tiempo límite para la navegación, pero al momento de acceder datos tiene un tiempo límite, pero eso no tiene que ver con la información que proporciona la página. (Nivel AAA)

2.3 No contiene destellos fuertes, solo apariciones de imágenes de forma lenta según la información, y el cambio de colores por las imágenes, los colores de la página permite que la mirada acepte el cambio de contraste es accesible. (Nivel AAA)

2.4 Es navegable la página, contiene varios enlaces para las páginas web que son de mayor utilidad en el momento de solicitar información. Es accesible para funciones importantes para ayuda en el encabezado y de otros contactos por las redes sociales en la parte inferior.      (Nivel AAA)

Principio 3: La entrada de datos es asistida, la página contiene distintas funciones de solicitudes y marcación de errores. Es conforme. 

3.1 Solo para el cambio del idioma, la página puede conservar algunos criterios como en el diseño de la página, pero necesita implementar estas funciones que no son proporcionadas para una mejor experiencia, la pronunciación, abreviatura, la identificación de las palabras en esencial. (Nivel AA)

3.2 Las páginas operan de forma predecible, pero esto le aporta facilidad a la hora del uso, accesible para personas que tal vez no comprendan el lenguaje, hay una identificación clara, pero tiene una complicación al ingreso de una categoría que pasa la página a ser como para un celular, el diseño cambia y para al inicio debe de regresar atrás con la función de la aplicación, no tiene alguna función en específico para volver atrás. (Nivel AA)

3.3 Contiene la ayuda que necesita el usuario para acceder a la página, además de tener distintas formas de contactarlos por cualquier consulta, el llenado de datos también proporciona la sugerencia de cálculo en la función que se solicite sin tener que haber llenado con datos personales, estos solo solicitan otros datos para las solicitudes, en cuanto a otras funciones, tienen las funciones de cambio. (Nivel AAA)

Principio 4: Para este principio, la página contiene suficiente información robusta para consultar, si no se llega a obtener algo, tiene la facilidad de comunicación por el ícono de comunicación que sigue a cada página. 

4.1  La página contiene un contenido Robusto, e incluso si llega a perder la ubicación de algunos servicios que contiene, en parte superior como inferior tiene la posibilidad de encontrarse partes de estos que son los más solicitados, pero la información que proporciona cada parte está muy bien realizada, por cada “ver más” la página pasa a ser otra y tiene nuevas características de la parte superior en la que aparecían las anteriores que llevan a nuevos enlaces o información que proporciona la página. El contenido es suficiente para el acceso. (Nivel A)

Evaluación final:

La página web tiene un buen contenido y contexto, pero le hace falta algunos criterios que serían importantes para la accesibilidad del usuario, el diseño aporta a la página y el contexto a parte que contiene de todo el contenido y la comunicación directa con un servicio de comunicación y la accesibilidad a otros enlaces relacionados con la página. Si tuviera implementado algunos criterio que ya fueron mencionados, sería una página completamente accesible para cualquier usuario. 

[essie-hila]

Análisis de accesibilidad, Fase 2

Para este trabajo, primero deben de comprenderse los Niveles de orientación de las WCAG 2.0:

Para poder satisfacer las necesidades tan variadas de esta audiencia, se proporcionan varios niveles de orientación: principios generales, pautas generales, criterios de conformidad verificables y una amplia colección de técnicas suficientes, técnicas recomendables y fallos comunes documentados con ejemplos, enlaces a recursos adicionales y código.

Para esta evaluación por criterios, se pondrá a cada uno de estos su nivel de accesibilidad consta en:

Nivel A: Para lograr conformidad con el Nivel A (el mínimo), la página web satisface todos los Criterios de Conformidad del Nivel A, o proporciona una versión alternativa conforme.

Nivel AA: Para lograr conformidad con el Nivel AA, la página web satisface todos los Criterios de Conformidad de los Niveles A y AA, o se proporciona una versión alternativa conforme al Nivel AA.

Nivel AAA: Para lograr conformidad con el Nivel AAA, la página web satisface todos los Criterios de Conformidad de los Niveles A, AA y AAA, o proporciona una versión alternativa conforme al Nivel AAA.

Lo siguiente por cada criterio se tendrá una evaluación por parte, un análisis de si tiene la accesibilidad o no la tiene, además de consejos.

↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥↥

[essie-hila]

¿𝐐𝐮𝐞́ 𝐬𝐨𝐧 𝐥𝐚𝐬 𝐩𝐚𝐮𝐭𝐚𝐬 𝐝𝐞 𝐚𝐜𝐜𝐞𝐬𝐢𝐛𝐢𝐥𝐢𝐝𝐚𝐝?

Las Pautas de Accesibilidad de Contenido Web 2.0 definen cómo crear un contenido web más accesible para personas con discapacidad. La accesibilidad considera un amplio rango de discapacidades, como son las visuales, auditivas, físicas, del habla, cognitivas, relativas al lenguaje, de aprendizaje y neurológicas.

[essie-hila]

Práctica: Análisis de accesibilidad. Fase 1.

1. ¿Quién es el usuario de la aplicación? ¿Cómo podemos describirlo? ¿Qué costumbres y comportamientos tiene? ¿Qué necesidades tiene y cómo el sitio las soluciona?

La experiencia personal del usuario por el hecho de que en la página se le presenta los diseños de tarjetas que puede obtener dependiendo de su necesidad a la hora de elegir una de estas. También como el rango de edad que es más como un golpe de la realidad para el usuario dependiendo de su edad para identificarse según su edad. Pero para otros solo es un paso de ciclo como las tarjetas BANCA JOVEN, BANCA ACTIVA y BANCA SENIOR que son uno de los servicios más conocidos por el usuario.

Otros accesos es la información detallada y resumida de que consiste con las sugerencias como “abrir una cuenta” que sería de mayor interés para la gran mayoría de usuarios. Te dirige a una página en que puedes acceder por un código mediante el celular. Es accesible para el usuario por su información resumida y tienes la opción de “ver más”. Pero sería una página que revisaría alguien solo entender su funcionamiento, la aplicación de celular sería la más usada contando con una cuenta.

2. Qué propósito cumple el sitio? ¿Cuáles son sus objetivos?

El sitio tiene un buen contenido con respecto a la información que debería e tener si requiero abrir una cuenta, pero solo se llegaría a usar esta pagina para buscar información que usarla después de ello ya que para ese caso sería más eficiente usar la aplicación cuando ya cuentas con una propia cuenta que solicitar una nueva que para ese caso solo podría de solicitarse a la página para conocer los distintivos servicios que puede ofrecer esta página al usuario. El diseño e imágenes utilizadas tiene mucho de interacción con el contenido y da una mejor experiencia enfocándose en distintas edades.

3. ¿Cómo es su estructura? ¿Cuántas secciones tiene y cuántas páginas? (realiza un esquema simple de su estructura, un mapa del sitio) 

4. ¿El sitio presenta una interacción fácil? ¿Se encontraron errores de funcionamiento? 

La interacción con la página en sí es sencilla, pero al ir a una de las opciones “Tarjeta de Crédito” se dirige como a una nueva página donde el diseño cambia a algo más sencillo, pero sería de utilidad que se mantuviera en la misma y no tuviera la necesidad de cambiar a otra como las demás se mantienen, en el cambio parece a ver un error por lo que tarda de cargar. 

5. ¿La presentación es limpia y contribuye a la comprensión del contenido? 

Las presentaciones cumplen similitud a la hora de entrar a otras opciones, las demás cumplen con ese mismo papel, pero es distinto el contenido. La presentación en sí, también se relaciona con su aplicación donde se puede ver el mismo diseño y facilidad de interpretación de contenido. Mantienen los Isotipos que vemos en la misma página, no hay donde perderse en el contenido.

6. ¿El lenguaje es claro y empático? ¿Genera un diálogo con el usuario? 

Puede que el lenguaje no sea entendible para todos, para distintos casos con el usuario es probable que para personas adultas se tenga la necesidad de guiar por estos nuevas actualizaciones gráficas que quizá no lleguen a comprender, algunas de las imágenes pueden ser interpretadas de una forma distinta sin llegar al objetivo, pero con el complemento del texto puede tener una mejor ubicación para el usuario.

7. ¿Con que medios cuenta (imágenes, videos, audios, animaciones, etc)? ¿Estos pueden ser comprendidos por cualquier persona? 

Cuenta en especial con imágenes de personas adaptado en general al contexto, como un ejemplo con las elecciones de en las tarjetas donde se adapta a un estilo en específico y el modelo cambia con ese estilo. También cuenta con animaciones en otras categorías que si le da un toque diferente y enfatiza en el contexto de ser una opción distinta a las demás opciones que contiene la página, además de contar con iconos que mejora la experiencia.

8. ¿Cómo es la experiencia de usuario? ¿Existen elementos que generen deleite? 

El deleite es ver el diseño de la página y encontrar cierta armonía entre imágenes y el contexto que es fácil de identificar por sus imágenes mismas, todo está bien dirigido y no solicita inmediatamente datos como suelen hacerlo otras, solo las solicita cuando te sientes interesado según la elección que tengas de adentrarte a una categoría. Pero insiste en conocer tu ubicación.

9. ¿Cómo describes el tono gráfico y comunicacional del sitio?

Tiene una interesante armonía de lo que es el texto y la imagen, algunas se salen del concepto que le otorga el texto en sí, pero viendo más subopciones se encuentra de nuevo esta armonía entre los elementos. 

Cumple con una jerarquía, de texto como de imágenes que nada permanece fuera de su lugar.

[essie-hila]

Mi queja

[essie-hila]

𝔼𝕩𝕥𝕣𝕒𝕤

[essie-hila]

Accesibilidad y Usabilidad

Clase 17/11

La accesibilidad intenta vencer las discapacidades del usuario para acceder a la información; mientras que la usabilidad busca mejorar la experiencia del usuario al usar las páginas web.

- Accesibilidad ➛ Libertad ➛ Fácil acceso ➛ Mecanismo para acceder ➛ Sin restrinciones para todos

Usabilidad:

➛ Más simple

➛ Que tenga reestricciones

➛ Reglas para una página

➛Instuitivo

Capacidad de acceder , utopia universal y lo otro universal aquí

[essie-hila]

Mapas de mis compañeros

[essie-hila]

SQUARETAL

Exposición

Squaretal es un mapa que en español es "Cuadrado Digital" ya que es una simulación a una pantalla de un monitor, pero es un mundo paralelo al nuestro en que el mundo se dividió casi como ocurrió con la Tierra, tiene una historia similar a la nuestra.

En un mundo paralelo donde existen diferentes políticas como nuestro mundo vive estas políticas.

POLITICAS DE REDES SOCIALES: Las políticas de redes sociales hacen referencia a documentos que detallen como una organización y los usuarios deben comportarse en ella.

POLITICAS DE GOOGLE: La políticas de GOOGLE van relacionadas a la privacidad de ayudar a entender la información que se recopila, como podemos actualizar, administrar, exportar y borrar información.

POLITICAS DE STREAMING: Las políticas de streaming tienen relación al contenido multimedia (video, audio) del dispositivo conectado a internet.

POLITICAS DE COMPRA Y VENTA: Las políticas de compra y venta tienen relación con las deudas, compras y préstamos.

Se divide en cuatro continentes: Páginas Web, Redes Sociales, Streaming y servicios.

En su historia, el mapa comienza a extenderse con el tiempo, a su alrededor pueden ir apareciendo islas. Tienen una conexión por la red Wifi.

[essie-hila]

Diseño del Mapa de Internet

Clase 10/11

Comenzamos con la explicación de esta tarea que era hacer un mapa con las páginas que más visitamos como países.

Empezamos a nombrar las páginas que más usamos, los catalogamos por lo que son:

-Sitios web: Wikipedia, NEO, Pinterest, Scielo, You Tube.

-Medios sociales: Facebook, Instagram, Linkedln, Tik Tok, Whatsapp, Messenger, Snapchat, Discord.

-Streaming: Netflix, HBO Max, Star Plus, Disney, Spotify, Prime Video.

-Google: Fotos, Drive, Forms, Docs, Meet, Font Académico, Maps, Gmail.

Lagunas:

-Canva

Rincón del Vago

[essie-hila]

2da Presentación del PixelArt (Mi presentación)

03/11 Clase 13 PIXELART TERMINADO

[essie-hila]

𝐌𝐈 𝐏𝐑𝐎𝐂𝐄𝐒𝐎 𝐃𝐄𝐋 𝐏𝐈𝐗𝐄𝐋 𝐀𝐑𝐓

Comenzamos por el boceto final para realizar el Pixel Art en los Maples de huevo dividido por cada maple.

6x6 maples - 12 pixeles por maple - total de 72 x 72 pixeles

(La hoja sufrió en el proceso)

2. Seguimos con las justificaciones del PixelArt, la relación de los maples de huevo con el golem como mi principal concepto y su forma de ser creado que influirá en mi PixelArt.

3. Preparando los maples, la cantidad necesaria.

4. Por la forma del maple de huevo tuve que cortar los bordes de cada uno.

5. Acomodar los maples y considerar su tamaño.

6. El proceso de la pintura: Investigué sobre pintura casera por si la mía no me alcanzaba, pero en el momento quise relacionarlo y por lo tal solo hice uso de esta pintura casera de:

Harina

Sal

Agua

Tintes

Un proceso complicado por la gran cantidad de pintura que necesité, poner los mismos tonos era complicado porque era difícil recuperar el tono y debía de repasar todo de nuevo, pero hubo una muy interesante reacción con la mezcla de agua.

7. Primeras líneas:

Para el comienzo del PixelArt, debía de hacer primero la posición de las manos de la parte inferior y la cabeza circular de la parte superior, fue lo primero que ubiqué gracias al boceto dividido en las partes de los maples.

En este proceso, una mano resultó ocupar mucho espacio y eso comenzó a ser un problema.

8. Comienzo a poner los colores fuertes, la cabeza con un salpicado de colores.

9. Como prioridad tomé las manos.

10. Para la clase que no presenté, lo mejoré porque me faltaba el fondo, el final para esa clase era este:

11. Y hubo un reemplazo de maples para el fondo: solo quedaba esto:

[essie-hila]

Presentación y justificación del PixelArt (Final)

Clase 27/10

[essie-hila]

𝕃𝕒 𝕨𝕖𝕓

Clase 20/10

Última justificación y oportunidad de presentar el significado del material que pondría en uso para el PixelArt.

El World Wide Web

La "WWW" es un servicio, en informática, la World Wide Web o red informática mundial​ es un sistema que funciona a través de Internet, por el cual se pueden transmitir diversos tipos de datos a través del Protocolo de Transferencia de Hipertextos o HTTP, que son los enlaces de la página web.

LA WEB

Web 1,0 ➘ Tecnócratas - Consumer - información - servidores Software.

Web 2.0 ➘ Usuario empoderado - Plantilla - Presumer - Servidores - herramientas online.

Web 3.0. ➘ criptomoneda - blockchain

[essie-hila]

4. Justificaciones de Pixel Art (Fallas)

La primera idea de usar los Cd's a quedado descartado por completo debido a la falta de justificación, pero surgió un segundo problema para mi siguiente material que serían las bolsitas de protección, no tengo una justificación clara.

Como tercera opción se consideró usar arcilla, esta vez teniendo una justificación por mi concepto de los Golems, igual estos son hechos de arcilla.

No tiene una forma modular, descartado.

Como última opción se consideraron los Maples de Huevo teniendo todas las justificaciones listas. Elección final del material que usaría para mi Pixel Art manual.

3. Composición de la Representación

3. 𝐁𝐎𝐂𝐄𝐓𝐎 𝐅𝐈𝐍𝐀𝐋

Boceto final con los elementos implementados y otros añadidos para representar el cuento

Como el material se encontraba listo, el boceto estaba terminado y comenzaba con el tamaño que sería el PixelArt.

Problemas de encontrar el significado de los módulos, solucionados.

[essie-hila]

𝕀𝕟𝕥𝕖𝕣𝕟𝕖𝕥, 𝕝𝕒 𝕣𝕖𝕕 𝕪 𝕝𝕒 𝕟𝕦𝕓𝕖

Clase 13/10

El telégrafo es un aparato o dispositivo que emplea señales eléctricas para la transmisión de mensajes de texto codificados, como con el código Morse, mediante líneas alámbricas o comunicaciones de radio.

Sería nombrado como el abuelo del internet por la comunicación.

El internet llega a Bolivia (encontrar información en el link)

➤ El internet es un viaje entre cables para transmitir un mensaje, impulsos eléctricos que pueden traducirse en el código marce.

➤Teoría Matemática de la presión

➤La información puede ser medida luego de los hechos de la segunda Guerra Mundial

➤BITS, Bates resultados de la teoría.

[essie-hila]

Comienzo del PixelArt (dithering)

Clase 29/09

↬ El pixel: Unidad básica de una imagen digitalizada en pantalla a base de puntos de color o en escala de grises.

En esta clase aprendimos el uso de algunas herramientas de Photoshop para tener una idea de como hacer nuestro siguiente trabajo, por el momento iniciaríamos con pixelear una frutilla y un jarrón de flores, explicaría de los formatos con los que se puede guardar un diseño, como limitar los colores.

Como ejemplos tendríamos a los videojuegos, la limitación del 16x16.

Clase 06/10

Dithering

El dither es ruido de poca amplitud que se añade al audio para minimizar los errores al cambiar de profundidad de bits.

“Dither” no es sólo un término de audio— y el ruido que añade es más comovariación aleatoria.

De hecho, la palabra dither significa “vacilación”. Esta definición viene de cómo se descubrió.

Lavibracióndel motor del avión ayudaba a aumentar la precisión de las partes móviles de las máquinas.

El ruido que el dithering le añade a tus tracks funciona de la misma forma. Ayuda a aumentar la precisión de tus archivos de audio digitales.

Clase de práctica de PixelArt, comienzos del uso del dithering.

Comenzamos con la aplicación y práctica del dithering en una pera para luego seguir con uno más complicado aprendiendo de algunas básias herramientas de Photoshop, per no todos contaban con esto por lo cual se propuso dos páginas para hacerlo.

Xilart y Piskel, Photoshop para los que contábamos con este medio.

Seguimos con la creación de una pequeña pera, aquí es entendido que la resolución de agudos problemas, hubo problemas de descarga por es de tamaño pequeño.

72x72 - PERA (Primer ejercicio)

Segundo Ejercicio (Autorretrato)

64x64