7.0 Crear entornos digitales a través del diseño de una red de aprendizaje para la comunicación y el intercambio de información mediante el uso de herramientas de procesamiento de información en la nube.
CONOCIMIENTO TECNOLÓGICO DE INTERNET
Se refiere a un conjunto de saberes dirigido a la creación, manipulación y evaluación de artefactos tecnológicos.
Es una forma de conocimiento que va más allá de la observación de los fenómenos existentes. Su interés está puesto en la creación de nuevos artefactos o sistemas y en la solución de problemas o necesidades a través de nuevos instrumentos tecnológicos.
Tiene como fundamento la inventiva y la innovación, ya que, está orientado a la fabricación de cosas que no existen. Artefactos posibles que están basados en principios naturales y científicos pero que requieren de la chispa creativa para volverse realidad.
Grandes hitos históricos han comenzado con el desarrollo de un dispositivo tecnológico. Una muestra de ello es la resolución industrial, cuando las máquinas llegaron para agilizar los procesos de producción, pero también para transformar toda la organización de la sociedad.
¿QUÉ ES HIPERTEXTO?
Es una herramienta de creación, enlace y distribución de información de diversas fuentes, que opera en base a una estructura no secuencial sino asociativa, es decir, no lineal, directa, sino que lleva de una cosa a otra, muy a la manera del pensamiento humano.
Esto se da mediante enlaces asociativos denominados hipervínculos o referencias cruzadas, que llevan de un documento principal a otro secundarios en los cuales es posible rescatar información suplementaria o complementaria. A esta dinámica se le denomina enlace o link, y es fundamental en el uso de Internet.
características:
ESTRUCTURA BÁSICA DE UN DOCUMENTO WEB O HTML
Todos los documentos HTML tiene la estructura que se muestra a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
BGCOLOR parametro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
TEXT, parámetro usado para definir el color del texto por omisión. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK. parámetros usados para especificar el color por omisión de: texto con enlace, enlace ya visitado y en lace activo.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
PROGRAMAS QUE PODEMOS UTILIZAR PARA EL DISEÑO DE UNA PÁGINA WEB
Editores WYSIWYG
Esta es una de las herramientas que conoces o que almenos haz escuchado mencionar desde hace tiempo. Se trata de un editor para crear páginas web. Si hablamos de ofrecernos posibilidades para armar algo de calidad, sin duda Dreamweaver se lleva a todos de gane. Sin embargo que crees, para poder sacarle el máximo provecho a esta herramienta, deberás contar con alguna buena cantidad de conocimientos en el desarrollo de página web o lenguajes de programación en web, tales como HTML o el mismísimo Javascript.
WebSite X5 Evolution
Es una alternativa pues no solamente se trata de una herramienta más económica, si no que cuenta con muchas ventajas por encima de Dreamweaver. Aunque obviamente esto va de acuerdo a las necesidades de cada quien, pues te aseguro que un programador como tal, seguirá dándole preferencia a su herramienta por encima de cualquier cosa.
Avanquest WebEasy Professional
Cuenta con mas de 600 plantillas para personalizar tus diseños, sin duda se vuelve una herramienta indispensable para quienes buscan algo más visual y sencillo, aunque nuevamente, con conocimientos para trabajar con una herramienta WYSIWYG.
Tiene una facilidad de uso, que sin duda es relativo por el conocimiento que puedas tener, pero además de eso, es mucho más barato que las herramientas anteriores, por lo que las ventajas se suman considerablemente. Así que vamos a ver las características de Avanquest, para ver que más nos ofrece.
WIX
Es uno de los editores online no solo más famosos de la actualidad, si no también uno de los más utilizados. Pero ¿Qué nos ofrece?. Bueno pues a cotinuacion vamos a ver que es lo que Wix nos ofrece y sobretodo a que precio, porque esto tambien es una parte que debemos analizar.
Una de las principales cosas por las que destaca Wix, es por su estupendo diseño, se podría decir que lo visual es lo suyo, por supuesto que es la parte por donde enamora a sus clientes y estos enseguida caen, aunque no es la mejor alternativa, como lo dije, al final del articulos les mostrare cual es el mejor.
Otras de las cosas por las cuales wix destaca, es por contar con una buena cantidad de animaciones y por suspenso, la posibilidad de adquirir aplicaciones en la app market, algo que otras plataformas de este tipo no tienen.
WEEBLY
Este programa tiene algunos problemas ya que este progrma sale demasiado caro, el precio por los dominios es realmente alto y no te aconsejara hacerte de un dominio de ellos. Las cuentas de correo no van integradas, de hecho ni una sola cuenta de correo electrónico estará disponible para usarse, no cuenta con un soporte en español, por lo que si llegas a tener un problema, seguramente se te hará muy complicado.
Su precio es en dolares, su paquete inicial se coloca en los 7,42 US, mientras que el mas alto es de 24,92 US.
ADMINISTRADOS DE SITIOS EN LA WEB
se aseguran de que la información del sitio web es correcta, segura y está actualizada. Trabaja estrechamente con diseñadores y programadores y con los departamentos de ventas y marketing.
Algunos administradores también diseñan y configuran los sitios. Se los conoced también como administradores web o webmasters.
Planifican y organizan el desarrollo técnico de uno o más sitios web. Esto puede incluir seleccionar el hardware y el software que permita a la empresa realizar negocios a traves de Internet.
Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente
Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente y de forma precisa y que está actualizado. Esto es clave ya que las organizaciones usan los sitios web para proporcionar un servicio y mostrar su imagen y su esencia.
El administrador también se encarga de que cualquier adición al sitio web sigue el estilo existente, por ejemplo, en términos de diseño, plantilla y estructura. Deben comprobar que toda la información nueva coincida con el estilo editorial existente y realizar cambios cuando se precie. Pueden emplear un sistema de gestión de contenido web para actualizar el sitio.
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:
Posicionamiento del texto
Se refiere a un conjunto de saberes dirigido a la creación, manipulación y evaluación de artefactos tecnológicos.
Es una forma de conocimiento que va más allá de la observación de los fenómenos existentes. Su interés está puesto en la creación de nuevos artefactos o sistemas y en la solución de problemas o necesidades a través de nuevos instrumentos tecnológicos.
Tiene como fundamento la inventiva y la innovación, ya que, está orientado a la fabricación de cosas que no existen. Artefactos posibles que están basados en principios naturales y científicos pero que requieren de la chispa creativa para volverse realidad.
Grandes hitos históricos han comenzado con el desarrollo de un dispositivo tecnológico. Una muestra de ello es la resolución industrial, cuando las máquinas llegaron para agilizar los procesos de producción, pero también para transformar toda la organización de la sociedad.
¿QUÉ ES HIPERTEXTO?
Es una herramienta de creación, enlace y distribución de información de diversas fuentes, que opera en base a una estructura no secuencial sino asociativa, es decir, no lineal, directa, sino que lleva de una cosa a otra, muy a la manera del pensamiento humano.
Esto se da mediante enlaces asociativos denominados hipervínculos o referencias cruzadas, que llevan de un documento principal a otro secundarios en los cuales es posible rescatar información suplementaria o complementaria. A esta dinámica se le denomina enlace o link, y es fundamental en el uso de Internet.
características:
- multimediaticos: no se limitan al texto escrito, sino que pueden enlazar con imagenes, sonidos, videos, etc.
- Digitales: el hipertexto es propio de la dinamica digital y cibernetica, es instransladable al papel u otro soportes, si bien la memoria humana parece funcionar de manera parecida.
- conectivos: todo hipertexto conduce a alguna parte de la web, excepto en los casos en que dicho enlace se haya quedrantado (archivos desaparecidos, páginas ya no disponibles, etc).
- Interactivos: requieren de la acción del usuario (por lo general, en sistemas operativos como Windows, de un clic del ratón o mouse) para operar, no se disparan de manera automática.
- reusables: un mismo hipertexto puede utilizarse infinitas veces.
- extensibles:permite prolongar la experiencia del lectura cono toros documentos y extenderse el enlace de la informacion disposibles para el usuario.
- transitorios: dado que los hipertectos son basicamente enlaces, su vigencia dependerá de que el destino al que conduzcan está disponible. A los hipevínculos suyo destino no está disponible se les conoce como "caídos" o "rotos".
ESTRUCTURA BÁSICA DE UN DOCUMENTO WEB O HTML
Todos los documentos HTML tiene la estructura que se muestra a continuación, aunque la etiqueta <body> puede ser sustituida por <frameset> para un tipo de páginas que dividen la ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Título de la página</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido de la página
</BODY>
</HTML>
Entre las etiquetas <html> y <head> se suelen colocar otras opcionales, como por ejemplo:
En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización.
<meta name="description" content="Información sobre el Centro,las enseñanzas que se pueden cursar, los departamentos didácticos">
<meta name="keywords" content="educación,enseñanza,instituto, profesores, alumnos">
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
BGCOLOR parametro usado para especificar el color de fondo de la página. El color se define como una terna de números (#rrggbb) en base hexadecimal en el orden rojo, verde, azul (Red, Green, Blue). También se puede usar el nombre en inglés de los colores predefinidos en los navegadores.
TEXT, parámetro usado para definir el color del texto por omisión. Su formato es el mismo que el de BGCOLOR. Si no se pone nada es negro.
LINK, VLINK, ALINK. parámetros usados para especificar el color por omisión de: texto con enlace, enlace ya visitado y en lace activo.
BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana si es pequeña (lo habitual).
PROGRAMAS QUE PODEMOS UTILIZAR PARA EL DISEÑO DE UNA PÁGINA WEB
Editores WYSIWYG
Esta es una de las herramientas que conoces o que almenos haz escuchado mencionar desde hace tiempo. Se trata de un editor para crear páginas web. Si hablamos de ofrecernos posibilidades para armar algo de calidad, sin duda Dreamweaver se lleva a todos de gane. Sin embargo que crees, para poder sacarle el máximo provecho a esta herramienta, deberás contar con alguna buena cantidad de conocimientos en el desarrollo de página web o lenguajes de programación en web, tales como HTML o el mismísimo Javascript.
WebSite X5 EvolutionEs una alternativa pues no solamente se trata de una herramienta más económica, si no que cuenta con muchas ventajas por encima de Dreamweaver. Aunque obviamente esto va de acuerdo a las necesidades de cada quien, pues te aseguro que un programador como tal, seguirá dándole preferencia a su herramienta por encima de cualquier cosa.
Avanquest WebEasy Professional
Cuenta con mas de 600 plantillas para personalizar tus diseños, sin duda se vuelve una herramienta indispensable para quienes buscan algo más visual y sencillo, aunque nuevamente, con conocimientos para trabajar con una herramienta WYSIWYG.
Tiene una facilidad de uso, que sin duda es relativo por el conocimiento que puedas tener, pero además de eso, es mucho más barato que las herramientas anteriores, por lo que las ventajas se suman considerablemente. Así que vamos a ver las características de Avanquest, para ver que más nos ofrece.
WIX
Es uno de los editores online no solo más famosos de la actualidad, si no también uno de los más utilizados. Pero ¿Qué nos ofrece?. Bueno pues a cotinuacion vamos a ver que es lo que Wix nos ofrece y sobretodo a que precio, porque esto tambien es una parte que debemos analizar.
Una de las principales cosas por las que destaca Wix, es por su estupendo diseño, se podría decir que lo visual es lo suyo, por supuesto que es la parte por donde enamora a sus clientes y estos enseguida caen, aunque no es la mejor alternativa, como lo dije, al final del articulos les mostrare cual es el mejor.
Otras de las cosas por las cuales wix destaca, es por contar con una buena cantidad de animaciones y por suspenso, la posibilidad de adquirir aplicaciones en la app market, algo que otras plataformas de este tipo no tienen.
WEEBLY
Este programa tiene algunos problemas ya que este progrma sale demasiado caro, el precio por los dominios es realmente alto y no te aconsejara hacerte de un dominio de ellos. Las cuentas de correo no van integradas, de hecho ni una sola cuenta de correo electrónico estará disponible para usarse, no cuenta con un soporte en español, por lo que si llegas a tener un problema, seguramente se te hará muy complicado.
Su precio es en dolares, su paquete inicial se coloca en los 7,42 US, mientras que el mas alto es de 24,92 US.
ADMINISTRADOS DE SITIOS EN LA WEB
se aseguran de que la información del sitio web es correcta, segura y está actualizada. Trabaja estrechamente con diseñadores y programadores y con los departamentos de ventas y marketing.
Algunos administradores también diseñan y configuran los sitios. Se los conoced también como administradores web o webmasters.
Planifican y organizan el desarrollo técnico de uno o más sitios web. Esto puede incluir seleccionar el hardware y el software que permita a la empresa realizar negocios a traves de Internet.
Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente
Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente y de forma precisa y que está actualizado. Esto es clave ya que las organizaciones usan los sitios web para proporcionar un servicio y mostrar su imagen y su esencia.
El administrador también se encarga de que cualquier adición al sitio web sigue el estilo existente, por ejemplo, en términos de diseño, plantilla y estructura. Deben comprobar que toda la información nueva coincida con el estilo editorial existente y realizar cambios cuando se precie. Pueden emplear un sistema de gestión de contenido web para actualizar el sitio.
Los administradores de sitios web pueden ser responsables de decidir dónde y cómo usará el sitio web contenidos multimedia, como fotografías, sonido, vídeos, gráficos y animaciones.
A menudo trabajan con los departamentos de comunicación, relaciones públicas y marketing. Deben procurar que el sitio web transmita la imagen adecuada a los clientes de la organización y que el sitio sea fácil de encontrar mediante los motores de búsqueda. Se aseguran de que el sitio web cumple con la ley y que es accesible para todos los usuarios, por ejemplo, facilitando una versión de texto ampliado o subtítulos en los videos.
Los administradores procuran obtener información de los usuarios del sitio web. Reúnen estadísticas mensuales que muestran cuánta gente ha visitado el sitio durante este tiempo y qué páginas y funciones han usado. Esta información ayuda a la empresa a comercializar sus servicios con mayor eficacia.
A menudo trabajan con los departamentos de comunicación, relaciones públicas y marketing. Deben procurar que el sitio web transmita la imagen adecuada a los clientes de la organización y que el sitio sea fácil de encontrar mediante los motores de búsqueda. Se aseguran de que el sitio web cumple con la ley y que es accesible para todos los usuarios, por ejemplo, facilitando una versión de texto ampliado o subtítulos en los videos.
Los administradores procuran obtener información de los usuarios del sitio web. Reúnen estadísticas mensuales que muestran cuánta gente ha visitado el sitio durante este tiempo y qué páginas y funciones han usado. Esta información ayuda a la empresa a comercializar sus servicios con mayor eficacia.
Los administradores son responsables de la
seguridad del sitio web. En una organización comercial, esto significa que deben asegurarse de que sólo las personas autorizadas pueden acceder a la información de los clientes como, por ejemplo, a direcciones de correo o a tarjetas de crédito.
Los administradores pueden supervisar o coordinar el trabajo de un equipo que puede incluir diseñadores, artistas, escritores, investigadores, programadores, desarrolladores y especialista multimedia. En una empresa pequeña, pueden encargarse ellos solos del diseño del sitio web, así como de su desarrollo y mantenimiento.
Algunos administradores trabajan en servicios de Internet (el uso de tecnologías de Internet y servicios de correo electrónico en una red interna, dentro de la empresa). Tratan con personas de la empresa y se preocupan de sus necesidades.
seguridad del sitio web. En una organización comercial, esto significa que deben asegurarse de que sólo las personas autorizadas pueden acceder a la información de los clientes como, por ejemplo, a direcciones de correo o a tarjetas de crédito.
Deben gestionar también los comentarios y las quejas de los usuarios del sitio. Se encargan de que los problemas o errores se subsanen lo antes posible y que se tengan en cuenta las sugerencias.
También deben asegurarse de que los diseñadores y programadores disponen de las herramientas específicas que necesitan, por ejemplo, para manipular fotografías o animar partes del diseño.
Los administradores también evalúan las necesidades de formación y desarrollo y pueden decidir, por ejemplo, que un formador externo visite la empresa.
¿QUE SON LOS ENLACES (VÍNCULOS) Y CUANTOS TIPOS HAY?
los Formatos
Para la web existen 4 formatos de imágenes: jpg, png, gif y svg. Cada uno tiene sus características y ventajas propias que voy a detallar. Optimizar una imagen significa guardarla en el formato más conveniente y logrando el menor peso posible del archivo final. El peso de los archivos en la web es importantes ya que influye en la velocidad de descarga del sitio, una variable que puede decidir si el usuario se queda o se va.
FORMATO JPG:
El formato JPG es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable (generalmente entre 40 y 60). Cuanto menos contraste de luces tenga la imagen, más compresión se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho más liviano.
El formato JPG es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable (generalmente entre 40 y 60). Cuanto menos contraste de luces tenga la imagen, más compresión se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho más liviano.
Las galerías de fotos se hacen con imágenes JPG. Si en mi boceto tengo planteada una galería de fotos que presento en miniaturas y al cliquear se amplían, esas imágenes no las exporto desde el boceto, sino que simplemente ahi decido el tamaño y la ubicación, pero el recorte definitivo lo hago desde Photoshop, con todas las imágenes abiertas, recortando y optimizando cada una en los dos tamaños (miniatura y ampliada).
Formato PNG:
La extensión PNG es la más usada para iconos o marcas. No pudo ser aprovechada durante muchos años ya que IExplorer no reconocía su mayor ventaja: la transparencia. Desde que los diseñadores dejamos de preocuparnos por las versiones anteriores al IE8, lo estamos aprovechando realmente. La transparencia de PNG a diferencia del GIF no tiene halo, logrando una calidad de imagen mucho mayor y simplificando el maquetado, permitiendo independizar las imágenes de sus fondos.
El PNG tiene dos opciones: PNG8 (con paleta de color reducida hasta 256 colores) y el PNG24 ideal para transparencias.
GIF:
El GIF comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. En el momento de guardar una imagen como gif, los más importante es decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.
Los archivos GIF permiten seleccionar áreas transparentes en el momento de exportar. La imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados) o suavizados con halos de color diferente al fondo. Para esto se utiliza la opción Mate que permite seleccionar el color similar al fondo.
Actualmente este formato sólo se usa para animaciones simples.
SVG:
Es el único formato vectorial y por lo tanto escalable para web con la enorme ventaja que eso significa para hacer un sitio adaptable.
Se está empezando a usar recién ahora ya que el IE8 no lo reconoce. El archivo SVG se guarda directamente desde Illustrator y el resultado es un archivo que se puede ver en el navegador, pero que también se puede abrir en el Sublime porque es puro código. Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje javascript.
ETIQUETAS PARA INSERTAR TABLAS, INSTRUCCIONES HTML Y VIDEOS
VIDEOS:
En esta lección aprenderemos a insertar o colocar imágenes con código HTML, y también veremos cómo hacer que esa imagen tenga un enlace.
Llego el momento de insertar nuestra primera imagen con HTML, la etiqueta que sirve para agregar imágenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imagen.
Para insertar una imagen lo haremos así:
<img src="ubicación"
Donde SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato:PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
ALT:
El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:
algunos navegadores pordrían estar impostados para no invocar las imágenes;
los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario;
es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
WIDTCH Y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de las que realmente tiene la imagen. En cualquier caso, es aconsejable insertar imágenes con su tamaño efectivo sobre todo si están en formato GIF, dado que, cuando se cambian las medidas, este formato pierde mucha calidad.
BORDER:
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
HSPACE Y VSPACE
Con estos dos atributos podemos establecer la distancia en píxel de la imagen a los objetos que se encuentran a los cuatro lados de la misma.
HSPACE define la distancia de los lados derecho e izquierdo de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.).
VSPACE define la distancia de los lados superior e inferior de la imagen a los objetos más cercanos (texto, imágenes, apliques, etc.). La sintaxis correcta es
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Obra de K. Haring">
Estos atributos resultan útiles cuando queremos distanciar la imagen de los objetos más cercanos.
ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen.
ALIGN=middle: alinea la primera línea del texto con el centro de la imagen.
ALIGN=bottom: alinea la primera línea de texto con la parte inferior de la imagen.
ALIGN=left: el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.
ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.
IMAGENES COMO ENLACES
Para utilizar una imagen como enlace a otra parte de la pagina o a otra página, simplemente hay que introducirlas dentro de la etiqueta <A HREF> de la siguiente manera:
<A HREF>="enlace"><IMG SRC="imagen"> </A>
IMAGENES COMO FONDE DE UN DOCUMENTO
Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML. La manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>.
La imagen de fondo en general será más pequeña que el área de documento del navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen que hemos elegido como fondo del documento.
A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento debe ser legible por encima de la imagen, por lo que hay que evitar colocar imágenes con colores demasiado fuertes.
Un ejemplo de la inclusión de imágenes en HTML es el siguiente:
<html>
<head>
<title>Los seres vivos</title>
<head>
<body>
<body background="nubes11.jpg">
<center>
</body>
<body>
<center>
REINO ANIMAL
</center>
<p><i><b>Se calcula que al Reino Animal pueden pertenecen cerca de un millon de especies. Debido a este enorme número se ha hecho una clasificación muy minuciosa de todos estos especímenes. Se han clasificado en: Esponjas, Celenterados, Cteneforos, Plantelmitos, Nematodos, Rotiferos, Moluscos, Anelidos, Artropodos, Equinodermos y Cordados.</p></b>
<align="left">
<p><b>Esponjas: Se considera que la evolución de las esponjas ha sido mínima. Por eso se piensa que su apariencia actual bien podría ser la misma que tuvieron hace cientos de miles de años. Estos organismos poseen numerosas cavidades que se comunican a través de redes tubulares que terminan en un gran número de poros. Se han podido contar cerca de 5.000 especies existentes. Uno de los usos que le proporciona el hombre es el de producto de limpieza o artículo de tocador.</p></b>
<align="left">
<center>
<img src="esponjas-de-mar.jpg">
</center>
<p><b>Celenterados: Esta especie animal presenta organismos con simetría radial. Digieren alimentos gracias a una cavidad que poseen en su interior. Los Celenterados acostumbran asociarse en grandes colonias a las cuales se les denomina corales. A las especies de los celenterados se les ha dividido en tres clases: Hydrozoa, Scyphozoa y Anthozoa.</p></b>
<align="left">
<center>
<img src="image004.jpg">
</center>
<p><b>Los Cteneforos: La apariencia externa de los cteneforos es muy parecida a la que presentan las medusas de los celenterados, hoy día sólo existen cerca de 100 especies.</p></b>
<align="left">
<center>
<img src="Medusas y Ctenoforos.jpg">
</center>
<p><b>Los Platelmitos: La gran mayoría de esta especie son parásitos que habitan ya sea en agua dulce o salada, pero también pueden observarse en tierra húmeda. Una especie de los platelmitos que podemos mencionar son los gusanos planos, también los gusanos parásitos que viven en el hombre y en los animales y las tenias que son parásitos cuyo cuerpo es alargado y con forma de cinta.</p></b>
<align="left">
TABLAS
Las tablas son una de las herramientas más útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora de organizar con tablas nuestras páginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque están "ocultas".
Pero no todo es coser y cantar a la hora de trabajar con tablas, ya que a veces actúan un poco "a su aire", por lo que podemos llegar a desesperarnos al pasar varias horas intentando que una tabla se comporte como nosotros queremos.
Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar información, no como una ayuda para el diseño gráfico de la página, ya que en esa época el lenguaje y las páginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolución, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una página web como un medio global para transmitir no solo texto plano, si no tambien contenidos gráficos y multimedia.
Para solucionar estas carencias hace falta conocer bien todas las etiquetas y atributos de que disponemos para la creación de tablas, así como unos cuantos truquillos que veremos más en el desarrollo de este capítulo.
Estructura de una tabla
Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado esuna columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.
| columna 1 | columna 2 | columna 3 | ||||||||||
| fila 1 |
| |||||||||||
| fila 2 | ||||||||||||
| fila 3 | ||||||||||||
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo , el esquema de etiquetas sería el siguiente:
| <TABLE> | |||||||||||||
| <TR> |
| </TR> | |||||||||||
| <TR> | </TR> | ||||||||||||
| <TR> | </TR> | ||||||||||||
| </TABLE> | |||||||||||||
Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
La cantidad de celdas debe ser el mismo en cada uno de las filas, para que la tabla tenga la misma cantidad de columnas. Se debe definir la cantidad de columnas que va a tener la tabla mediante el número de celdas que definamos en la primera fila.
La visualización de una tabla se genera automáticamente a partir de las filas y las columnas definidas. Sin embargo para un navegador no es fácil interpretar a tiempo como debe aparecer la tabla. Primero tiene que leer la tabla completa antes de poder visualizar alguna cosa. En caso de tablas muy grandes eso puede conducir a que en la pantalla aparecen espacios vacios desagradables mientras que la página se carga. HTML 4.0 ofrece una nueva sintaxis para comunicarle al navegador al principio de la tabla cuantas columnas ella tiene. De tal manera el navegador puede cargar la tabla mucho más rapido, o sea que una parte de la tabla es visualizada antes de que la totalidad de la tabla haya sido leída. Esto se debe implementar mediante el atributo COLGROUP.
ENLACES A LAS TABLAS:
Hay dos tipos principales de enlaces que se pueden añadir a una celda de una tabla:
• A la propia celda:
Justo antes de cada <td> añadiremos la etiqueta de enlace en HTML <a href="URL_del_enlace"> y después de cada </td> añadiremos la etiqueta fin del enlace </a>.
• Al contenido de la celda:
Justo después de cada <td> añadiremos la etiqueta de enlace en HTML <a href="URL_del_enlace"> y antes de cada </td> añadiremos la etiqueta fin del enlace </a>.
DIMENSIONANDO LA TABLA
Las etiquetas que definen la tabla admiten diferentes parámetros para lograr el correcto dimensionamiento de las celdas y de los bordes que forman la tabla. También es posible especificar la separación que debe existir entre el texto y el borde de la tabla.
Los parámetros que rigen estas características son los siguientes:
| Parámetro | Etiqueta | Significado |
| width | <table> <td> | Anchura total de la tabla o anchura de la celda. Puede especificarse en % o en pixels. |
| height | <td> | Altura de la celda. Puede especificarse en % o en pixels. |
| cellspacing | <table> | Separación entre celdas. |
| cellpadding | <table> | Separación entre el texto y el borde de la celda. |
El parámetro height se especifica para el tag <td> que define una celda, pero afectará siempre a toda la fila. Por otra parte, podríamos especificar anchuras de celdas incoherentes (dando diferente anchura a celdas de una misma columna, o haciendo que la suma de las anchuras no coincida). Todos estos errores suelen ser asumidos por los navegadores sin problemas, pero hay que tener cuidado, ya que la forma en la que visualizan una tabla errónea diferirá entre navegadores de distintos fabricantes.
Jugando con los parámetros anteriores podemos ya modificar la tabla del ejemplo anterior para obtener diferentes presentaciones. Veámoslo con algunos ejemplos:
- Aumentamos la anchura (por defecto, la anchura de cada celda se adapta al texto de la misma), y la separación entre celdas:
<table width="60%" cellspacing="5" cellpadding="0">
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>
<tr>
<td>Fila 1, celda 1</td>
<td>Fila 1, celda 2</td>
</tr>
<tr>
<td>Fila 2, celda 1</td>
<td>Fila 2, celda 2</td>
</tr>
</table>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
- Anchura y altura de la primera columna diferentes de la de la segunda, y mayor espacio entre el texto y el borde de la tabla:
<table width="80%" cellspacing="0" cellpadding="5">
<tr>
<td width="80%" height="70">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
<tr>
<td width="80%" height="70">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
Como se observa en los ejemplos anteriores, nos falta todavía ejercer control sobre la posición que ocupa el texto dentro de cada celda.
Para estos menesteres existen una serie de parámetros que detallamos a continuación, y que se aplican al tag <td>:
| Parámetro | Significado |
| align | Alineación horizontal. Puede tomar los valores left (izquierda), center(centro) y right (derecha). |
| valign | Alineación vertical. Puede tomar los valores top (superior), middle (central),botton (inferior) y baseline (línea de base). |
Jugando con estos parámetros podemos modificar el ejemplo anterior para que el texto de la primera celda esté en la parte inferior de la misma, y alineado a la derecha:
<table width="80%" cellspacing="0" cellpadding="5">
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%">Fila 2, celda 1</td>
<td width="20%">Fila 2, celda 2</td>
</tr>
</table>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
BORDES Y COLORES
Para terminar esta introducción al mundo de la creación de tablas en HTML, sólo nos falta indicar cómo podemos mejorar el aspecto de nuestras tablas.
Lo primero que querremos hacer es jugar con la anchura del borde. Para ello se ha definido el parámetro border de la etiqueta <table>, que define la anchura de todos los bordes de la tabla en pixels. Si se especifica con valor 0, el borde no se visualiza.
El color del borde lo controla el parámetro bordercolor, que se aplica al tag <td>. Este parámetro toma valores hexadecimales o nombres de colores predefinidos, según el alfabeto inglés. La forma en que se indica un color con código hexadecimal es la misma que se utiliza para otros elementos de una página (por ejemplo, para el color de fondo).
Finalmente, también podemos modificar el color de fondo de cada celda de forma independiente, aplicando el parámetro bgcolor al tag <td>. Los colores se especifican de igual forma.
Con todo esto, podemos mejorar el aspecto del ejemplo anterior de la siguiente forma:
<table width="80%" cellspacing="0" cellpadding="5" border="4">
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%" bgcolor="#FFCCCC">Fila 2, celda 1</td>
<td width="20%" bordercolor="red">Fila 2, celda 2</td>
</tr>
</table>
<tr>
<td width="80%" height="70" align="right" valign="bottom">Fila 1, celda 1</td>
<td width="20%" height="70">Fila 1, celda 2</td>
</tr>
<tr>
<td width="80%" bgcolor="#FFCCCC">Fila 2, celda 1</td>
<td width="20%" bordercolor="red">Fila 2, celda 2</td>
</tr>
</table>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
MULTIMEDIA
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">
La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
VIDEO Y AUDIO
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada.
A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.
A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.
Para insertar el vídeo anterior, se podría escribir:
<embed src="varios/cotorra.avi" autostart="false" loop="true">
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.
Para insertar el archivo de audio anterior, se podría escribir:
<embed src="varios/audio.mid" autostart="false" loop="true">
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
O también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >
PLUG-IN´S
Plug-in es un programa que extiende las capacidades del navegador de Netscape en un modo específico, dado por ejemplo la capacidad de mostrar vídeo, audio, ficheros de un determinado formato (ficheros PDF, presentaciones de ASAP, fichero VRML, etc ...).
No existe actualmente un conjunto estándar de plug-in´s para cada tipo de ficheros, sino que existen diversas aplicaciones, realizadas por diversos fabricantes, y no todas de libre distribución. Se puede asegurar que todas las aplicaciones serán compatibles y si por ejemplo se referencia un fichero de sonido en formato .wav en su página, este podrá ser oído por todos aquellos que tengan un plug-in para este tipo de ficheros.
Para que un fichero multimedia que es incluido en una página sea visible por el usuario debe cumplir dos condiciones: la primera es que posea el navegador de Netscape en su versión 2.0 y la segunda es que tenga el plug-in correspondiente que trata el fichero deseado. Por tanto se recomienda un uso moderado de los plug-in´s utilizando ficheros que sean de formatos comunes y un uso complementario en una página, ya que muchos usuarios no podrán verlo. Es aconsejable incluir un enlace en el que se referencia el fichero, de esta forma un usuario podrá seguir el enlace y ver el fichero en un visualizado externo si lo posee.
QUE ENTIENDO POR NUBE
Comentarios
Publicar un comentario