CSS - intermediate - Lección nº 13
Incluyendo / incrustando contenido externo a tu sitio web
¿De qué trata esta lección?
En esta lección aprenderemos a lanzar fácilmente nuestra página web utilizando contenido incrustable de otras páginas. Podemos encontrar muchas posibilidades en Internet para facilitar el trabajo, ahorrando tiempo en la programación, el diseño y la seguridad.
Nueva etiqueta HTML:
<iframe> - esta etiqueta se utiliza para incluir contenido en una página desde otra página. No lo crearemos nosotros mismos, en las páginas que proporcionan contenido integrable existe principalmente la posibilidad de copiar código para incrustar.
Ejemplo usando Google Maps:
Si desea compartir una ubicación en su página web, puede dibujar un mapa, pero no es necesario. Puede utilizar Google Maps como se visualiza en la imagen superior. Existen otras posibilidades para utilizar mapas personalizados con Google.
Ejemplo de incrustación de video de YouTube:
Si necesita incrustar un video en tu página web, puede copiarlo en su servidor y ejecutarlo desde allí, pero eso puede significar un aumento en el tráfico y los costes. La mejor alternativa es subirlo a un canal de video compartido e incrustar el video en su página web. Eso significa que el video se ejecuta en otro servidor distinto al de tu página web.
Ejemplo de incrustación del botón "me gusta" de Facebook:
Si desea incrustar un complemento de redes sociales, debe buscar en su página una forma de generar código para incrustarlo en su página. Hay más formas de para incluir un botón me gusta, como por ejemplo la etiqueta
En esta lección aprenderemos a lanzar fácilmente nuestra página web utilizando contenido incrustable de otras páginas. Podemos encontrar muchas posibilidades en Internet para facilitar el trabajo, ahorrando tiempo en la programación, el diseño y la seguridad.
Nueva etiqueta HTML:
<iframe> - esta etiqueta se utiliza para incluir contenido en una página desde otra página. No lo crearemos nosotros mismos, en las páginas que proporcionan contenido integrable existe principalmente la posibilidad de copiar código para incrustar.
Ejemplo usando Google Maps:
Si desea compartir una ubicación en su página web, puede dibujar un mapa, pero no es necesario. Puede utilizar Google Maps como se visualiza en la imagen superior. Existen otras posibilidades para utilizar mapas personalizados con Google.
Ejemplo de incrustación de video de YouTube:
Si necesita incrustar un video en tu página web, puede copiarlo en su servidor y ejecutarlo desde allí, pero eso puede significar un aumento en el tráfico y los costes. La mejor alternativa es subirlo a un canal de video compartido e incrustar el video en su página web. Eso significa que el video se ejecuta en otro servidor distinto al de tu página web.
Ejemplo de incrustación del botón "me gusta" de Facebook:
Si desea incrustar un complemento de redes sociales, debe buscar en su página una forma de generar código para incrustarlo en su página. Hay más formas de para incluir un botón me gusta, como por ejemplo la etiqueta
Ejercicios
1. Abre el archivo tips.html y y agrega un mapa de Google sobre el pie de página (después del último párrafo dentro de la división de contenido). Agrega un encabezado de segundo nivel con el texto donde vivo, luego busca Londres e incrusta el mapa.
Ver el resultado
2. Abre el archivo toplangs.html e incrusta un video del canal code.org de YouTube. El video debe aparecer junto al gráfico SVG incluido:
Ver el resultado
- Cambia el tamaño del video si no encaja, cambiando el valor de los atributos de ancho;
3. Agrega un botón Me gusta (Like) al enlace y un encabezado de segundo nivel con el texto Like our main project, Code-n- Social, en el index.html, sobre la galería. Al presionar el botón, al usuario le debe gustar la página de Facebook de Code-n- Social (https://www.facebook.com/Codensocial/). Además, cambia la altura a 40 en el iframe
Ver el resultado
Cuestionario
1. ¿Cuál de las siguientes es una desventaja de incrustar un video de YouTube en su página web?
2. ¿Cuál de los siguientes no es un ícono de Facebook incrustado existente?
3. ¿Qué propiedad no se puede usar con la etiqueta <iframe>?
4. ¿Por qué es bueno agregar un motor de búsqueda personalizado a tu página web?
Información suplementaria
Puedes leer más sobre el tema de la lección y hacer ejercicios visitando los siguientes enlaces:
https://www.w3schools.com/tags/tag_iframe.asp;
https://developers.google.com/maps/documentation/embed/guide;
https://support.google.com/youtube/answer/171780?hl=en;
https://developers.facebook.com/docs/plugins.
https://www.w3schools.com/tags/tag_iframe.asp;
https://developers.google.com/maps/documentation/embed/guide;
https://support.google.com/youtube/answer/171780?hl=en;
https://developers.facebook.com/docs/plugins.
