tema 4.3 ejemplo sobre teleco
TRANSCRIPT
![Page 1: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/1.jpg)
Análisis y Diseño de Software
Departamento de Ingeniería de Sistemas Telemáticoshttp://moodle.dit.upm.es
Ejemplo Desarrollo y DepuraciónEjemplo SobreTeleco
Carlos A. Iglesias <[email protected]>1.0 18/04/13
![Page 2: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/2.jpg)
Desarrollo con Android 2
Teoría
Ejercicio práctico en el ordenador
Ampliación de conocimientos
Lectura / Vídeo / Podcast
Práctica libre / Experimentación
Leyenda
![Page 3: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/3.jpg)
Ejemplo SobreTeleco 3
Temario● 4.1 Introducción a Android ● 4.2 Introducción Desarrollo con Android
● 4.3 Ejemplo Desarrollo y Depuración ● 4.4 Actividades● 4.5 Interfaces de Usuario
● 4.6 Intenciones● 4.7 Acceso a Datos● 4.8 Preferencias● 4.9 Hebras e internacionalización
![Page 4: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/4.jpg)
Ejemplo SobreTeleco 4
Bibliografía
● Libro de texto: – [Gar10] Learning Android, Marko Gargenta,
O'Reilly, 2010. Disponible en http://ofps.oreilly.com/titles/9781449390501/
– Capítulos 4-5
– http://www.youtube.com/watch?v=SW82-YOOMIs
● Android Developers– http://developer.android.com/guide/topics/fundamentals.html
– http://developer.android.com/guide/topics/ui/index.html
![Page 5: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/5.jpg)
Ejemplo SobreTeleco 5
Bibliografía complementaria● Tutorial Android UI– http://mobile.tutsplus.com/series/android-user-interface-design/
– http://developer.android.com/resources/tutorials/views/index.html
– http://www.droiddraw.org/widgetguide.html
● Ejemplos
– http://apcmag.com/building-a-simple-android-app.htm
– http://www.maestrosdelweb.com/editorial/curso-android-construir-lector-de-feeds/
![Page 6: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/6.jpg)
Ejemplo SobreTeleco 6
Objetivos
● Entender los conceptos básicos para desarrollar una interfaz de usuario en Android
● Entender la estructura de un proyecto Android
● Aprender a desarrollar un proyecto Android: programar, ejecutar, y depurar
● Aprender vista depuración: LogCat
![Page 7: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/7.jpg)
Ejemplo SobreTeleco 7
Interfaces en Android
● “Separation of concerns”– Funcionalidad
(Java)– Disposición (XML)
● Podemos definir diferentes layouts para diferentes dispositivos
![Page 8: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/8.jpg)
Ejemplo SobreTeleco 8
UI en Android
● En Android podemos definir de dos formas las interfaces: – Declarativa:
• En XML• Parecido a crear una página web en HTML
– Programática:• En Java• Parecido a interfaces en Java (Swing / AWT)
![Page 9: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/9.jpg)
Ejemplo SobreTeleco 9
UIs: Visión general: Views y Layout
● Vista (View): componente
● Disposición (Layout): contenedor
![Page 10: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/10.jpg)
Ejemplo SobreTeleco 10
El lenguaje XML (eXtensible Markup Language)
● Repasar FTEL– http://www.gsi.dit.upm.es/~gfer/ftel/Procesadores.pdf
● XML está diseñado para la representación de datos a efectos de almacenamiento y comunicación<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE asignaturas2010 SYSTEM "asignaturas.dtd"><asignaturas2010> <asignatura codigo="95000024" acronimo="ADSW"> <nombre>Análisis y Diseño del Software</nombre> <creditos>4.5</creditos> <semestre S="2" /> <tipo T="obligatoria" /> <guia> <url href="http//www.lab.dit.upm.es/adsw" /> </guia> </asignatura><!--otras asignaturas--></asignaturas2010>
![Page 11: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/11.jpg)
Ejemplo SobreTeleco 11
Ejercicio: SobreTeleco
● Vamos a seguir el ejemplo un poco modificado para la asignatura– http://apcmag.com/building-a-simple-android-app.htm
● Pasos:– Crear un proyecto Android en Eclipse:
SobreTeleco
![Page 12: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/12.jpg)
Ejemplo SobreTeleco 12
Explorar proyecto Android
CÓDIGO FUENTE
CÓDIGO GENERADO
BIBLIOTECAS
CÓDIGO COMPILADO DEVX, FICHERO APK
RECURSOS
CONFIGURACIÓN
ASSET
![Page 13: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/13.jpg)
Ejemplo SobreTeleco 13
Ejercicio
● Explora la estructura del proyecto HolaMundo que hicimos en el capítulo anterior. – ¿Qué hay en bin?– Pincha en main.xml, y selecciona la pestaña
graphicalLayout ¿qué ves?
![Page 14: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/14.jpg)
Ejemplo SobreTeleco 14
Explorando un proyecto...
● source: fuentes java del proyecto
● gen: ficheros generados del proyecto. Android genera R.java que 'mapea' los recursos UI XML a Java● library: framework Android
● assets: ficheros de cualquier formato, que podemos tratar como InputStream (veremos)● res: recursos, organizados en una estructura fija en imágenes, layout y texto. Se referenciarán con R: R.layout (veremos)
![Page 15: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/15.jpg)
Ejemplo SobreTeleco 15
Recursos
● Como hay gran variedad de resoluciones y tamaños de pantallas (teléfono, tableta, TV), podemos ofrecer gráficos alternativos con diferente resolución / tamaño.
● Ver
http://developer.android.com/guide/topics/resources/providing-resources.html
● Ej. Recurso por defecto
Recurso alta densidad (high dpi, dots per inch, aprox. 240 dpi)
![Page 16: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/16.jpg)
Ejemplo SobreTeleco 16
Recursos
http://coding.smashingmagazine.com/2011/06/30/designing-for-android/http://androideity.com/2011/08/04/disenando-para-android/
![Page 17: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/17.jpg)
Ejemplo SobreTeleco 17
Crear una actividad
Fija como contenido el fichero res/layout/main.xml. Se genera una referencia en R este fichero: R.layout.main
![Page 18: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/18.jpg)
Ejemplo SobreTeleco 18
Referencias a imágenes
R.drawable.ic_launcher
R.layout.main
R.values.strings
Se selecciona la imagen según la resolución del dispositivo
![Page 19: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/19.jpg)
Ejemplo SobreTeleco 19
Modificando el layout (main.xml)
Doble click
![Page 20: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/20.jpg)
Ejemplo SobreTeleco 20
Cambiamos la interfaz
![Page 21: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/21.jpg)
Ejemplo SobreTeleco 21
Refactorización
● Técnica de software que consiste en modificar el código para que tenga “más calidad”
● Ej. extraer una interfaz de una clase pasar unas líneas de código a método privado, renombrar una clase o método, …
● Eclipse y muchos IDEs dan soporte a la refactorización: Menú->Refactor
![Page 22: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/22.jpg)
Ejemplo SobreTeleco 22
Refactorización
● Pasamos el string a res/values/strings.xml
![Page 23: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/23.jpg)
Ejemplo SobreTeleco 23
Añadir botón
![Page 24: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/24.jpg)
Ejemplo SobreTeleco 24
Botón
Llevamos este strings.xml
![Page 25: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/25.jpg)
Ejemplo SobreTeleco 25
Cambiamos el botón
![Page 26: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/26.jpg)
Ejemplo SobreTeleco 26
Y desplegamos
El botón no hace nada en el terminal
![Page 27: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/27.jpg)
Ejemplo SobreTeleco 27
Añadir funcionalidad botón (I)
main.xml
![Page 28: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/28.jpg)
Ejemplo SobreTeleco 28
Añadir funcionalidad botón (II)
Toast es un tipo de notificación en pantalla
![Page 29: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/29.jpg)
Ejemplo SobreTeleco 29
Añadir funcionalidad botón (III)
![Page 30: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/30.jpg)
Ejemplo SobreTeleco 30
Refactorizar String
![Page 31: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/31.jpg)
Ejemplo SobreTeleco 31
¡Probar!
![Page 32: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/32.jpg)
Ejemplo SobreTeleco 32
Copiamos imágenes
● Vamos a copiar las imágenes que vamos a usar (están en moodle en un zip)
● Las copiamos en res/drawable-hdpi
![Page 33: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/33.jpg)
Ejemplo SobreTeleco 33
Añadiendo una imagen
![Page 34: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/34.jpg)
Ejemplo SobreTeleco 34
Añadiendo una imagen
![Page 35: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/35.jpg)
Ejemplo SobreTeleco 35
Modificando tamaño
![Page 36: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/36.jpg)
Ejemplo SobreTeleco 36
● contentDescription: mensaje sobre qué representa la imagen, por accesibilidad● match_parent: tan grande como el padre● wrap_content: tan grande como para que quepa el texto● weight: escalado
● 0dp: el que fije weight
ImageView
![Page 37: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/37.jpg)
Ejemplo SobreTeleco 37
Cambiando la imagen (I)
![Page 38: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/38.jpg)
Ejemplo SobreTeleco 38
Cambiando la imagen (II)
![Page 39: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/39.jpg)
Ejemplo SobreTeleco 39
¡Lo probamos!
![Page 40: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/40.jpg)
Ejemplo SobreTeleco 40
Recapitulando (I)
● Hemos hecho una aplicación con 1 Actividad● Las actividades las creamos en Java extendiendo Activity– Cuando se lance la actividad se
invocará el método onCreate, que tiene que la vista (setContentView(R.layout.main)
![Page 41: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/41.jpg)
Ejemplo SobreTeleco 41
R y setContentView
● R es una clase Java que se genera automáticamente a partir de un 'layout' XML
● setContentView(R.layout.main) – usado en onCreate() - el proceso se llama 'insuflar' (inflate)– Lee el XML, crea objetos java por cada vista
(componente: botón, texto, imagen, …)– Fija atributos de cada objeto por cada propiedad
XML
![Page 42: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/42.jpg)
Ejemplo SobreTeleco 42
Recapitulando (II)
● En el layout XML hemos definido – un layout (LinearLayout)
que contiene– Vistas (TextView,
ImageView, Button)
● Los textos los ponemos en res/values/strings.xml
![Page 43: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/43.jpg)
Ejemplo SobreTeleco 43
Hierarchy Viewer
● Lanza la aplicación (Run-as) en el emulador (no vale en dispositivo real!)
● Abre la jerarquía– Window->Open Perspective-> Hierarchy
viewer
![Page 44: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/44.jpg)
Ejemplo SobreTeleco 44
Hierarchy Viewer
● Pincha en Windows en la aplicación que quieres depurar, y ya lo ves :)
![Page 45: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/45.jpg)
Ejemplo SobreTeleco 45
Perspectiva Hierarchy Viewer
Recuerda que sólo funciona con el emulador lanzado
![Page 46: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/46.jpg)
Ejemplo SobreTeleco 46
Ej. FrameLayout
![Page 47: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/47.jpg)
Ejemplo SobreTeleco 47
Ej. TextView
![Page 48: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/48.jpg)
Ejemplo SobreTeleco 48
Ej. TextView
![Page 49: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/49.jpg)
Ejemplo SobreTeleco 49
Los tres puntos (curiosidad)
● Los tres puntos indican las prestaciones, miden de izda a derecha los tiempos del proceso de visualización (render)– Measure time: calcular alto/ancho– Layout time: dice a las vistas las posiciones dentro de las medidas– Draw time: pinta los componentes
● Verde: más rápido que el 50% de las otras vistas● Amarillo: más lento que el 50% de las otras vistas
● Rojo: el más lento del árbol
![Page 50: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/50.jpg)
Interfaces de Usuario 50
Trazas - Depuración
● Según va ejecutando el programa– estoy aquí ...– esta variable vale tanto ...
●De formas que podemos ir “siguiendo la ejecución”– con diferentes niveles de detalle
![Page 51: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/51.jpg)
Interfaces de Usuario 51
Trazas – System.out.println● Se pueden meter sentencias explícitas– System.out.println(“estoy aquí ...”);– System.out.println(“variable= “ + valor);
● Problemas– hay que editar el programa – cada vez que queremos cambiar una traza– cuando se entrega el programa– hay que editarlo y quitar las trazas– si el programa está compilado y algo falla,– hay que editarlo para ver qué pasa
![Page 52: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/52.jpg)
Interfaces de Usuario 52
Puesta a punto
¿dónde falla qué?
•Trazas / Depurador paso a paso
fallo serio
detalle
falla
pasa
falla
pasa
pruebas
desarrollo
pruebas
pruebas deaceptación
![Page 53: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/53.jpg)
Interfaces de Usuario 53
Logging en Android
● Al poner un mensaje de traza, indicamos “su relevancia”: – Argumentos TAG, msg. Se recomienda que
TAG sea una constante privada de la clase– Log.wtf (no debería suceder, What a Terrible
Failure, Log.e(), Log.w(), Log,i(), Log.d(), Log.v()
VERBOSE
DEBUG
INFO
WARN
ERROR
![Page 54: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/54.jpg)
Interfaces de Usuario 54
![Page 55: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/55.jpg)
Interfaces de Usuario 55
Ver trazas y depurar
● Perspectiva DDMS(Dalvik Debug Monitor Server)– View LogCat
![Page 56: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/56.jpg)
Interfaces de Usuario 56
Filtrar trazas
● Podemos filtrar para ver menos trazas (por log, etc.)
![Page 57: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/57.jpg)
Interfaces de Usuario 57
Loggers
● Poner loggers (en vez de System.err.println o System.out.println)– Permite analizar qué ha pasado– Hay otros programas (de gestión del servicio)
que pueden analizar estos logs para generar alarmas si hay errores, y que se arregle
![Page 58: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/58.jpg)
Interfaces de Usuario 58
Loggers en Java● En Java tenemos el paquete estándar java.util.logging
● La clase que nos 'da un logger' es java.util.logging.Logger
● Para que una clase 'tenga logger', se declara un campo static– private static final Logger log =
Logger.getLogger(“nombre.de.la.clase”);
● Niveles: FINEST, FINER, FINE, CONFIG, INFO, WARNING, SEVERE
● En la clase, generamos las trazas:– log.info(msg), log.warning(msg), log.severe(msg), log.finer(msg), …
● El nivel de trazas se define en un fichero, java.logger, con sintaxis propia
![Page 59: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/59.jpg)
Ejemplo SobreTeleco 59
Resumen
● Hemos visto cómo realizar una aplicación sencilla en Android, SobreTeleco
● Para desarrollar una aplicación debemos crear la actividad, el layout, enlazarlos, y definir la conducta de los componentes
● Si algo no funciona, debemos depurar. Lo primero es 'mirar los logs'.
![Page 60: Tema 4.3 Ejemplo sobre teleco](https://reader033.vdocumento.com/reader033/viewer/2022052412/55889868d8b42a367d8b46a3/html5/thumbnails/60.jpg)
Ejemplo SobreTeleco 60
¿Preguntas?