Skip to content

Commit e3d743a

Browse files
committed
Correcciones en los items de listas - leandono#9
1 parent d278588 commit e3d743a

12 files changed

+1156
-1147
lines changed

Makefile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
DATE = 'Abril 2013'
1+
DATE = 'Junio 2013'
22
EPUB_TITLE = 'Fundamentos de jQuery'
33
HTML_TITLE = 'Libro gratuito de jQuery en español - Fundamentos de jQuery'
44

libro/epub/Fundamentos_de_jQuery.epub

5.55 KB
Binary file not shown.

libro/html/index.html

Lines changed: 1103 additions & 1103 deletions
Large diffs are not rendered by default.

libro/markdown/cap01-bienvenido.markdown

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@ La utilización de una herramienta de depuración es esencial para trabajar con
5858

5959
Cada depurador ofrece:
6060

61-
- Un editor multi-linea para experimentar con JavaScript;
61+
- un editor multi-linea para experimentar con JavaScript;
6262

63-
- Un inspector para revisar el código generado en la página;
63+
- un inspector para revisar el código generado en la página;
6464

65-
- Un visualizador de red o recursos, para examinar las peticiones que se realizan.
65+
- un visualizador de red o recursos, para examinar las peticiones que se realizan.
6666

6767
Cuando usted este escribiendo código JavaScript, podrá utilizar alguno de los siguientes métodos para enviar mensajes a la consola del depurador:
6868

@@ -72,7 +72,7 @@ Cuando usted este escribiendo código JavaScript, podrá utilizar alguno de los
7272

7373
- `console.warn()` para registrar mensajes de alerta;
7474

75-
- `console.error()` para registrar mensajes de error;
75+
- `console.error()` para registrar mensajes de error.
7676

7777
Existen otros métodos para utilizar desde la consola, pero estos pueden variar según el navegador. La consola además provee la posibilidad de establecer puntos de interrupción y observar expresiones en el código con el fin de facilitar su depuración.
7878

@@ -86,11 +86,11 @@ Aún así, para completar ciertos ejercicios, necesitará consultar la documenta
8686

8787
Estas son algunas sugerencias para hacer frente a los problemas:
8888

89-
- En primer lugar, asegúrese de entender bien el problema que está tratando de resolver.
89+
- en primer lugar, asegúrese de entender bien el problema que está tratando de resolver;
9090

91-
- Luego, averigüe a qué elementos tendrá que acceder con el fin de resolver el problema, y determine cómo accederlos. Puede utilizar Firebug para verificar que esta obteniendo el resultado esperado.
91+
- luego, averigüe a qué elementos tendrá que acceder con el fin de resolver el problema, y determine cómo accederlos. Puede utilizar Firebug para verificar que esta obteniendo el resultado esperado;
9292

93-
- Finalmente, averigüe qué necesita hacer con esos elementos para resolver el problema. Puede ser útil, antes de comenzar, escribir comentarios explicando lo que va a realizar.
93+
- finalmente, averigüe qué necesita hacer con esos elementos para resolver el problema. Puede ser útil, antes de comenzar, escribir comentarios explicando lo que va a realizar.
9494

9595
No tenga miedo de cometer errores. Tampoco trate en el primer intento escribir de forma perfecta su código. Cometer errores y experimentar con soluciones es parte del proceso de aprendizaje y le ayudará a que sea un mejor desarrollador.
9696

libro/markdown/cap03-conceptos-basicos-jquery.markdown

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -569,9 +569,9 @@ $('#myDiv p:first')
569569

570570
Existen varias maneras para mover elementos a través del DOM; las cuales se pueden separar en dos enfoques:
571571

572-
- Querer colocar el/los elementos seleccionados de forma relativa a otro elemento
572+
- querer colocar el/los elementos seleccionados de forma relativa a otro elemento;
573573

574-
- Querer colocar un elemento relativo a el/los elementos seleccionados.
574+
- querer colocar un elemento relativo a el/los elementos seleccionados.
575575

576576
Por ejemplo, jQuery provee los métodos `$.fn.insertAfter` y `$.fn.after`. El método `$.fn.insertAfter` coloca a el/los elementos seleccionados después del elemento que se haya pasado como argumento; mientras que el método `$.fn.after` coloca al elemento pasado como argumento después del elemento seleccionado. Otros métodos también siguen este patrón: `$.fn.insertBefore` y `$.fn.before`; `$.fn.appendTo` y `$.fn.append`; y `$.fn.prependTo` y `$.fn.prepend`.
577577

