Spanish, Mexican subtitles

← 05-32 Poniéndolo todo junto.

Get Embed Code
4 Languages

Showing Revision 6 created 09/23/2013 by Karina von Eckartsberg.

  1. Voy a adelantarme y a agregar esa función a
    nuestro programa aquí.
  2. De hecho, este trabaja al pie de la letra así como
    sacado de la prueba.
  3. Ahora si le damos una lista de puntos, nos arrojará
    la URL para la imágen. Usemos ésa.
  4. Si tenemos coordenadas, haz una imágen URL.
  5. Ya habíamos implementado esa función. Vamos a
    mover nuestro comentario.
  6. Ahora sólo necesitamos desplegar la imágen URL.
  7. De hecho, tenemos que hacer un pequeño
    cambio aqui-- img_url=none.
  8. Si por default no existe y tenemos algunos puntos, lo podemos configurar como otra cosa.
  9. Entonces solo necesitamos pasar
    imgurl into our template--imgurl=img_url.
  10. Ahora solo necesitamos actualizar nuestra plantilla,
    y vamos a insertar nuestra imagen.
  11. Recuerda, ésta es nuestra plantilla,
    tengo un grupo de CSS.
  12. Recuerden que expliqué esa clase que controla
    la layout de las cosas.
  13. Entonces tenemos todo nuestro HTML.
    Aquí esta nuestra hoja.
  14. Queremos desplegar esto a la derecha de nuestra hoja.
  15. Voy a hacer algunas cosas que no han visto antes en términos de hacerlo desplegar correctamente,
  16. pero primero vamos a poner la imágen aquí.
  17. Si "img_url" --que básicamente no es None--
    incluye nuestra imágen.
  18. Así es como lo hacemos en
    el lenguaje de plantilla Jinja.
  19. Otra vez, sé que no hemos cubierto esto en ésta clase, pero es bastante directo.
  20. Solo tienen algo de texto, y tienen estos pequeños escapes para correr código Python.
  21. Si la URL esta ahí, incluir esta imagen.
    Vamos a darle un giro a ésto.
  22. Recargué la página, y pueden ver que abajo tenemos una imagen con un marcador en ella.
  23. Genial. Vamos a desplegar nuestra imagen
    hacia la derecha aqui.
  24. Voy a adelantarme y hacer eso , les explicaré brevemente como se hace.
  25. He movido la imagen por aquí. Les mostraré brevemente lo que hice para lograr eso.
  26. Agregue una clase al mapa, para poder referirme a el en mi CSS.
  27. Pueden usar esta noción de posición absoluta,
  28. que le permite posicionar algo en cualquier
    lugar de la página.
  29. Posicioné absolute para que el mapa sea cero pixeles desde la derecha y 112 desde el borde superior--
  30. cero desde la derecha, 112 desde el borde superior.
    Encaja perfectamente.
  31. Obviamente, yo sabía el tamaño de la imágen con anterioridad cuando empezamos a hacer todo este URL.
  32. Vamos a ver si nuestro programa funciona. Recuerden que pusimos esta entrada aquí forzando nuestra IP.
  33. Vamos a tener que --probablemente si vamos a
    desarrollar esto a largo plazo,
  34. tal vez cuando esté en modo de depuración escogerá entre algunas IPs al azar o algo así,
  35. pero cuando pongamos en producción va a usar una IP real.
  36. Por ahora, solo vamos a codificar algunas IPs para que esto funcione en la demostración.
  37. Voy a adelantarme e incluir la dirección IP de Udacity, y vamos a desplegar algo de arte ASCII.
  38. Tendremos esta IP, y vamos a asegurarnos
    de que funciona.
  39. Vamos a agregar el dibujo de un conejo.
  40. Pegaremos eso o lo haremos a mano,
    lo que se te haga más rápido.
  41. Lo enviamos y --tarán!
  42. Tomó un poco más en enviar porque
    tuvimos que checar la IP,
  43. pero ahora podemos ver que usamos la IP de nuestra oficina, que esta aquí en Palo Alto.
  44. Tenemos nuestra IP anterior de la otra IP que inventamos, que está aquí en Colorado,
  45. y podemos ver nuestro conejo y nuestro gato. Nuestro camello no tenía una ubicación.
  46. Ahora ASCII Chan está mucho más mundano.
  47. Pondré esto en linea en asciichan.com, y puedes subir todo el arte ASCII que quieras
  48. Veremos como sale este mapa. Aqui se acaba la lección.
  49. Espero que hayas aprendido algo acerca de cómo interactuar con otros sitios de internet.
  50. Buena suerte con sus tareas.