Browse Source

README-es.md edited on August 3, 2016 at 9:25am

Jose R Ortiz Ubarri 8 years ago
parent
commit
1829c875c9
1 changed files with 29 additions and 28 deletions
  1. 29
    28
      README-es.md

+ 29
- 28
README-es.md View File

1
-# Arreglos - Editor de Imagenes Simple
1
+# Arreglos - Editor de Imágenes Simple
2
 
2
 
3
 ![main1.png](images/main1.png)
3
 ![main1.png](images/main1.png)
4
 ![main2.png](images/main2.png)
4
 ![main2.png](images/main2.png)
5
 ![main3.png](images/main3.png)
5
 ![main3.png](images/main3.png)
6
 
6
 
7
+[verano2016 - Coralys]
7
 
8
 
8
-Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo e índices o suscritos que indican la posición en que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales. 
9
+Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de datos del mismo tipo. Los datos se guardan en espacios de memoria consecutivos a los que se puede acceder utilizando el nombre del arreglo con índices o suscritos que indican la posición en la que se encuentra el dato. Las estructuras de repetición nos proveen una manera simple de acceder a los datos de un arreglo. En la experiencia de laboratorio de hoy, diseñarás e implementarás algoritmos simples de procesamiento de imágenes para practicar el uso de ciclos anidados en la manipulación de arreglos bi-dimensionales. 
9
 
10
 
10
 ## Objetivos:
11
 ## Objetivos:
11
 
12
 
13
 
14
 
14
 2. Aplicar ciclos anidados para implementar algoritmos simples de procesamiento de imágenes.
15
 2. Aplicar ciclos anidados para implementar algoritmos simples de procesamiento de imágenes.
15
 
16
 
16
-3. Utilizar expresiones aritméticas para transformar colores de pixeles.
17
+3. Utilizar expresiones aritméticas para transformar colores de píxeles.
17
 
18
 
18
-4. Acceder pixeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
19
+4. Acceder píxeles en una imagen y descomponerlos en sus componentes rojo, azul y verde.
19
 
20
 
20
 
21
 
21
 ## Pre-Lab:
22
 ## Pre-Lab:
26
 
27
 
27
 2. Haber repasado los conceptos básicos relacionados a estructuras de repetición y ciclos anidados.
28
 2. Haber repasado los conceptos básicos relacionados a estructuras de repetición y ciclos anidados.
28
 
29
 
29
-3. Conocer las funciones básicas de `QImage` para manipular los pixeles de las imágenes. 
30
+3. Conocer las funciones básicas de `QImage` para manipular los píxeles de las imágenes. 
30
 
31
 
31
 4. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
32
 4. Haber estudiado los conceptos e instrucciones para la sesión de laboratorio.
32
 
33
 
33
-5. Haber tomado el quiz Pre-Lab que se encuentra en Moodle.
34
+5. Haber tomado el quiz Pre-Lab disponible en Moodle.
34
 
35
 
35
 ---
36
 ---
36
 
37
 
39
 
40
 
40
 ## Edición de imágenes
41
 ## Edición de imágenes
41
 
42
 
42
-En esta experiencia de laboratorio, trabajarás con varios conceptos y destrezas básicas de edición de imágenes. Te proveemos un interfaz gráfico (GUI) simple que le permite al usuario cargar una imagen e invertirla vertical y horizontalmente.  Tu tarea es crear e implementar una función para convertir una imagen a color a una imagen con tonos de gris, y otra función que convierta una imagen a color a una imagen en blanco y negro.
43
+En esta experiencia de laboratorio trabajarás con varios conceptos y destrezas básicas de edición de imágenes. Te proveemos un interfaz gráfico (GUI) simple que le permite al usuario cargar una imagen e invertirla vertical y horizontalmente.  Tu tarea es crear e implementar una función para convertir una imagen a color a una imagen con tonos de gris, y otra función que convierta una imagen a color a una imagen en blanco y negro.
43
 
44
 
44
 ### Píxeles
45
 ### Píxeles
45
 
46
 
46
-Al elemento más pequeño de una imagen se le llama un *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul,   se codifica como un entero sin signo cuyos bytes  representan los tonos de rojo, verde y azul del pixel  (Figura 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
47
+Al elemento más pequeño de una imagen se le llama *píxel*. Esta unidad consiste de un solo color. Como cada color es una combinación de tonalidades de los colores primarios rojo, verde y azul, se codifica como un entero sin signo cuyos bytes representan los tonos de rojo, verde y azul del píxel (Figura 1). A esta combinación se le llama el *RGB* del color por las siglas de "Red-Green-Blue". Por ejemplo, un píxel de color rojo (puro) tiene una representación RGB `0x00ff0000`, mientras que un píxel de color blanco tiene una representación RGB de `0x00FFFFFF` (ya que el color blanco es la combinación de los tonos rojo, verde y azul en toda su intensidad).
47
 
48
 
48
 ---
49
 ---
49
 
50
 
50
 ![figure1.png](images/figure1.png)
51
 ![figure1.png](images/figure1.png)
51
 
52
 
52
-**Figura 1.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB.  Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1). 
53
+**Figura 1.** Distribución de bits para las tonalidades de rojo, verde y azul dentro de la representación RGB. Cada tonalidad puede tener valores entre 0x00 (los ocho bits en 0) y 0xFF (los 8 bits en 1). 
53
 