@@ -744,7 +744,7 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio u
744744

745745
3. Seleccionar el elemento `label` del elemento `input` utilizando un selector de atributo.
746746

747-
4. Averiguar cuantos elementos en la página están ocultos (ayuda: `.length`)
747+
4. Averiguar cuantos elementos en la página están ocultos (ayuda: `.length`).
748748

749749
5. Averiguar cuantas imágenes en la página poseen el atributo `alt`.
750750

libro/markdown/cap04-nucleo-jquery.markdown

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ Sin embargo, existen métodos que son parte del espacio de nombres de $ y se con
1616

1717
Estas distinciones pueden ser bastantes confusas para usuarios nuevos. Para evitar la confusión, debe recordar estos dos puntos:
1818

19-
- Los métodos utilizados en selecciones se encuentran dentro del espacio de nombres `$.fn`, y automáticamente reciben y devuelven una selección en sí.
19+
- los métodos utilizados en selecciones se encuentran dentro del espacio de nombres `$.fn`, y automáticamente reciben y devuelven una selección en sí;
2020

21-
- Métodos en el espacio de nombres `$` son generalmente métodos para diferentes utilidades, no trabajan con selecciones, no se les pasa ningún argumento y el valor que devuelven puede variar.
21+
- métodos en el espacio de nombres `$` son generalmente métodos para diferentes utilidades, no trabajan con selecciones, no se les pasa ningún argumento y el valor que devuelven puede variar.
2222

2323
Existen algunos casos en donde métodos del objeto y del núcleo poseen los mismos nombres, como sucede con `$.each` y `$.fn.each`. En estos casos, debe ser cuidadoso de leer bien la documentación para saber que objeto utilizar correctamente.
2424

