Showing Revision 4 created 03/09/2014 by Fran Ontanaya.

1. Title:
   De fijo a fluido
2. Description:

3. 750 0:01 - 0:02
   Ahora que sabes cómo usar
   la meta para el viewport
4. 2340 0:02 - 0:05
   juguemos un poco
   con las herramientas de desarrollo
5. 5160 0:05 - 0:08
   para ver qué necesitamos hacer
   para arreglar esta página.
6. 7910 0:08 - 0:11
   Ahora bien, el mayor problema
   aquí es que la página
7. 10710 0:11 - 0:15
   tiene un ancho de columna fijo.
   Si yo reajusto el tamaño de la ventana,
8. 14900 0:15 - 0:18
   notarás que la columna de texto
   no cambia de tamaño,
9. 18300 0:18 - 0:22
   solo cambia su posición con respecto al margen.
   Al mirar los elementos
10. 22040 0:22 - 0:26
    en la herramientas de desarrollo, podemos
    encontrar fácilmente el primer elemento ofensivo.
11. 25810 0:26 - 0:29
    Este elemento de la página
    tiene un ancho de página fijo.
12. 28890 0:29 - 0:33
    Inhabilitémoslo y veamos qué pasa.
13. 33390 0:33 - 0:35
    Bueno, ciertamente ha cambiado
    las cosas, pero no creo que
14. 35360 0:35 - 0:40
    haya mejorado mucho el asunto.
    Sigamos investigando
15. 40050 0:40 - 0:42
    el contenido para ver qué encontramos.
16. 42390 0:42 - 0:46
    Este elemento de wrapper ya tiene
    un ancho del 100%, lo cual es bueno.
17. 45540 0:46 - 0:48
    Significa que no nos está impidiendo
18. 47630 0:48 - 0:51
    reajustar el tamaño. Pero el elemento
    de contenido tiene un ancho fijo en píxels.
19. 51020 0:51 - 0:55
    Inhabilitémoslo. Ahora,
    al reajustar el tamaño
20. 55000 0:55 - 0:58
    de la página, nuestro contenido no tiene
    problema, pero la barra lateral
21. 57880 0:58 - 1:02
    aparece y desaparece.
    Desde luego, tiene un ancho fijo.
22. 62060 1:02 - 1:05
    Si ajustamos su ancho a
    un porcentaje también,
23. 64650 1:05 - 1:08
    ahora podemos reajustar
    el tamaño de mejor forma.
24. 67550 1:08 - 1:10
    Volvamos a la página, e intentemos
25. 70050 1:10 - 1:12
    asignarle un ancho, pero
    démosle un ancho en
26. 72400 1:12 - 1:16
    unidades viewport esta vez.
    Nuestro único problema ahora
27. 76370 1:16 - 1:19
    parece ser que el encabezado
    no está reajustándose como
28. 79280 1:19 - 1:21
    quisiéramos, así que echémosle
    un vistazo a la imagen del encabezado
29. 80900 1:21 - 1:24
    una vez más. La imagen tiene
    un ancho máximo asignado,
30. 83770 1:24 - 1:27
    pero no un ancho en sí.
    Así que, fijemos su ancho.
31. 89350 1:29 - 1:34
    Y ahora, todo parece estar
    reajustándose bien. No es perfecto,
32. 93530 1:34 - 1:37
    pero todo lo que quería explicar
    es que al intentar transicionar
33. 96570 1:37 - 1:41
    páginas con diseño fijo a diseño fluido,
    las cosas básicas a las que hay que
34. 100930 1:41 - 1:46
    prestar atención, son los tamaños de píxeles
    fijos, y a la falta de reajuste con porcentajes.