54
 
54
 ---
55
 ---
55
 
56
 
56
-En `Qt` se utiliza el tipo `QRgb` para representar valores `RGB`.  Utilizando ciertas funciones que describimos abajo podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes.
57
+En `Qt` se utiliza el tipo de dato `QRgb` para representar valores `RGB`.  Utilizando ciertas funciones que describimos abajo, podemos obtener los componentes rojo, verde y azul del valor `QRgb` del píxel y así manipular imágenes.
57
 
58
 
58
 ### Biblioteca
59
 ### Biblioteca
59
 
60
 
60
-La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los pixeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
61
+La experiencia de laboratorio de hoy utilizará la clase `QImage`. Esta clase permite acceder a los datos de los píxeles de una imagen para poder manipularla. La documentación de la clase `QImage` se encuentra en http://doc.qt.io/qt-4.8/qimage.html.
61
 
62
 
62
 El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
63
 El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
63
 
64
 
64
 * `originalImage`   // contiene la información de la imagen original que vas a editar
65
 * `originalImage`   // contiene la información de la imagen original que vas a editar
65
 *  `editedImage`  // contendrá la imagen editada
66
 *  `editedImage`  // contendrá la imagen editada
66
 
67
 
67
-Los objetos de clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
68
+Los objetos de la clase `QImage` tienen los siguiente métodos que serán útiles para la experiencia de laboratorio de hoy:
68
 
69
 
69
 
70
 
70
 * `width()`      // devuelve el valor entero del ancho de la imagen
71
 * `width()`      // devuelve el valor entero del ancho de la imagen
97
 
98
 
98
     `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
99
     `editedImage.setPixel(2,3,qRgb(0xff,0x00,0x00));`.
99
 
100
 
100
-4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de  `originalImage`:
101
+4. La siguiente instrucción le asigna a `greenContent` el valor del tono de verde que contiene el pixel `(1,1)` de `originalImage`:
101
 
102
 
102
     `int greenContent = qGreen(originalImage.pixel(1,1));`.
103
     `int greenContent = qGreen(originalImage.pixel(1,1));`.
103
 
104
 
104
 
105
 
105
-5. El siguiente programa crea un objeto de clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
106
+5. El siguiente programa crea un objeto de la clase `QImage` e imprime los componentes rojo, verde y azul del pixel en el centro de la imagen. La imagen utilizada es la que se especifica dentro del paréntesis durante la creación del objeto, esto es, el archivo `chuck.png`.
106
 
107
 
107
 ---
108
 ---
108
 
109
 
148
 
149
 
149
 ### Ejercicio 1 - Entender el código provisto
150
 ### Ejercicio 1 - Entender el código provisto
150
 
151
 
151
-#### Instrucciones:
152
+#### Instrucciones
152
 
153
 
153
 
154
 
154
 1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
155
 1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
168
 
169
 
169
 3. Estarás trabajando con el archivo `filter.cpp`. Estudia la función `HorizontalFlip` del archivo `filter.cpp` para que entiendas su operación.
170
 3. Estarás trabajando con el archivo `filter.cpp`. Estudia la función `HorizontalFlip` del archivo `filter.cpp` para que entiendas su operación.
170
 
171
 
171
-    En los ejercicios siguientes estarás usando mayormente los objetos `originalImage` y `editedImage` de clase `QImage`. ¿Cuál crees que es el propósito la variable `pixel`?
172
+    En los ejercicios siguientes estarás usando mayormente los objetos `originalImage` y `editedImage` de la clase `QImage`. ¿Cuál crees que es el propósito la variable `pixel`?
172
 
173
 
173
-4. El código que te proveemos ya tiene programado el funcionamiento de los botones de la interfaz gráfica. NO tienes que cambiar nada en este código pero te incluimos las siguientes explicaciones para que conozcas un poco del funcionamiento de los botones. En el archivo `mainwindow.cpp`, las etiquetas `lblOriginalImage` y `lblEditedImage` corresponden a las partes de la interfaz que identifican la imagen original y la imagen procesada. Los botones
174
+4. El código que te proveemos ya tiene programado el funcionamiento de los botones de la interfaz gráfica. NO tienes que cambiar nada en este código, pero te incluimos las siguientes explicaciones para que conozcas un poco del funcionamiento de los botones. En el archivo `mainwindow.cpp`, las etiquetas `lblOriginalImage` y `lblEditedImage` corresponden a las partes de la interfaz que identifican la imagen original y la imagen procesada. Los botones
174
 
175
 
175
     * `btnLoadImage`
176
     * `btnLoadImage`
176
     * `btnSaveImage`
177
     * `btnSaveImage`
190
 El "image grayscale" es una operación que se usa para convertir una imagen a color a una imagen que solo tenga tonalidades de gris. Para hacer esta conversión se usa la siguiente fórmula en cada uno de los píxeles: `gray = (red * 11 + green * 16 + blue * 5)/32 ;` donde `red`, `green` y `blue` son los valores para los tonos de los colores rojo, verde y azul en el píxel de la imagen original a color, y `gray` será el color asignado a los colores rojo, verde y azul en el píxel de la imagen editada. Esto es,
191
 El "image grayscale" es una operación que se usa para convertir una imagen a color a una imagen que solo tenga tonalidades de gris. Para hacer esta conversión se usa la siguiente fórmula en cada uno de los píxeles: `gray = (red * 11 + green * 16 + blue * 5)/32 ;` donde `red`, `green` y `blue` son los valores para los tonos de los colores rojo, verde y azul en el píxel de la imagen original a color, y `gray` será el color asignado a los colores rojo, verde y azul en el píxel de la imagen editada. Esto es,
191
 `editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