libro/markdown/cap05-eventos.markdown

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -295,13 +295,13 @@ $('p.expander').toggle(
295295

296296
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/inputHint.js` o trabaje directamente con Firebug. La tarea a realizar es utilizar el texto del elemento label y aplicar una "sugerencia" en la caja de ingreso de texto. Los pasos ha seguir son los siguientes:
297297

298-
1. Establecer el valor del elemento *input* igual al valor del elemento *label*;
298+
1. Establecer el valor del elemento *input* igual al valor del elemento *label*.
299299

300-
2. Añadir la clase "hint" al elemento *input*;
300+
2. Añadir la clase "hint" al elemento *input*.
301301

302-
3. Remover el elemento *label*;
302+
3. Remover el elemento *label*.
303303

304-
4. Vincular un evento *focus* en el *input* para remover el texto de sugerencia y la clase "hint";
304+
4. Vincular un evento *focus* en el *input* para remover el texto de sugerencia y la clase "hint".
305305

306306
5. Vincular un evento *blur* en el *input* para restaurar el texto de sugerencia y la clase "hint" en caso que no se haya ingresado algún texto.
307307

@@ -313,18 +313,19 @@ Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio ut
313313

314314
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejericio utilizando el archivo `/ejercicios/js/tabs.js` o trabaje directamente con Firebug. La tarea a realizar es crear una navegación por pestañas para los dos elementos *div.module*. Los pasos ha seguir son los siguientes:
315315

316-
1. Ocultar todos los elementos *div.module*;
316+
1. Ocultar todos los elementos *div.module*.
317317

318-
2. Crear una lista desordenada antes del primer *div.module* para utilizar como pestañas;
318+
2. Crear una lista desordenada antes del primer *div.module* para utilizar como pestañas.
319+
320+
3. Interactuar con cada div utilizando `$.fn.each`. Por cada uno, utilizar el texto del elemento *h2* como el texto para el ítem de la lista desordenada.
319321

320-
3. Interactuar con cada div utilizando `$.fn.each`. Por cada uno, utilizar el texto del elemento *h2* como el texto para el ítem de la lista desordenada;
321322
4. Vincular un evento *click* a cada ítem de la lista de forma que:
322323

323-
- Muestre el *div* correspondiente y oculte el otro;
324+
- muestre el *div* correspondiente y oculte el otro;
324325

325-
- Añada la clase "current" al ítem seleccionado;
326+
- añada la clase "current" al ítem seleccionado;
326327

327-
- Remueva la clase "current" del otro ítem de la lista;
328+
- remueva la clase "current" del otro ítem de la lista.
328329

329330
5. Finalmente, mostrar la primera pestaña.
330331

libro/markdown/cap06-efectos.markdown

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -190,19 +190,19 @@ $('h1').show(300).delay(1000).hide(300);
190190

191191
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/blog.js`. La tarea es añadir alguna interactividad a la sección blog de la página:
192192

193-
- Al hacer click en alguno de los titulares del *div #blog*, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
193+
- al hacer click en alguno de los titulares del *div #blog*, se debe mostrar el párrafo correspondiente con un efecto de deslizamiento;
194194

195-
- Al hacer click en otro titular, se debe ocultar el párrafo mostrado con un efecto de deslizamiento y mostrar nuevamente el párrafo correspondiente también con un efecto de deslizamiento. Ayuda: No se olvide de utilizar el selector `:visible`.
195+
- al hacer click en otro titular, se debe ocultar el párrafo mostrado con un efecto de deslizamiento y mostrar nuevamente el párrafo correspondiente también con un efecto de deslizamiento. Ayuda: No se olvide de utilizar el selector `:visible`.
196196

197197

198198

199199
### Crear un Menú Desplegable
200200

201201
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/navigation.js`. La tarea es poder desplegar los ítems del menú superior de la página:
202202

203-
- Al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
203+
- al pasar el puntero del ratón por encima de un ítem del menú, se debe mostrar su submenú en caso que exista;
204204

205-
- Al no estar más encima de un ítem, el submenú se debe ocultar.
205+
- al no estar más encima de un ítem, el submenú se debe ocultar.
206206

207207
Para poder realizarlo, utilice el método `$.fn.hover` para añadir o remover una clase en el submenú para poder controlar si debe estar oculto o visible (El archivo `/ejercicios/css/styles.css` incluye una clase "hover" para este propósito)
208208

@@ -212,11 +212,11 @@ Para poder realizarlo, utilice el método `$.fn.hover` para añadir o remover un
212212

213213
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/slideshow.js`. La tarea es añadir un slideshow a la página con JavaScript.
214214

215-
1. Mover el elemento *#slideshow* a la parte superior de la página;
215+
1. Mover el elemento *#slideshow* a la parte superior de la página.
216216

217-
2. Escribir un código que permita mostrar los ítems de forma cíclica, mostrando un ítem por unos segundos, luego ocultándolo con un efecto *fade out* y mostrando el siguiente con un efecto *fade in*;
217+
2. Escribir un código que permita mostrar los ítems de forma cíclica, mostrando un ítem por unos segundos, luego ocultándolo con un efecto *fade out* y mostrando el siguiente con un efecto *fade in.
218218

219-
3. Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero;
219+
3. Una vez llegado al último ítem de la lista, comenzar de nuevo con el primero.
220220

221221
Para un desafío mayor, realice un área de navegación por debajo del slideshow que muestre cuantas imágenes existen y en cual se encuentra (ayuda: $.fn.prevAll` puede resultar útil).
222222

libro/markdown/cap07-ajax.markdown

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,7 @@ $('#loading_indicator')
394394
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/load.js`. La tarea es cargar el contenido de un artículo de blog cuando el usuario haga click en el título del ítem.
395395

396396
1. Crear un elementos *div* después del titulo de cada titulo de artículo de blog y guardar una referencia hacia ellos en el elemento de titulo utilizando `$.fn.data`.
397+
397398
2. Vincular un evento click al titulo, el cual utilizará el método `$.fn.load` para cargar en cada *div* creado el contenido apropiado desde el archivo `/ejercicios/data/blog.html`. No olvide de deshabilitar el comportamiento predeterminado del evento *click*.
398399

399400
Notar que cada titulo de artículo de blog en `index.html` incluye un enlace hacia el artículo. Necesitará aprovechar el atributo href de cada enlace para obtener el contenido propio de blog.html. Una vez obtenida el valor del atributo, puede utilizar la siguiente forma para procesar la información y convertirla en un selector para utilizar en conjunto con `$.fn.load`:
@@ -413,9 +414,13 @@ Recuerde utilizar `console.log` para asegurarse que esta realizando lo correcto.
413414
Abra el archivo `/ejercicios/index.html` en el navegador. Realice el ejercicio utilizando el archivo `/ejercicios/js/specials.js`. La tarea es mostrar los detalles del usuario para un día determinado cuando se selecciona desde la lista desplegable.
414415

415416
1. Añadir un elemento *div* después del formulario que se encuentra dentro del elemento *#specials*; allí será el lugar en donde se colocará la información a obtener.
417+
416418
2. Vincular el evento *change* en el elemento *select*; cuando se realiza un cambio en la selección, enviar una petición Ajax a `/ejercicios/data/specials.json`.
419+
417420
3. Cuando la petición devuelve una respuesta, utilizar el valor seleccionado en el select (ayuda: `$.fn.val`) para buscar la información correspondiente en la respuesta JSON.
421+
418422
4. Añadir algún HTML con la información obtenida en el *div* creado anteriormente.
423+
419424
5. Finalmente remover el botón *submit* del formulario.
420425

421426
Notar que cada vez que la selección cambia, se realiza una petición Ajax. ¿Cómo cambiaría el código para realizar solo una petición y guardar la información para aprovecharla cuando se vuelve a cambiar la opción seleccionada?

libro/markdown/cap10-organizacion-codigo.markdown

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ Cuando se emprende la tarea de realizar aplicaciones complejas del lado del clie
1010

1111
### Conceptos Clave
1212

13-
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave.
13+
Antes de comenzar con los patrones de organización de código, es importante entender algunos conceptos clave:
1414

15-
- El código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación.
15+
- el código debe estar divido en unidades funcionales — módulos, servicios, etc. Y se debe evitar la tentación de tener todo en un único bloque `$(document).ready()`. Este concepto se conoce como encapsulación;
1616

17-
- No repetir código. Identificar piezas similares y utilizar técnicas de heredación.
17+
- no repetir código. Identificar piezas similares y utilizar técnicas de heredación;
1818

19-
- A pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM.
19+
- a pesar de la naturaleza de jQuery, no todas las aplicaciones JavaScript trabajan (o tienen la necesidad de poseer una representación) en el DOM;
2020

21-
- Las unidades de funcionalidad deben tener una articulación flexible (en inglés [loosely coupled](http://en.wikipedia.org/wiki/Loose_coupling)) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
21+
- las unidades de funcionalidad deben tener una articulación flexible (en inglés [loosely coupled](http://en.wikipedia.org/wiki/Loose_coupling)) — es decir, una unidad de funcionalidad debe ser capaz de existir por si misma y la comunicación con otras unidades debe ser a través de un sistema de mensajes como los eventos personalizados o pub/sub. Por otro lado, siempre que sea posible, de debe mantener alejada la comunicación directa entre unidades funcionales.
2222

2323
El concepto de articulación flexible puede ser especialmente problemático para desarrolladores que hacen su primera incursión en aplicaciones complejas. Por lo tanto, si usted esta empezando a crear aplicaciones, solamente sea consciente de este concepto.
2424

@@ -157,13 +157,13 @@ La primera característica a notar es que el código es más largo que el origin
157157

158158
Con la nueva organización, las ventajas obtenidas son:
159159

160-
- Separación de cada funcionalidad en pequeños métodos. En un futuro, si se quiere cambiar la forma en que el contenido se muestra, será claro en donde habrá que hacerlo. En el código original, este paso es mucho más difícil de localizar.
160+
- separación de cada funcionalidad en pequeños métodos. En un futuro, si se quiere cambiar la forma en que el contenido se muestra, será claro en donde habrá que hacerlo. En el código original, este paso es mucho más difícil de localizar;
161161

162-
- Se eliminaron los usos de funciones anónimas.
162+
- se eliminaron los usos de funciones anónimas;
163163

164-
- Las opciones de configuración se movieron a una ubicación central.
164+
- las opciones de configuración se movieron a una ubicación central;
165165

166-
- Se eliminaron las limitaciones que poseen las cadenas de métodos, haciendo que el código sea más fácil para refactorizar, mezclar y reorganizar.
166+
- se eliminaron las limitaciones que poseen las cadenas de métodos, haciendo que el código sea más fácil para refactorizar, mezclar y reorganizar.
167167

168168
Por sus características, la utilización de objetos literales permiten una clara mejora para tramos largos de código insertados en un bloque `$(document).ready()`. Sin embargo, no son más avanzados que tener varias declaraciones de funciones dentro de un bloque `$(document).ready()`.
169169

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy