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,11 +1,12 @@
1
-# Arreglos - Editor de Imagenes Simple
1
+# Arreglos - Editor de Imágenes Simple
2 2
 
3 3
 ![main1.png](images/main1.png)
4 4
 ![main2.png](images/main2.png)
5 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 11
 ## Objetivos:
11 12
 
@@ -13,9 +14,9 @@ Los arreglos de datos (*arrays*) nos facilitan guardar y trabajar con grupos de
13 14
 
14 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 22
 ## Pre-Lab:
@@ -26,11 +27,11 @@ Antes de llegar al laboratorio debes:
26 27
 
27 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 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,32 +40,32 @@ Antes de llegar al laboratorio debes:
39 40
 
40 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 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 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 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 63
 El código que te proveemos contiene los siguiente objetos de la clase `QImage`:
63 64
 
64 65
 * `originalImage`   // contiene la información de la imagen original que vas a editar
65 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 71
 * `width()`      // devuelve el valor entero del ancho de la imagen
@@ -97,12 +98,12 @@ Las siguientes funciones son útiles para trabajar con datos de tipo `QRgb`:
97 98
 
98 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 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,7 +149,7 @@ En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos
148 149
 
149 150
 ### Ejercicio 1 - Entender el código provisto
150 151
 
151
-#### Instrucciones:
152
+#### Instrucciones
152 153
 
153 154
 
154 155
 1. Carga a `QtCreator` el proyecto `SimpleImageEditor`. Hay dos maneras de hacer esto:
@@ -168,9 +169,9 @@ En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos
168 169
 
169 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 176
     * `btnLoadImage`
176 177
     * `btnSaveImage`
@@ -190,7 +191,7 @@ En la experiencia de laboratorio de hoy diseñarás e implementarás algoritmos
190 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 192
 `editedImage.setPixel( i, j, qRgb(gray, gray, gray) )`.
192 193
 
193
-#### Instrucciones:
194
+#### Instrucciones
194 195
 
195 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,7 +211,7 @@ El "image grayscale" es una operación que se usa para convertir una imagen a co
210 211
 
211 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 216
 1. Utilizando pseudocódigo, expresa el algoritmo para "thresholding". Presume que utilizarás el valor del deslizador como umbral.
216 217
 
@@ -236,21 +237,21 @@ El "image grayscale" es una operación que se usa para convertir una imagen a co
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 255
 6. Recuerda que el propósito de un pseudocódigo es que un humano lo pueda entender.
255 256
 
256 257
 **Ejemplo:**
@@ -269,7 +270,7 @@ Output: true if n is prime, false otherwise
269 270
 
270 271
 ---
271 272
 
272
-##Referencias
273
+## Referencias
273 274
 
274 275
 [1] http://www.willamette.edu/~gorr/classes/GeneralGraphics/imageFormats/24bits.gif
275 276