Android Studio y Pruebas Centradas en el Usuario

Thursday, November 19, 2020

SVG, HTML5 :GRAFICOS

PRACTICA 014: GRAFICOS:SVG

Ing. Honoria Reyes Macedo

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de páginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

INTRODUCCION:

SVG: Scalable Vector Graphics, es un formato gráfico basado en XML para crear archivos vectoriales en 2D, su uso es por medio de etiquetas.

En esta practica se utiliza con html. con hojas de estilo en cascada(archivos .css)

ACTIVIDADES

1.- Agregar una nueva sección article en el archivo libros_HRM.html creado en la práctica anterior (líneas sombreadas)

2.- Agregar en el article creado, puntos en donde el valor de Y no cambia (lineas sombreadas)

3.- Agregar dos arcos a partir de los puntos creados (Líneas sombreadas)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

4.- Al probar con doble click sobre libros_HRM.html quedará asi:

5.- Agregar nuevos puntos en donde X no cambia (líneas sombreadas)

6.- Agregar un arco a partir de los puntos creados (línea sombreada)

Nota1: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

Nota2: Si se cierra el comando A con una Z, se trazará una línea hasta el punto inicial

Ejemplo: d="M 60,140 A 15,20 0 1,0 60,200 z"

7.- Agregar nuevos puntos en donde X e Y si cambian (líneas sombreadas)

8.- Al probar con doble click sobre libros_HRM.html quedaría asi:

9.- Agregar un estilo y un scrollbar a la sección que contiene los articulos en el archivo mi_estiloLibros.css (líneas sombreadas)

10.- Al probar con doble click sobre libros_HRM.html quedaría asi:

11.- Agregar arcos partir de los puntos creados (línea sombreada)

Nota: Observa que el punto inicial del arco inicia en la posición del comando M.

El punto final de cada arco se incluye al final del comando del arco A

********************************************************************************

ANEXO I: Valores del arco(A) en una trayectoria(path)

Tomando en cuenta los dos puntos rojos:Divide el arco en arco grande y arco chico

********************************************************************

ANEXO II : EJERCICIO DE OBSERVACION: TRANSFORMANDO(translate,rotate, scale, skewX)

Nota: Los ejercicios se agregaran en un nuevo article </article>

dentro de la seccion class="posicion_2_1"

1.- Agregar un triangulo y su translación

<h3>OBSERVACION DE translate,rotate, scale, skewX </h3>

</svg>

</article>

2.- Agregar en el article un triangulo y 3 rotaciones del mismo

</svg>

3.- Agregar en el article un triangulo y su translación y rotacion

</svg>

4.- Agregar en el article un triangulo y su modificación en escala horizontal(%) y escala vertical(%)

</svg>

5.- Agregar en el article un triangulo y su sesgado horizontal

</g>

</svg>

Quedaría así:

Nota:

El método matrix es una combinación de traslación, escalado y sesgado. Tiene seis parámetros dentro del paréntesis.

transform="matrix(a,b,c,d,e,f)"

----------------------------------------------------0------0--------------------------------

------------------------------------------------000-----000------------------------------

Tuesday, November 17, 2020

GRAFICOS, HTML5

PRACTICA 013: GRAFICOS:HTML

Ing. Honoria Reyes Macedo

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

ACTIVIDADES

* El tema a escoger será por cada alumno

1.- Paso 1. Crear un archivo libros_HRM.html en una carpeta de trabajo

(En la carpeta de trabajo crear 3 carpetas tambien: css,img, js)

1.1 Utilizar las siguientes etiquetas para definir las secciones o cajas:

section, aside, article, figcaption, figure, footer, header, hgroup, nav.

En html quedaria asi:

2.- Crear un archivo mi_estiloLibros.css (cascading style sheets) en una carpeta llamada “css” dentro de la carpeta de trabajo, para separar los estilos de la estructura html.

2.1 En el archivo mi_estiloLibros.css: Agregar el borde que nos permitirá ver la posición de cada etiqueta (Al final se la pueden quitar)

