YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Spanish, Mexican subtitles

← 02-17 Diseño

02-17 Diseño

Get Embed Code
6 Languages

Showing Revision 3 created 09/30/2014 by Fran Ontanaya.

  1. Parece que ya se ve la línea de meta.
  2. Tenemos nuestro árbol de renderización.
    ¿Podemos colocar píxeles en la pantalla?
  3. Ya estamos muy cerca,
    pero todavía nos falta un paso.
  4. Todavía tenemos que averiguar
  5. dónde y cómo se posicionan
    todos los elementos en la página.
  6. Y ese es el paso del diseño. Veámoslo.
  7. Para mostrar un diseño en acción
  8. he elaborado un árbol
    de renderización muy simple.
  9. Así es como queda el resultado final.
  10. Fíjate que si rotamos el teléfono
  11. las dimensiones de las cajas cambian
  12. pero sus proporciones
    siguen siendo las mismas.
  13. Veamos si podemos averiguar
    qué está haciendo el navegador aquí.
  14. Empecemos por arriba.
  15. Asignamos el color gris
    al fondo del elemento BODY.
  16. Tiene sentido.
    Es exactamente lo que hemos visto.
  17. Y establecemos su ancho en el 100%.
  18. Espera, ¿el 100% de qué exactamente?
  19. El 100% del diseño de la ventana gráfica.
  20. Si prestaste atención,
    nuestros ejemplos de hola mundo
  21. contenían una meta etiqueta extra.
  22. Sí, estaba leyendo la guía
    de fundamentos web
  23. sobre el diseño receptivo
  24. y decía que siempre
    se debía incluir esta etiqueta
  25. pero nunca he entendido para qué sirve.
  26. Es un poco críptico,
    pero vamos a intentar entenderlo.
  27. Lo que hace es decirle al navegador
  28. que el ancho del diseño
    en la ventana gráfica
  29. debería ser el mismo
    que el ancho del dispositivo.
  30. Digamos que el ancho
    del dispositivo es 320 píxeles.
  31. Entonces, si esta meta etiqueta
    de la ventana gráfica está presente
  32. el navegador asignará al diseño
    de la ventana gráfica 320 píxeles
  33. y ese será nuestro 100%.
  34. Ya veo. ¿Pero qué ocurre
    si no incluyo esta etiqueta?
  35. Entonces el navegador usará
  36. el ancho predeterminado
    de la ventana gráfica
  37. que suele ser 980 píxeles
  38. y está optimizado
    para pantallas más grandes.
  39. ¿Sabes que a veces las páginas
    se presentan reducidas
  40. y tienes que ajustar el zoom
    para poder navegar y leer el texto?
  41. Eso ocurre porque no han definiendo
    el diseño de la ventana gráfica.
  42. Tiene sentido.
    No me gustan mucho esas páginas.
  43. A mí tampoco. Para crear
    una buena experiencia móvil,
  44. siempre deberías definir
    la etiqueta meta de la ventana gráfica.
  45. Pero volviendo a nuestro ejemplo.
  46. Si el dispositivo tiene 320 píxeles,
  47. entonces el BODY
    tendrá 320 píxeles de ancho.
  48. Después tenemos la etiqueta DIV
  49. al 50% de la anchura
  50. y es hijo de BODY,
  51. así que su ancho
    es relativo al de su padre.
  52. El 50% de 320 píxeles son 160 píxeles
  53. y la anchura del párrafo
    es el 50% de la de su padre
  54. que da como resultado 80 píxeles.
  55. Y con esto hemos terminado.
    Esto es el diseño.
  56. ¿Qué te parece si lo pruebas?