192
 `editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
192
 
193
 
193
-#### Instrucciones:
194
+#### Instrucciones
194
 
195
 
195
 1. Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen solo con tonalidades de gris. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos. 
196
 1. Utilizando pseudocódigo, expresa el algoritmo para convertir una imagen a color a una imagen solo con tonalidades de gris. El apéndice de este documento contiene algunos consejos sobre buenas prácticas al hacer pseudocódigos. 
196
 
197
 
210
 
211
 
211
 "Thresholding" es una operación que se puede utilizar para convertir una imagen a color a una imagen en blanco y negro. Para hacer esta conversión debemos decidir cuáles colores de la imagen original van a convertirse en píxeles blancos y cuáles serán negros. Una manera sencilla de decidir esto es computando el promedio de los componentes rojo, verde y azul de cada píxel. Si el promedio es menor que el valor umbral ("threshold"), entonces cambiamos el píxel a negro; de lo contrario se cambia a blanco.
212
 "Thresholding" es una operación que se puede utilizar para convertir una imagen a color a una imagen en blanco y negro. Para hacer esta conversión debemos decidir cuáles colores de la imagen original van a convertirse en píxeles blancos y cuáles serán negros. Una manera sencilla de decidir esto es computando el promedio de los componentes rojo, verde y azul de cada píxel. Si el promedio es menor que el valor umbral ("threshold"), entonces cambiamos el píxel a negro; de lo contrario se cambia a blanco.
212
 
213
 
213
-#### Instrucciones:
214
+#### Instrucciones
214
 
215
 
215
 1. Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.
216
 1. Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.
216
 
217
 
236
 
237
 
237
 ---
238
 ---
238
 
239
 
239
-##Entrega
240
+## Entrega
240
 
241
 
241
-Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene las funciones  `GreyScale` y `Threshold`. Recuerda utilizar buenas prácticas de programación, incluir el nombre de los programadores y documentar tu programa.
242
+Utiliza "Entrega" en Moodle para entregar el archivo `filter.cpp` que contiene las funciones  `GreyScale` y `Threshold`. Recuerda utilizar buenas prácticas de programación, incluye el nombre de los programadores y documenta tu programa.
242
 
243
 
243
 ---
244
 ---
244
 
245
 
245
 ---
246
 ---
246
 
247
 
247
-##Apéndice: Buenas prácticas al escribir pseudocódigos
248
+## Apéndice: Buenas prácticas al escribir pseudocódigos
248
 
249
 
249
-1. Provee una descripción de los datos de entrada y salida
250
-2. Enumera los pasos
251
-3. Usa estructuras de repetición y decisión comunes: `if, else, for, while`
252
-4. Indenta los bloques de pasos que están dentro de una estructura de repetición o decisión, "Python-style"
253
-5. No necesitas declarar los tipos de las variables pero si debes inicializarlas. Esto es especialmente importante para contadores y acumuladores
250
+1. Provee una descripción de los datos de entrada y salida.
251
+2. Enumera los pasos.
252
+3. Usa estructuras de repetición y decisión comunes: `if, else, for, while`.
253
+4. Indenta los bloques de pasos que están dentro de una estructura de repetición o decisión, "Python-style".
254
+5. No necesitas declarar los tipos de las variables, pero si debes inicializarlas. Esto es especialmente importante para contadores y acumuladores.
254
 6. Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.
255
 6. Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.
255
 
256
 
256
 **Ejemplo:**
257
 **Ejemplo:**
269
 
270
 
270
 ---
271
 ---
271
 
272
 
272
-##Referencias
273
+## Referencias
273
 
274
 
274
 [1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
275
 [1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
275
 
276