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.
Diseño de pagina web
- Conocimiento tecnológico de Internet
El conocimiento tecnológico 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.
Este tipo de conocimiento nace de la curiosidad, de un problema para resolver o una necesidad que requiere satisfacción. Por eso es fundamental en el desarrollo de la sociedad y tiene un gran impacto sobre ella.
Grandes hitos históricos han comenzado con el desarrollo de un dispositivo tecnológico. Una muestra de ello es la Revolució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.
El hipertexto en informática 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.
El hipertexto, a pesar de su nombre, no se limita a información escrita o textual, sino que puede enlazar con imágenes, sonidos, documentos audiovisuales, páginas Web enteras o cualquier otra forma de acción digital (enviar un e-mail, descargar un archivo, etc.). A la convivencia de este tipo de formatos se la suele denominar hipermedia.
¿Cual es la estructura básica de un documento Web o HTML?
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página.
Para verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en el botón derecho => ver código fuente, y verás así el código HTML de la página:
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
- ¿Que programas podemos utilizar para el diseño de una pagina web?
Si bien, para crear páginas web, existen infinidad de programas y herramientas, la realidad es que son muy pocos aquellos que se acoplan a las necesidades de las personas con pocos y escasos conocimientos en desarrollo web. Esta fue una de las principales razones por las que en OK Hosting, decidimos desarrollar OK Builder.
Su objetivo es claro, que tú y otras personas que no se dedican precisamente al desarrollo web, puedan tener como alternativa, una herramienta intuitiva, versatil, novedosa, pero con el poderío de las herramientas a nivel profesional.
Adobe Dreamweaver
Si bien es cierto, que Dreamweaver no ofrece una gran cantidad de ventajas, cuenta con un ambiente gráfico, es compatible con Windows y Mac. La realidad es que no deja de ser un software de paga, el cual trabaja mediante una licencia, debe estar instalado en tu computadora y desde ahí deberás trabajar. Talvez te suene bien, sin embargo no es precisamente lo que la tendencia marca en el software actual. Así que vamos a ver cual es el número 2.
WebSite X5 Evolution
Ahora bien. Si Dreamweaver se nos complica, por lo que mencioné acerca del conocimiento en dos lenguajes indispensables, entonces posiblemente WebSite X5 Evolution sea la alternativa que necesitas para Crear Páginas Web. 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
Como puntos favorables de Avanquest, podemos mencionar la 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.
- ¿Que es un administrador de sitios en la web?
Los administradores de sitios web son los responsables de los sitios web de internet.
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.
Alguno administradores también diseñan y configuran los sitios. Se los conoce también como administradores web o webmasters.
Los administradores de sitios web 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 través de Internet (el denominado comercio electrónico).
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.
- ¿Que son los enlaces (vínculos) y cuantos tipos hay?
Tipos de enlaces
Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html
Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto.html el código sería así:<a href="contacto.html">Contáctenos</a>.El texto que queda encerrado entre las etiquetas <a> es lo que ve el usuario en color azul y subrayado.
Enlaces externos
Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro, tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que conviene copiarla del navegador. En este caso, es común usar el atributo target=""que nos permite abrir el enlace en una pestaña nueva. Por ejemplo, si quisiera poner un vínculo a Google y que éste abra en pestaña nueva, sería así: <a href="http://google.com" target="_blank">Ir a Google</a>
Enlaces internos: anclas
Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios casos, por ejemplo en una página de preguntas frecuentes donde las respuestas están desarrolladas debajo de las preguntas, o en Wikipedia, cuando el texto es extenso el menú tiene vínculos con anclas. También en los textos largos, al finalizar muchas veces se coloca un botón para subir. En los sitios de una sola página donde los botones en realidad hacen scroll, esas son anclas.
El punto de destino tiene que estar marcado con el atributo id="algo" y en el enlace se coloca un # (numeral) seguido del nombre. Por ejemplo:<a href="#respuesta4">Pregunta 4</a>"salta" a este párrafo: <p id="respuesta4">acá está escrita la respuesta</p>
Enlaces para ampliar una imagen
Es común armar una galería de fotos con imágenes miniaturas que vinculan a imágenes ampliadas. Si combinamos este recurso con código javascript, logramos galerías de fotos muy atractivas. El código HTML es así:<a href="imagenes/foto1-ampliada.jpg"><img src="imagenes/foto1-miniatura.jpg" alt="descripción de la foto"></a> El navegador le muestra al usuario la foto miniatura y si cliquea en ella, le muestra la foto ampliada.
Enlaces para descargar archivos
En realidad, dentro del atributo href="" podemos colocar la ruta hacia cualquier tipo de archivo. Si el navegador reconoce la extensión, lo abre por ejemplo: html, jpg, png, gif, svg, pdf, etc. Pero si no lo reconoce o es un archivo comprimido (.rar, .zip), el navegador le ofrece al usuario descargarlo. Ejemplo:
<a href="fotos.rar">Descargá todas las fotos</a>
Enlaces a una dirección de correo
Se puede vincular una dirección de correo para que abra en el programa de correo predeterminado. El código se escribe así:<a href="mailto:info@dominio.com">Consúltenos a info@dominio.com</a>
Este recurso está bastante cuestionado por dos razones: primero porque muchos usuarios utilizan correo webmail (Gmail, Yahoo, Hotmail) por lo que este enlace no les sirve (incluso molesta) y segundo porque les estamos facilitando a los robots que encuentren nuestro correo y lo incluyan en una base de datos para spam.
- ¿Cuales son los tipos de formatos de imágenes compatibles con la web?
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.
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.
Formato 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.
Formato 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.
- ¿Cuales son las etiquetas para insertar tablas, instrucciones HTML y vídeos?
Imágenes
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.
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:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
WIDTH 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.
USO DE IMÁGENES 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>
IMÁGENES COMO FONDO 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 |
| celda(1,1) | celda(1,2) | celda(1,2) |
| celda(2,1) | celda(2,2) | celda(2,3) |
| celda(3,1) | celda(3,2) | celda(3,3) |
|
| 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> |
| <TD>...</TD> | <TD>...</TD> | <TD>...</TD> |
| <TD>...</TD> | <TD>...</TD> | <TD>...</TD> |
| <TD>...</TD> | <TD>...</TD> | <TD>...</TD> |
| </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.
Añadiendo 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>
| 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>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
Posicionamiento del texto
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>
| Fila 1, celda 1 | Fila 1, celda 2 |
| Fila 2, celda 1 | Fila 2, celda 2 |
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>
| 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>.
Vídeo y audio <embed>
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 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.
La nube o computación en la nube concepto conocido también bajo los términos informática en la nube, nube de cómputo o nube de conceptos, del inglés Cloud computing, es un paradigma que permite ofrecer servicios de computación a través de Internet.
En este tipo de computación todo lo que puede ofrecer un sistema informático se ofrece como servicio, de modo que los usuarios puedan acceder a los servicios disponibles “en la nube de Internet” sin conocimientos (o, al menos sin ser expertos) en la gestión de los recursos que usan.
La definición de la nube puede parecer poco clara, pero, básicamente, es un término que se utiliza para describir una red mundial de servidores, cada uno con una función única. La nube no es una entidad física, sino una red enorme de servidores remotos de todo el mundo que están conectados para funcionar como un único ecosistema. Estos servidores están diseñados para almacenar y administrar datos, ejecutar aplicaciones o entregar contenido o servicios, como streaming de vídeos, correo web, software de ofimática o medios sociales.
Las empresas utilizan cuatro métodos diferentes para implementar recursos en la nube. Hay una nube pública, que comparte recursos y ofrece servicios al público a través de Internet; una nube privada, que no se comparte y ofrece servicios a través de una red interna privada, normalmente hospedada en el entorno local; una nube híbrida, que comparte servicios entre nubes públicas y privadas, según su finalidad; y una nube comunitaria, que comparte recursos solo entre organizaciones, por ejemplo, con instituciones gubernamentales.
- ¿Como puedes crear una red social?
Actualmente existen más de 350 redes sociales públicas a nivel mundial, algunas de ellas tienen detrás un desarrollo tecnológico grande y constante que les permite contar con funciones atractivas para los usuarios; por su parte otras apenas pueden mantener su plataforma línea por falta de recursos.
El crecimiento tan acelerado que tuvo Facebook en los últimos años, aunado a la historia de Mark Zuckerberg que antes de los 30 años se volvió millonario, ha impulsado a que muchos desarrollen plataformas que pretenden superar todo eso, pero ninguno de ellos lo ha logrado, incluidos Google con G+, Yahoo con Meme y Microsoft con SoCL.
Algunas empresas, sobre todo las grandes están empezando a crear sus propias redes sociales privadas, como una opción para resolver problemas de comunicación entre los empleados, ya que estas plataformas permiten una vinculación más cercana y menos intrusiva para sus integrantes, lo cual eventualmente se ve reflejado en un mejor rendimiento y productividad.
Aunque existen aun más herramientas de vinculación en Internet, no todas son redes sociales, para diferenciarlas creo que vale la pena explicar qué es una RS, comparto mi propia definición:
“Las Redes Sociales son plataformas basadas en Internet que permiten la interacción entre personas por medio de un perfil individual”
Actualmente hay herramientas que permiten la creación de redes sociales de una forma fácil y en algunos casos incluso gratis, lo cual facilita considerablemente el proceso, permitiendo enfocar los esfuerzos hacia temas como la imagen, promoción y la calidad en los contenidos.
Herramientas para crear Redes Sociales
A continuación incluyo 6 herramientas que permiten la creación de redes sociales en Internet, algunas están pensadas para redes empresariales o privadas y otras pueden servir para empresas o también a nivel personal. Dentro de las opciones que incluyo, unas de ellas son de paga y otras son gratuitas.
Spruz
Esta plataforma está pensada para crear redes sociales temáticas y puede servir para empresas o particulares.
Cuenta con versión gratuita y de paga
Yammer
Esta es una de las plataformas más completas para crear redes empresariales privadas, ya que ofrece todas las funciones que necesita una organización para mejorar su comunicación.
Zyncro
Esta es una de las plataformas más fáciles de utilizar, gracias a que cuenta con una interfaz limpia y sencilla. Permite la creación de grupos, comunicación directa entre integrantes, asignación de tareas para grupos específicos. Tiene una función de microblogging donde se pueden compartir mensajes cortos a la comunidad y funciona muy parecido a los post de Facebook.
Cuenta con versión gratuita y de paga
SocialEngine
Esta opción cuenta con todo un arsenal de opciones para crear redes sociales de distintos tipos y estilos, permite elegir las funciones para adaptarla a lo que se requiere, y la configuración es muy fácil y rápida. Se pueden crear blogs, mensajeros instantáneos, grupos, foros, espacios para compartir música o video, eventos y encuestas.
Es de paga
Elgg
Esta es una de las plataformas más populares, ya que es open source, lo cual permite que desarrolladores externos ofrezcan plugins o aditamentos para enriquecer la experiencia del usuario.
Es gratuita
Esta opción contiene varias herramientas incluidas que permiten crear una red con elementos conocidos en otras plataformas, por ejemplo los foros de discusión, los Wikis o los Blogs.
REDES SOCIALES.
Las redes sociales son sitios de Internet formados por comunidades de individuos con intereses o actividades en común (como amistad, parentesco, trabajo) y que permiten el contacto entre estos, de manera que se puedan comunicar e intercambiar información.
Los individuos no necesariamente se tienen que conocer previo a tomar contacto a través de una red social, sino que pueden hacerlo a través de ella, y ese es uno de los mayores beneficios de las comunidades virtuales.
Tipos de redes Sociales
Si se quisiera clasificar a las redes sociales, podría hacerse según su origen y función:
- Redes genéricas: Son muy numerosas y populares (como Facebook o Twitter).
- Redes profesionales: Como LinkedIn, que involucran individuos que comparten el ámbito laboral o que buscan ampliar sus fronteras laborales y pueden ser abiertas o cerradas.
- Redes temáticas: Relacionan personas con intereses específicos en común, como música, hobbies, deportes, etc., siendo la más famosa Flickr (temática: fotografía).
En general, ingresar en una red social es muy sencillo, ya que simplemente implica rellenar un cuestionario con datos personales básicos y así obtener un Nombre de usuario y una Contraseña, que le servirán al usuario para ingresar de manera privada a la red. Mientras el usuario cumpla los requisitos para el registro en dicha red (por ej. mayoría de edad), podrá hacerlo sin inconvenientes.
o restaurar
