HTML: iframe

hola bienvenido al vídeo html y frames del curso introducción al desarrollo web donde veremos en qué consiste la etiqueta y frame de html mi nombre con sacarlos acción in ferry y soy estudiante de ingeniería multimedia de la universidad de alicante en este vídeo te voy a mostrar el empleo de la etiqueta iframe así como sus ventajas desventajas compatibilidades y cuando es adecuado su uso antes de conocer el significado de i frame debemos saber que es un frame así como sus atributos básicos un frame podría entenderse como una zona de la ventana independiente del resto al ser independiente cada una de estas zonas puede tener sus propias características así como su propio contenido el resultado final sería una página formada por varias ventanas sin ninguna relación entre sí para agrupar estas ventanas podemos hacer uso del atributo frame sé que el grupo en determinado número de frames en este caso tenemos una página formada por dos frames que se encuentran definidos dentro de un frame set a continuación veremos el código html de esta página respecto a la creación de frames lo primero que debe comentar es que las etiquetas que vamos a ver están obsoletas y no deben usarse en su lugar se debe de usar la etiqueta iframe que veremos a lo largo del vídeo teniendo en cuenta esto podemos apreciar que para la creación de frame existen tres etiquetas básicas frame set es la etiqueta que se usa para controlar las características del conjunto de frames normalmente se define la división en los frames gracias a los atributos rose fila o con columnas en ambos casos se pueden indicar el tamaño ya sea en porcentaje como se realiza aquí o por el contrario indicando un tamaño fijo se puede aplicar el carácter asterisco para indicar que el frame determinado debe ocupar toda la página o restante de la misma la etiqueta frame nos permite definir las características de un frame en particular gracias principalmente al atributo src que indica el documento html del frame y el atributo name que nos permite tener un nombre determinado por último la etiqueta no frames nos permite indicar el contenido que queremos que se visualice en caso de que el navegador web del cliente me soporte el uso de frames si nos fijamos bien podemos observar que en el caso de que el navegador web soporte frame la página web va a estar vacía es decir sólo tendrá dos elementos de tipo frame para entender mejor el código aquí tenemos el contenido del frame superior se puede apreciar que simplemente presenta un párrafo con el contenido frame 1 cuando en el archivo principal usamos la etiqueta frame lo que estamos haciendo realmente podría entenderse como sustituir esa etiqueta por esta página html lo mismo sucedería con el frame 2 pero también de los valores de los atributos title y p una vez visto el concepto de frame vamos a explicar que es un iframe esta palabra proviene del inglés donde iframe significa marco en línea o inline frame está aplicado al desarrollo web sería algo similar a lo que puedes observar en la imagen técnicamente la etiqueta y frame nos permite introducir en frustrar un documento html dentro del documento html en el que estamos trabajando dicho de otro modo podría entenderse como con una página está dentro de otra aquí se puede observar la esquematización del caso anterior en el recuadro de color violeta tendríamos el contenido del i y frame mientras que en el de color azul representaría la web o en su conjunto a la derecha tenemos el mismo ejemplo de una manera aún más esquemática aquí tenemos el código del ejemplo anterior donde se puede apreciar el uso de la etiqueta iframe en la línea 14 veremos ahora un ejemplo un contenido alternativo aquí tenemos el mismo caso creado anteriormente pero ahora hemos añadido entre las etiquetas y frame un párrafo y un enlace con la misma url que this frame esto en un principio puede no tener sentido sin embargo hay que tener en cuenta que todo lo que se encuentra entre las etiquetas y frame solo se mostrará en caso de que el navegador web del cliente no soporte el uso de frames si no ponemos nada en caso de que algún usuario no puede visualizar los frames se perderá todo el contenido que se ofrecía en él afortunadamente hay formas de evitar esto como en el ejemplo de la imagen en el espacio reservado para el iframe se mostraría un párrafo indicando el usuario la razón por la que no se le muestre es información y además se le ofrecería un enlace con la misma url que el frame para asegurarnos de que el usuario puede acceder a todo el contenido de nuestra web veremos ahora con más detalle sus atributos el atributos rc nos permite indicar el documento html del frame el atributo height sirve para indicar la altura del icf en que se creara mientras que week es idéntico al anterior pero para la anchura name nos permite indicar el nombre del i frame scroll y nos indica si se va a poder realizar explore dentro de él y frame el atributo around es sirve para indicar una descripción del contenido de the frame con una longitud considerable respecto al frame border las permite indicar el grosor del borde del iframe y por último el atributo allow transparency sirve para permitir la transferencia del i frame pudiendo ver el contenido de la página que se encuentra oculto por el frame no todos los atributos que hemos visto están soportados en html5 de hecho algunos están totalmente desaconsejados como es el caso de frame border o logo transparency ya que estas operaciones se pueden realizar con css obteniendo una mayor compatibilidad y des cuestionando la parte del contenido del diseño otros atributos mencionados también están desaconsejados como por ejemplo de scoring o en londres aquí se puede comprobar lo mencionado anteriormente respecto a que no todos los atributos están soportados por html5 la primera vista puede parecer que de frame es lo mínimo que el frame si bien es cierto que son parecidos hay una característica fundamental que nos diferencia en el caso de los frames la página web estaba formada por partes independientes entre sí pero no existía la página como entidad única en el caso de los frames sí que existe es entidad única de página web y dentro de ésta se encuentra diferente que podría entenderse como un elemento flotante que situado en la página web de ahí que se denomina marco en el ine actualmente el uso de frames está totalmente obsoleto y desaconsejado por lo que en su lugar se deben aplicar y frames con la etiqueta mencionada anteriormente gracias a esta etiqueta se ha facilitado considerablemente la creación de frames si bien es cierto tenéis una herramienta de la que te vamos a usar además vez y todos los navegadores la soportan la sección de casos excepcionales como navegadores obsoletos para comprobar que el flow de frames está obsoleto hemos intentado validar la página creada anteriormente de los frames y vemos como claramente nos sugieren el uso del elemento iframe y css de vida de los elementos frame set y no frames son obsoletos y no deben usarse aquí tenemos una captura de pantalla de la especificación oficial sobre el elemento y frame que se ha soportado por todos los navegadores actuales no implica que no debas aplicar un texto alternativo o un enlace al contenido del frame en caso de que éste no se soporte esta es una buena práctica no solo para este caso sino para cualquier otro similar en el que un usuario no pueda acceder a algún contenido por incompatibilidad con navegadores como hemos visto en el ejemplo de origen compatible podemos hacer uso de las nuevas características que se vayan incorporando pero ofreciendo siempre la alternativa al usuario para que en caso de que estas nuevas características no sean soportadas el funcionamiento de la página no varía ahora vamos a analizar sus ventajas y desventajas para poder ver mejor el concepto de frame y saber analizar cuándo debemos usarlo comenzamos con las ventajas del iframe se podría decir que una de las más importantes es la reutilización de código por lo que nos permitirá crear páginas web mucho más rápido esto significa que partes como la barra de navegación el pie de página o la cabecera serían una única página html y en la parte del contenido central de esta se pondría de frame con el contenido de la misma que iría cambiando en función de la parte de la web que esté viendo el usuario relacionado con lo anterior podemos añadir que nos ayudará a mantener la coherencia de nuestra página web al no cambiar la disposición de los elementos en usuarios ahora en todo momento donde deberá buscar la opción que quiera realizar reduce la carga de contenido ya que sólo se actualiza el contenido de la frame en lugar de toda la página además el propio contenido del iframe se puede almacenar por lo que no tendría que volver a descargarse nuevamente respecto a los inconvenientes son bastante variados uno de los mayores problemas es el posicionamiento en la web ya que usar iframe la página html contenida dentro no podrá ser reconocida por los motores de búsqueda por lo que el posicionamiento de la web dependerá sólo de las páginas principales que no sean y frames esto último lleva asociado otra pega y es que el usuario no podrá guardar las páginas de los frames en sus marcadores cuando se realizan operaciones de entre la página principal y the frame se precisará de una forma de comunicación entre ambas ya que recordemos se trata de dos páginas independientes esto se traduce a que ciertas tareas en un principio deberían ser simples se complican al hacer uso de los frames por ejemplo si se quiere realizar la versión de impresión de la página web no se mostrará correctamente ya que del fin dará problemas y no se podrá imprimir no obstante también hay que destacar que tanto el posicionamiento web como la versión de impresión se pueden solucionar pero esto lleva implícito un trabajo detrás que en caso de no ser y frames no deberíamos tener que realizar a modo de conclusión menciona que los frames se suelen usar para incluir contenido web de terceros a la página web en determinado servicio o panel de publicidad etcétera o incluso para realizar una operación dentro de la interfaz como veremos a continuación en la imagen mostrada se puede observar como el código que nos proporciona para introducir un vídeo youtube corresponde con un i frame ejemplos como estos hay varios sólo que a veces no se ven a simple vista si deseas información adicional puedes consultar el nuevo modelo sandbox de protección para los frames aunque esto ya es tema para otro vídeo si deseas contactar conmigo no dudes en escribir en direcciones de correo electrónico que aparecen en pantalla recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y des web punto es gracias por tu atención