¡Descarga Introducción a HTML: Etiquetas y Formatos y más Resúmenes en PDF de Informática solo en Docsity!
HTML -> Hyper Text Markup
Las pág web se sustentan en el uso de este lenguaje. HTML (Hyper Text Markup Language) es el lenguaje de marcado estándar para crear contenidos Web, que está compuesto por una serie de elementos, que se identifican a través del uso de etiquetas. Las etiquetas tienen atributos. Durante nuestro curso revisamos una amplia diversidad de etiquetas y atributos, categorizadas en los siguientes grupos: ● Etiquetas básicas ● Etiquetas de formulario ● Etiquetas Semánticas ● Etiquetas para diagramación, formato y código ● Formatos y optimización de media para Web ● Etiquetas para enlazar recursos externos ● Etiquetas para el soporte de HTML gráfico
UNIDAD I
Lección I
¿Cómo funciona la web? -> Internet (gran red de computadores conectados globalmente) la Web (solo una de las maneras en la que puede fluir la info). Los computadores que conforman esta gran red se dividen en servidores (computadores donde se guardan los sitios; envían información) y clientes (dispositivos de los usuarios q se conectan a la red; reciben información). HTTP es un protocolo de intercambio de info no secuencial. Protocolo ( Dominio (nombre o término alfanumérico) (.com/.net/.org) Dirección IP -> permite de manera lógica y jerarquizada el acceso a los recursos web. Independientemente de la versión está conformada x un conjunto de números. Los dominios se relacionan con las direcciones IP. WWW( world wide web) -> define una manera en q puede fluir la info y está construida sobre internet). ¿Cómo funciona el navegador? -> internet se basa en la arquitectura cliente-servidor. Los navegadores están diseñados para hacer peticiones a los servidores y una vez recibidos (en html; css; javascript e imágenes) los muestra a través de un proceso llamado renderización. ● Son fundamentales para navegar en internet; pueden ser de código abierto (firefox/chrome/opera/safari), cerrado o propietario (internet explorer). ● cuentan con estructuras de componentes regularmente actualizados. Se compone x: Interfaz de usuario; Motor de búsqueda; Motor de renderización; red; servidor de la interfaz; Intérprete de javascript; y, almacenamiento de datos.
- Interfaz de usuario -> todas aquellas partes visibles del navegador exceptuando la ventana principal.
- Motor de búsqueda -> coordina las acciones de la interfaz de usuario y el motor de renderización (encargado de mostrar el contenido solicitado)
- Red -> componente del navegador responsable de las llamadas a la red.
- Servidor de interfaz -> parte del navegador encargada de mostrar widgets básicos.
- Intérprete javascript ->permite analizar y ejecutar dicho código.
- Almacenamiento de datos -> información necesaria para mejorar la experiencia de navegación de los usuarios. Pilares básicos sobre los que se sustenta la arquitectura lógica de la Web: ● URI (Uniform Resource Identifier): permite referirse y describir todos los objetos. Versión elemental URL (corresponde a una dirección web) ● HTML : permite anclar o redirigir al lector desde un punto cualquiera del texto a otro lugar. ● HTTP (Hyper Text Transfer Protocol): es el protocolo de transmisión de datos q permita enviar y traer info en HTML desde un lugar a otro en esta red q es la Web. Mediante instrucciones simples el cliente indica al servidor qué acciones realizar para recibir o entregar datos o recursos. Motores de Renderizado : Los navegadores Web o browsers son programas complejos encargados de hacer peticiones a los servidores y de mostrar o renderizar los archivos recibidos. Para llevar a cabo este proceso es que se utiliza el motor de renderizado. Renderizar -> proceso mediante el cual se genera una imagen a partir de un modelo previo. Proceso de renderizado de un sitio Web -> proceso a través del cual el navegador genera gráficamente los archivos recibidos. Los motores de renderizado más importantes son BLink, EdgeHTML, Gecko y WebKit. Es posible q un motor interprete un código de una manera diferente a otro.
Lección II
Definición de HTML : lenguaje de marcas de hipertexto; se usa para crear la estructura y contenido de un doc, q luego es interpretado x un navegador y luego es reconocido como una pág Web. Se usan los símbolos para establecer el marcado de etiquetas que conforman la estructura de las pág Web. Siempre se construye entre las etiquetas <> cada etiqueta tiene un significado y función propia. Ej: La etiqueta y
sirven para construir párrafos. Nos permite construir los elementos web q queramos. **** sección superior donde está la barra de navegación; buscador y logotipo
<> Sección central, parte densa de los contenidos (imágenes, textos y cajas q nos llevan a otros lugares dentro del sitio **** Sección inferior, datos de propietarios, formularios de contacto, derechos de autor, etc. *Además de la variedad de etiquetas, también existen etiquetas para geolocalización.
- Un doc HTML se construye siempre entre las etiquetas de apertura y cierre y
*Una pag Web semánticamente bien escrita, contiene secciones q podemos resumir en encabezado, contenido del cuerpo y pie de pág. ¿Cómo se renderiza el HTML? es el proceso q realiza el motor de render de los navegadores Web. 1) ¿Qué es el DOM? -> Document Object Model, representación de los elementos HTML en el navegador q tiene características y funcionalidades propias de HTML para cada etiqueta. Estructura de tipo árbol. A través de este se puede manipular una pág Web a nuestro gusto. 2) ¿Qué es DOCTYPE? -> es la primera etiqueta obligatoria q da inicio a un doc HTML indicando al navegador la versión HTML q se utilizará.
extensiones. CREANDO UN ARCHIVO HTML Me salió!!
Lección VI -> CONOCIENDO LAS ETIQUETAS BÁSICAS
● Etiqueta Meta: no tiene cierre, se ubica dentro de la etiqueta y se usa para compartir la info que maneja nuestro sitio para su posicionamiento en los buscadores. Gracias a la etiqueta Meta los buscadores consultan la info de las pag q se encuentran públicas en internet, y a partir de la similitud del contenido nuestra pag puede aparecer en los resultados.
La etiqueta meta incluye cierta información que identifica nuestro sitio Web y tiene atributos cuyo contenido se especifica con la palabra content, donde un ejemplo de atributo es keywords que contiene las palabras claves de nuestra página. ● Etiquetas para textos y párrafos: nos ayudan a estructurar textos a través de títulos, párrafos, saltos de nvl y resaltados de textos. Las etiquetas “H” se utilizan para escribir encabezados o títulos; son leídas por los motores de los buscadores para indexar o incluir la estructura principal del contenido de la pág. “h1 -> título más importante; “h6-> menos importante” para cursiva para negritas. atributo es keywords que contiene las palabras claves de nuestra página. ● Etiquetas para listas: Pueden ser ordenadas (números) o sin ordenar (viñetas)
- Numéricas: se requieren dos tipos: ol> (primaria) y **** (secundaria). Entre las etiquetas se encierran cada uno de los elementos.
- Viñetas: se requiere **** (primaria) y, nuevamente, **** (secundaria). ● LISTAS ANIDADAS -> listas dentro de otras listas ● LISTA DE DEFINICIONES Y TÉRMINOS (asemejados a los diccionarios) -> se debe crear un glosario de términos. Para crear una estructura con definiciones se deben utilizar 3 etiquetas nuevas. **1) ** define la creación de un listado de términos **2) ** define el término **3) ** para establecer el contenido de la definición ● Manejo Bàsico de Imàgenes: pueden estar en el computador o ser descargadas. Primero se deben agregar las imágenes al directorio del trabajo. Se usa width=”núm” ● Hight -> hight=”num” ● Etiquetas y atributos para tablas: una tabla es un conjunto de celdas organizadas en filas (horizontales) y columnas (verticales); la intersección se llama celda. Se requieren:
El atributo border hace que el contorno de la tabla se agrande a medida que lo hace el valor numérico que le sigue. Si no se lo usa, el navegador tomará 0 por lo que no se verá. Para darle un mejor orden a las tablas:
Estas herramientas son útiles cuando se trabaja sobre el proceso de diseño de una pág. Nos permite manipular más fácilmente la tabla y su estructura dentro del código, diferenciando las diferentes partes. Para que los encabezados aparezcan resaltados, se cambia la etiqueta por **** Para combinar espacios, se utilizan =”” (sirve para combinar columnas) y =”” (para combinar filas). Se escriben en el interior de la etiqueta o .Ambos van acompañados de un número q corresponde a la cantidad de filas o columnas que se desean agrupar. Entidades HTML Hay dos maneras de codificar una entidad HTML
- a través del uso del “&” seguido del código o nombre de la entidad y terminada en punto y coma ( ; ). ej: &nombre_entidad;
- usando “&” , a continuación el numeral “ # ” y seguidamente el código o nombre de la entidad y terminada en punto y coma ( ; ). ej: &#número_entidad;
Caracter Código de la
Entidad
Nombre de
la Entidad
á à á
é é é
í í í
ó ó ó
ú ú ú
< < <
> > >
& & &
€ € €
" " "
Π Π Π
UNIDAD II Formularios, diagramación y semántica Formularios para capturar y decidir cada tipo de info de parte de los clientes y usuarios. Las etiquetas de formularios se dividen en 2 tipos
- Captura de información
- Enunciados Etiqueta form y sus atributos: El contenedor del formulario **** debe estar dentro de las etiquetas de cuerpo . Después de la etiqueta form podemos especificar otro par de etiquetas q sirven para resaltar nuestro formulario a través de bordes y asignar un título que luego se mostrará en la página. Estructura: ● envuelve todo el contenido, incluyendo la etiqueta (donde se escribe el título del formulario.
- xxx
- sirve para capturar datos de dif tipos (fechas;hs; números; textos; emails; etc) Form ofrece varios atributos, entre ellos autocomplete (auto-completar campos dentro de un formulario que ya se habían llenado), puede recibir dos valores “ON” y “OFF”, si no se especifica, el navegador asumirá x defecto el modo on y auto completará los formularios en los campos correspondientes; y, name, informativo, no desempeña ninguna función dentro del formulario, pero se utiliza cuando hay muchos formularios para distinguirlos. Cuando se crean los formularios, no es necesario especificar todos los atributos disponibles q ofrece la etiqueta form , solo usamos cada atributo dependiendo de la necesidad y función que desempeñe; tampoco es obligatorio agregar la etiqueta fieldset solo se recomienda si deseamos visualizar el título dentro de un recuadro. Etiquetas para captura de datos: Etiqueta input -> todos los tipos y funcionamientos ● Selección de color ● Feha ● Fecha Hora ● Fecha Hora Local ● Archivos planos, Word, Excel; etc ● Email ● Semana ● Números ● Rango de Números ● Búsqueda ● Teléfono ● Hora ● Dirección URL ● Semana ● Reset (sirve para limpiar el formulario) ● Botón HTML ● Envío del Formulario (para servidores y base de datos; para q cuando el formulario esté terminado se envía la info diligenciada a un lugar de almacenamiento y otros procesos necesarios)
Los input más importantes son:
- name -> especificar un nombre; diferenciar un campo de otro; y hacer referencia al nombre del dato q se pide.
- id -> lo poseen todas las etiquetas HTML; es utilizado para asignar una identificación única a un elemento en el DOM. También se utiliza para q el atributo form de los labels apunte hacia ese mismo nombre y así puedan asociarse
- disable -> sirve para deshabilitar un campo e impedir que se ingresen un datos. puede tomar dos valores “true o false”
- readonly -> no se puede habilitar, siempre permanece deshabilitado. Muestra cuadros de lectura que no se pueden editar
- maxlength -> número máximo de caracteres q el navegador puede ingresar
- max -> específica al navegador el valor máximo q se puede ingresar en el cuadro de entrada.
- min -> indica el valor mínimo a ser ingresado.
- value -> asigna un valor x defecto al elemento input es utilizado en caso de q la persona olvide de llenar el cuadro de entrada y se agrega un valor cualquiera.
- step -> cuando declaramos un elemento input de tipo number hay dos tipos de formas de llenar el campo. 1) escribiendo el num manualmente y, 2 flechas de incremento o decremento. Si no se especifica este atributo, el incremento y decremento se hará de una unidad. Sirve para especificar cuantas unidades se incrementarán o decrementarán.
- placeholder -> pista para el usuario sobre qué escribir en el input. Msj q aparece dentro del cuadro de texto mientras está vacío. Etiqueta select -> sirve para crear una lista desplegable de opciones. Para agregar opciones a la lista se debe definir la etiqueta option dentro de select. Etiqueta textarea ->es un área de texto q tiene un área de texto más grande q el input. Para escribir párrafos y comentarios u observaciones largas. Tiene 2 atributos especiales q sirven para definir el tamaño, ambas reciben valores numéricos y representar el número de filas y columnas q puede tener el textarea.
- rows
- cols Etiquetas de enunciados: son las q complementan las etiquetas anteriores; sirven para asignar un nombre a las entradas de texto o controles y le indican al usuario q se está solicitando en cada campo. Sirven tambien para tener un mejor control de la info y poder identificar qué dato se está solicitando.
- Etiquetas de título (h1-h6)
- Etiqueta em
- Etiqueta strong
- Etiqueta p
- Etiqueta b
- Etiqueta label (la más importante y la q mejor se relaciona con las etiquetas input) Cuenta con un atributo fundamental para asociarla a la etiqueta input (for -> el valor q se debe especificar es el correspondiente al nombre del dato q se ingresa) Según la necesidad del formulario se utilizarán algunas u otras. Todos los navegadores tiene su propia forma de crear sus pág HTML. www.caniuse.com -> para fijarme si el navegador soporta una etiqueta o no.
navegación de los usuarios hacia otras secciones de la misma pag; a páginas externas o a descargar archivos. Estos son los hipervínculos y se generan a partir de la etiqueta para crear una estructura de enlace básico se debe escribir “a” y apretar enter, entre la apertura y el cierre de la etiqueta se agrega el contenido q se mostrará en el navegador, y q se verá como un enlace donde el usuario hace click. En el atributo href, entre comillas se agrega el link o la dirección q tendrá el enlace. Si se quiere crear un enlace q lleve a un sitio específico en internet se deben emplear enlaces absolutos, es decir, direcciones completas q contenga protocolo, servidor y ruta ej: htttp//www.google.com Para evitar q el vínculo reemplace nuestra página se agrega el atributo target con el valor “_blank” asi se abrirá una nueva ventana. En caso de un sitio web específico conformado por una página principal, y un conjunto de pags, hay q usar referencias relativas para crear los hipervínculos. Si se quieren crear vínculos de la pag principal a otras internas primero se deben crear las pags interiores. Para crear el conjunto de enlaces que referencian las pag internas, para esto se incluyen los enlaces dentro de una estructura de lista no ordenada y los agregamos en cada elemento de la estructura. Como se requiere referenciar pags ubicadas en una estructura del directorio de nuestro computador, se debe usar referencias relativas. Estas no contienen la info completa de la ubicación del archivo, sino una ruta parcial determinada por la ubicación del archivo donde se crea el enlace. En las pags internas se deben crear un enlace para luego retornar a la pag principal. Se requiere crear un link en el archivo Pagina_1.html para q se vincule con el archivo principal. En este caso: enlace_a.html.
- se abre el archivo Pagina_1.html y agregamos una etiqueta de enlace q diga “volver” con una referencia relativa, teniendo en cuenta q el archivo desde donde se generará el enlace está ubicado en la carpeta html
- primero se indica en la ruta q es necesario salirse de esa carpeta es decir, q primero debemos ir a la raíz de la carpeta para luego referenciar el archivo principal. La forma usual empleada es usar dos puntos (..) -> Volver Para generar una estructura de navegación q funcione dentro de la misma página. En caso de tener mucho contenido se pueden usar anclas. Para aplicar este concepto, se agrega más info dentro de la página con las etiquetas “h2” y “p” de tal forma q los contenidos sobrepasen verticalmente el tamaño de la pantalla. Para mejorar la experiencia del usuario se pueden agregar un grupo de enlaces en la parte superior de la pag q permitan saltar rápidamente a los títulos del contenido y luego volver arriba. Primero se pondrán marcas en las partes del doc q vamos a llamar. en este caso se agrega el atributo id a las etiquetas h2. Enlace al final de cada contenido -> punto de referencia al inicio del doc - > para incluir esta marca se agrega una etiqueta a usando el atributo name con el valor inicio entre comillas. Al final de cada sección de contenido se agrega la etiqueta enlace con el valor numeral inicio (#inicio) Enlaces a partir de imágenes -> se utiliza la etiqueta “a” abarcando la etiqueta img y en el atributo href agregamos la dirección al cargar click. Para cargar la pag del enlace en una pag nueva debemos usar el atributo target. Los atributos alt y title en la etiqueta img deben usarse para q el navegador pueda mostrar info del contenido. Aunque no es lo óptimo, la etiqueta a puede servir para el envío de msj a través del
programa de correo q tengan instalado usando el protocolo “mailto”. en el enlace href se reemplazará el correo y el subjet. Atributo download permite disponer archivos de descarga para los usuarios. Etiquetas semánticas: son las encargadas de darle significado a las partes de una pagina web. Son una ayuda para q cualquier sistema capaz de procesar HTML pueda interpretar rápidamente y de manera clara su contenido. El motor de render de los navegadores analiza y muestra fácilmente los contenidos.
- Header -> cabecera del sitio, se situa el logo y título web
- Nav -> sección q contiene todos los enlaces de navegación a los df sitios de la página.
- Section -> usado para agrupar contenidos q hacen referencia a un mismo tema.
- Article -> representa cualquier contenido.
- Aside -> crea un submenú de navegaciones lateral.
- führer -> representa el pie de página donde ponemos info relacionada con los creadores, dirección, formas de contacto, etc. Las etiquetas semánticas no nos ofrecen el estilo en el navegador, no basta definirlas para q se ubiquen en cada parte, únicamente se utilizan para indicar las partes del doc. Para darle formato a la estructura se usa CSS. Etiquetas semánticas adicionales:
- especifica la parte principal de doc.
- muestra un extracto de la info, q al darle click se expande con el contenido dentro de
- indicar tiempo o fechas
- resalta palabras o frases. Etiquetas para diagramación, formato y código: Etiquetas de formato adicionales Las comunes son
, etc.Existen también varias etiquetas a tomar en cuenta: Etiqueta Descripción Etiqueta Descripción Para abreviaciones Énfasis En negrita Texto insertado Referencia de un texto Medida Cita Cita corta Texto eliminado (tachado) Texto importante Sub-índice Supra-índice Etiquetas de código Existen para cuando queremos representar el código fuente de nuestro HTML. ● se emplea para representar un código fuente usando un timpo de tamaño de letra, para proporcionar un formato adecuado a una pieza de programa de computación.
genera con procesos de la informática y con cualquier dispositivo de tipo digital.
- Vectoriales: Img digital formada x objetos geométricos independientes, definidos a partir de atributos matemáticos.
- Mapas de bits o ráster: formada x una matriz rectangular de píxeles o puntos de color. La cant de colores x pixel está determinada x la profundidad en bits. Son mucho más pesados x eso hay q comprimirlas para usarlas en la web. Contiene 2 valores: 1 o 0, q tmb se pueden interpretar como falso o verdadero o prendido o apagado. Es una unidad de info digital( 8 bits -> 256 valores posibles; 16 bits -> 65536 valores posibles)
- Compresión: x la facilidad de transporte de datos deben ser comprimidos a través de códec (es codificador-decodificador de una señal o flujo de datos digitales). Formatos de compresión:
- Lossy (compresión con pérdida) -> se aprovecha de las limitaciones de la percepción humana para la reconstrucción de la info.
- Lossless (compresión sin pérdida) -> después de un ciclo de compresión- expansión permite una reconstrucción exacta de los datos originales.
- Formatos de imagen digital: Vectores
- Propietarios: PS, EPS; DXF; WMF
- Libres: PDF; SVG Mapa de bits
- Sin comprimir: BMP; TIFF
- Comprimido: Raw; PNG; JPG; GIF; WebP
- Programas de edición: Vectores
- Propietarios: Ai; Corel Draw; Autodesk; SketchUp
- Libres: Inkscape; Karbon; Svg-edit; Inkpad Mapa de bits
- Propietarios: Ps; Corel Photopaint; Photoline
- Libres: Gimp; Krita; Paint.NET; MyPaint *Los colores sustractivos se representan en 32 bits y 4 canales. Y se requiere solo 8 bits para representar 256 colores de la escala de grises. Audio Digital es la codificación digital de una señal eléctrica q representa una onda sonora. Consiste en una secuencia de valores enteros y se obtiene de 2 procesos: 1) el muestreo;
- la cuantificación digital de la señal eléctrica. ● PMC: Técnica de transformación de audio analógico a digital sin ningún tipo de comprensión ● Proceso de digitalización del audio:
- Cuantificación digital -> Convierte las muestras a una sucesión de valores preestablecidos determinados x la resolución.
- Muestreo -> Consiste en tomar muestras de una señal analógica a una frecuencia o tasa de muestreo constante.
- Resolución -> Es el número de bits de info en cada muestre. ● Formatos de Audio Digital sin Comprimir: .aiff -> Audio Interchange File Format -> macintosh. .wav -> Microsoft / IBM
● Resoluciones de audio digital: Rango dinámico (DB) x Frecuencia (KHz) ● Formatos de audio digital comprimidos: Nombre de formato Códec compresión Bits x muestra Tipo compresión Tipo licencia MP3 MPEG-1 Audio Layer 3 Cualquiera Con pérdidas Propietario Ogg Vorbis Cualquiera Con pérdidas Libre WMA WMA 16,24 (modo sin pérdida / Cualquiera (modo con pérdidas) Con pérdidas / sin pérdidas Propietario ● Programas de Edición de Audio:
- Propietarios -> Au; FL STUDIO; Reaper; Sony Sound Forge
- Libres -> Audacity; LMMS; Ocenaudio; Qtractor Video Digital es un tipo de sistema de grabación de video q funciona usando una representación digital de la señal de vídeo, en vez de señal analógica. Un video digital es un tipo de archivo q normalmente consiste en un formato contenedor, q contiene “flujos” (stream) de datos de video y de audio comprimidos. ● Funcionamiento de los códecs: Compensación de movimiento -> el sistema busca si alguna parte de la img se repite en imágenes anteriores (frecuencia de ocurrencia). ● Contenedores multimedia: Nombre formato Contenedor Códec de Video Códec de Audio Licencia Desarrollado por WebM (.webm) Matroska VP8, VP9 Vorbis Royalty-free On2, Xiph, Matroska, Google Ogg (.ogv; .ogg) Ogg Theora Optus Libre Xiph.org MP4 MPEG-4 H.264 ACC, MP3 Propietario Moving Pictures Experts Groups ● Funcionamiento de los códecs de video Compensación de movimiento: El sistema busca si alguna parte de la imagen se repite en imágenes anteriores (frecuencia de ocurrencia).
- Aproximación de la seña l: Para reducir el bitrate de la señal al ser transmitida se hacen aproximaciones a la señal. ● Se envía la información: Busca el modo más eficiente para enviar la señal. + Bitrate : Es la cantidad de datos q se guardarán x unidad de tiempo, generalmente expresada en Mbps (Megabits x segundo, no confundir con megabytes). ● Resolución de pantalla: Es la cantidad de píxeles de una pantalla q está dada x la multiplicación de los valores del ancho y del alto. + Relación de aspecto (X:Y) : Es el valor q resulta de la división entre el ancho y el alto de una img.
- 3:2 o 15:10 -> usado x la NTSC
- 4:3 o 12:9 -> usado x PAL
- 5:4 -> 1280 x 1024
- 16:9 -> estándar usado x tv de alta definición
- 16:10 -> usado x portátiles
- 12:5 -> 35mm
Tiene como ventaja q permite especificar otros tipos de formato y ponerlos a disposición para q el navegador los tome como segunda opción. Tiene dos atributos q se utilizan para indicar la ruta y el nombre del video y el tipo de formato q tiene:
type=”...” atributo q debe ir con el nombre, video y slash (/) y luego el tipo de formato. Esto nos sirve para explicar q el source es un video
src=”...” Existen muchas herramientas para convertir un video en múltiples formatos. La etiqueta se utiliza para especificar múltiples formatos de audio, video o imágenes, que se pueden mostrar en caso de que algún formato no sea soportado por nuestro navegador.
Lección III -> Etiquetas para enlazar recursos externos
Etiqueta iframe: incrustar paginas externas dentro de la pag propia. El método para hacerlo es utilizar una etiqueta para crear un marco dentro de nuestra pag y hacer q al interior de ese marco muestre otro sitio web q puede ser externo. no se puede cargar el contenido Los atributos width y height están para dimensionar el marco. Antes de cerrar el atributo iframe escribimos una etiqueta por si el navegador no permite renderizar el contenido. El atributo name sirve para definir el nombre de la etiqueta iframe. Cuando se inserta un iframe hay q verificar el contenido q publicamos. Para evitar q se carguen contenidos q generen problemas de seguridad se agrega el atributo sandbox. El atributo “sandbox” tiene los sig valores posibles: ● sandbox=”allow-forms” -> permite q los formularios al interior del iframe envíen datos si el cliente completa la info q allí le solicite. En caso de no indicar este atributo, el cliente puede diligenciar el formulario q se encuentra en el iframe, pero cuando envíe los datos, el formulario no enviará ninguna info ingresada. ● sandbox=”allow-same-origin” -> permite q se ejecuten ventanas emergentes en caso de q el sitio q se cargue a través del iframe las contenga, de esta manera si el sitio q vemos en el iframe tiene ventanas emergentes, el navegador las ejecuta sin inconveniente. Si no indicamos este atributo y la pag alojada en el iframe tiene pop ups el navegador las bloqueará y las ejecutará. ● sandbox=”allow-scripts” -> permite q el sitio web ejecute códigos javascript del lado del cliente y la posibilidad de acceder a la web cam, nuestros archivos y demás dispositivos q tengamos conectados al computador. En caso de no indicarlo, el sitio alojado no ejecuta los códigos de este tipo. ● sandbox=”allow-top-navigation” -> se usa para permitir q el sitio alojado en el iframe a través de uno de sus enlaces pueda reemplazar nuestro contenido x otro propuesto x el mismo, es decir, contenido diferente al nuestro. Si omitimos esta línea evitamos este inconveniente. Recordemos q el atributo src especifica la ruta de lo q deseamos mostrar, junto a este atributo tenemos el srcdoc q permite agregar directamente al iframe código html. Una de las formas más comunes de usar un iframe es cuando queremos insertar algún contenido de pags como youtube, google maps o facebook, entre otras. Por ej: si queremos insertar un iframe para google maps, debemos buscar en google “iframe para google maps”, y apartir de esta búsqueda nos salen las instrucciones para hacerlo.
La etiqueta iframe puede contener el atributo allowfullscreen, q activa la opción de pantalla completa. Etiqueta script y link: sirven para integrar CSS y código JavaScript en nuestro código. Para enlazar CSS : ● Etiqueta
- para poner metainformación sobre nuestro espacio de trabajo. Asigna una descripción. Esta es importante para los motores de búsqueda.
- anteriormente con la etiqueta def, se definen elementos q pueden ser usados en cualquier parte del trabajo, y es aquí donde la etiqueta entra en uso. Debe hacer referencia al atributo xlink:href= al id del elemento q definimos dentro de defs.
- puede recibir muchos valores para formar un trazo dentro del cual pueden definirse líneas horizontales, verticales y curvas avanzadas. “d” es el atributo q recibe estos valores para formar el trazo. dentro del atributo “d” se pueden definir estos elementos: todos estos atributos reciben valores numéricos q corresponden a la orientación de los trazos seg su forma. ● M -> moveto: se utiliza para iniciar. ● L -> lineto ● H -> horizontal lineto ● C -> curveto ● S -> smooth curveto ● Q -> quadratic Bézier curve ● T -> smooth quadratic Bézier curveto ● A -> elliptical Arc ● Z -> closepath: se utiliza para finalizar y no recibe ningún valor
Lección III -> Herramientas SVG
Creación de SVG con herramientas online: Una manera facil de encontrar estas herramientas es generando una consulta en el navegador con las palabras clave “crear imagen SVG” o “convertir imagen a SVG”. Entre las opciones encontramos herramientas en linea gratuitas o de pago. SVG edit: herramienta q podemos trabajar en línea o descargarla. (https://github.com/SVG- Edit/svgedit). Creación de SVG con otras herramientas: funciones de la herramienta inkscape para la creación de archivos SVG. Esta es una app de código abierto para el manejo de imágenes vectoriales (inkscape.or/es/). Es para descargar e instalar. InkScape nos brinda un conjunto de herramientas q nos permite crear cualquier tipo de dibujo. Una vez terminado este dibujo se guarda y se abre en el programa de código para ver el código generado. También se puede tomar una imagen de la web y convertirla a SVG (usar imágenes sencillas y con pocos colores). Conversor de imágenes a SVG Canvas: es una etiqueta q permite definir un lienzo para dibujar imágenes usando algún lenguaje de script tal como JavaScript. Es una alternativa a SVG y generalmente se utiliza para generar gráficos dinámicos en el momento. También es usado para dibujar en 3D con una tecnología llamada WebGL.