2.2 Agregar las siguientes línea al archivo libros_HRM.html (Para indicar el uso de los estilos)

dentro de la etiqueta <head>

<link rel="stylesheet" href="css/mi_estiloLibros.css" />

2.3 Al probar libros_HRM.html (Con doble click) àen el navegador se mostrara asi:

Cada alumno tendra su propia estructura

2.4 Poner el nombre de clase a cada sección en libros_HRM.html

2.5 Agregar contenido en algunas secciones (Líneas sombreadas)

3.- Agregar estilos

3.1 Alinear segmentos de la misma fila en mi_estiloLibros.css

3.2 Alinear el menu en el archivo mi_estiloLibros.css

4.- Agregar imagenes SVG dentro de article en el archivo libros_HRM.html

Al final quedaría asi:

******************************************************************

ANEXO I : EJERCICIO DE OBSERVACION CON 2 IMAGENES

Nota: Los ejercicios se agregaran en un nuevo article </article>

dentro de la seccion class="posicion_2_1"

1.- Agregar dos triángulos (Cada triangulo inicia con su propio espacio svg)

<h3>002 PRACTICA OBSERVACION</h3>

</article>

2.- Agregar en el article dos triángulos(Con un mismo espacio svg).

</svg>

3.- Agregar en el article dos triángulos (Con un mismo path)

</svg>

4.- Agregar en el article dos triángulos (Con un mismo polygon)

5.- Agregar en el article dos triángulos (Con un mismo polygon con una regla de llenado)

Al final quedaría asi:

6.- Agregar en el article un circulo con borde grueso y dividido en cortes de 8,3,2 8,3,2 8,3,2:

---------------------------------0---0----------------------------------------------------

-----------------------------000--00----------------------------------------------------

Thursday, November 5, 2020

SELECCIONAR ITEM, ANDROID STUDIO

PRACTICA 012: Android: Selecciona producto

Ing. Honoria Reyes Macedo

IDE: Android Studio

Lenguaje de programación para móviles: Java

Sistema Operativo de desarrollo: Windows

Sistema Operativo de Ejecución: Android

INTRODUCCION

En esta práctica se utilizará un evento de click largo:

setOnItemLongClickListener . Se utilizará para seleccionar

en la lista de productos en existencia.

ACTIVIDADES

1.- AGREGAR UNA CLASE ViewHolder.java

1.1 Crear la clase ViewHolder.java y agregar los siguientes atributos:

ImageView loc_imgViewProd;
TextView loc_textVProd, loc_textVPrecio, loc_textVAutor;
int id;

1.2 Crear sus getter y setter con las teclas Alt + Ins (Seleccionar todos los atributos)

Nota: También agregar su constructor vacío

2.- QUITAR LAS LINEAS EN AZUL DEL ARCHIVO ProductoAdapter.java

Agregar la linea siguiente:

3.- AGREGAR EL EVENTO setOnItemLongClickListener

        3.1 En el gridview agregar el evento setOnItemLongClickListener (líneas en azul)

3.2 En la función creada onItemLongClick agregar las 3 lineas azules

Quedaría así al seleccionar en forma prolongada el producto:

-------------------------------------0---0-----------------------------------------------------------

-----------------------------------000---000-------------------------------------------------------

Tuesday, November 3, 2020

SPLASH, ANDROID STUDIO

PRACTICA 011: Android Studio: Splash

Ing. Honoria Reyes Macedo

IDE: Android Studio

Lenguaje de programación para móviles: Java

Sistema Operativo de desarrollo: Windows

Sistema Operativo de Ejecución: Android

INTRODUCCION

En esta práctica se hace una pantalla de inicio. Que permite visualizar el logo de la empresa mientras se carga la aplicación. En esta práctica se crea una activity y se utiliza un archivo "logobienvenida.png" con el logo y nombre del proyecto. El archivo debe existir en la carpeta mipmap.