Fundamentos web paq

1. INFORMACIÓN GENERALCentro de Formación: Provincial San José -ISER

Provincial Central Sede Faria

XX

Programa de formación: Tecnología en Redes y Sistemas CODIGO 7321

Nombre del Equipo EjecutorNombre del instructor ejecutor:

Oscar Mauricio Flórez Delgado Omar Becerra Lizarazo

2. IDENTIFICACIÓN DELPROCESO DE NIVELACIONNombre de la proceso de aprendizaje: INTRODUCCIÓN AL DISEÑO WEBDuración (días):Competencias a desarrollar:

1. Dar las bases necesarias a nuestros profesionales para que puedan solucionar gran cantidad de inconvenientes con conceptos básicos aprendidos en esta materia.

2. El estudiante estará en Capacidad de herramientas básicas para Administrar grandes volúmenes de información en una estación de trabajo y realizar configuraciones básicas en ella. Adicionalmente manejar las diferentes herramientas de Internet para la correcta utilización de las aplicaciones Web.

Resultados de aprendizaje relacionados: UNIDAD 1 INTRODUCCION.

¿Qué es internet? ¿Quién y cómo se crea información en internet? Características de Internet. ¿Qué se puede hacer en internet? Consultar información. Chat listas. Formación Descargar archivos. Formatos de archivos. Servidores de internet: correo, FTP. Como conectarse a internet

UNIDAD 2. NAVEGADORES. Introducción Internet Explorer Elementos de la pantalla inicial. Barra de direcciones Herramientas estándar Favoritos y agregar favoritos. Menú herramientas y paginad e inicio Opciones de internet, seguridad. Manejo básico del navegador.

UNIDAD 3 BUSCADORES. ¿Qué es un buscador? Tipos de buscadores ¿son necesarios los buscadores?. Empecemos a buscar en google Buscador Yahoo Altavista, Lycos, Excite. Buscadores hispanos y europeos. Como buscar eficientemente.

UNIDAD 4 el correo y el chat Introducción y el funcionamiento del correo. Los programas de correo. Outlook Express La barra estándar. Redactar La libreta de direcciones. Opciones Mensajería instantánea El chat y tipo de chats Mensajería instantánea

UNIDAD 5 INTRODUCCION AL HTML Conceptos básicos de HTML Código básico de una página web. Dando formato al texto de una pagina Código HTML para crear enlaces Dentro de la misma pagina Con otras páginas del usuario Interactuando con páginas de internet Insertar imágenes en páginas web.

3. DESARROLLO DEL PROCESO DE APRENDIZAJE por unidadFASE 1 Entrega del material al estudiantado

FASE 2Explicación de los temas por parte del instructorEstudio del material por parte del estudiantadoRealización de talleres teórico prácticos.

FASE 3 Desarrollo de una página webFASE 4 Quiz y evaluación final.

4. ACTIVIDADES Y EVIDENCIAS DEL ESTUDIANTADO

ACTIVIDAD DE APRENDIZAJE

ESTUDIANTE

Para el desarrollo de la actividad tenga en cuenta los siguientes parámetros de trabajo:

• Lea los conceptos básicos de la INTRODUCCION AL DISEÑO WEB suministrada por el instructor.

• Conocer e identificar el funcionamiento de una página web y como intervienen los buscadores y navegadores.

• Identificar el hardware y software para tener una conexión a internet.• Identifique las los correos y chat más usados.• Desarrollar las guías prácticas dadas por el instructor.• Desarrollar y entregar una página web funcional.• Presentar evaluaciones y examen final.

UNIDAD 1 INTRODUCCION. ¿Qué es internet? ¿Quién y cómo se crea información en internet? Características de Internet. ¿Qué se puede hacer en internet? Consultar información. Chat listas. Formación Descargar archivos. Formatos de archivos. Servidores de internet: correo, FTP. Como conectarse a internet

¿Qué es internet?

Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, lo cual garantiza que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se estableció la primera conexión de computadoras, conocida como Arpanet, entre tres universidades en California y una en Utah, Estados Unidos.Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web (WWW o la Web), a tal punto que es habitual la confusión entre ambos términos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. Esta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisión.Existen, por tanto, muchos otros servicios y protocolos en Internet, aparte de la Web: el envío de correo electrónico (SMTP), la transmisión de archivos (FTP y P2P), las conversaciones en línea (IRC), la mensajería instantánea y presencia, la transmisión de contenido y comunicación multimedia telefonía (VoIP), televisión (IPTV), los boletines electrónicos (NNTP), el acceso remoto a otros dispositivos (SSH y Telnet) o los juegos en línea.

¿Quién y cómo se crea información en internet?

La información disponible en Internet está en los servidores. Los servidores o Hosts permiten que se acceda a su información a través de Internet.La información en los servidores está organizada de forma escalonada.Cada servidor proporciona diferente tipo de información.

Hoy en día, es muy fácil publicar en Internet, prácticamente sólo hace falta saber escribir. Aunque hay que utilizar el lenguaje HTML, hay programas que permiten escribir páginas Web sin saber HTML.

Características de Internet.

Universal Internet está extendida prácticamente por todo el mundo. Desde cualquier país podemos ver información generada en los demás países, enviar correo, transferir archivos, comprar, etc. 

Fácil de usar No es necesario saber informática para usar Internet. Podríamos decir que usar Internet es tan sencillo como pasar las hojas de un libro, sólo hay que hacer clic en las flechas avanzar y retroceder. 

Variada En Internet se puede encontrar casi de todo, y si hay algo útil que falte, el que se dé cuenta se hará rico. 

Económica Si piensas lo que te costaría ir a varias bibliotecas y revisar 100 libros, o visitar varias tiendas para buscar un producto y lo comparas con lo que te cuesta hacer lo mismo en Internet el ahorro de tiempo y dinero es impresionante. 

Útil Disponer de mucha información y servicios rápidamente accesibles es, sin duda, algo útil. Hay muchos ejemplos sobre cosas que son más fáciles a través de Internet. 

Libre Hoy por hoy cualquiera puede colocar en Internet información sin censura previa, esto permite expresar libremente opiniones, y decidir libremente qué uso damos a Internet. Es algo importante que permite que las personas se sientan más libres y tengan más capacidad de reacción frente a los poderes establecidos. Pero también facilita el uso negativo de la red. Por ejemplo, la creación y dispersión de virus informáticos, de conductas antisociales, etc.

Anónima Podemos decir que ocultar la identidad, tanto para leer como para escribir, es bastante sencillo en Internet. Esta característica está directamente relacionada con el punto anterior, ya el anonimato puede facilitar el uso libre de la red con todo lo que esto conlleva. Entendido de forma positiva en anonimato facilita la intimidad y la expresión de opiniones. Aunque también facilita la comisión de delitos.

Autoreguladora ¿Quién decide cómo funciona Internet? Algo que tiene tanto poder como Internet y que maneja tanto dinero no tiene un dueño personal. No hay ninguna persona o país que mande en Internet. En este sentido podemos decir que Internet se autorregula o autogestiona. La mayoría de las reglas que permiten que Internet funcione han salido de la propia Internet.

Un poco caótica Después de lo dicho en el punto anterior parece un contrasentido decir que Internet es caótica. Es caótica en el sentido que no está ordenada ni tiene unas reglas estrictas de funcionamiento que permitan asegurar que todo funciona correctamente, fundamentalmente en el aspecto del contenido.

Insegura La información de Internet viaja de un lugar a otro a través de la línea telefónica. Por lo tanto es posible interceptar una comunicación y obtener la información. Esto quiere decir que se puede leer un correo y obtener el número de una tarjeta de crédito.

Crecimiento vertiginoso Realmente Internet es un fenómeno que va a cambiar muchas cosas en la forma en que las personas se comunican y hacen negocios. Este cambio quizás no sea tan rápido como algunos dicen, pero puede que sea más profundo de lo que algunos piensan. Entre las investigaciones realizadas en el año 2003; el estudio de Nua, uno de los más específicos, habla de que Europa está a la cabeza de los continentes con 190 millones de usuarios. Asia guardaría el segundo lugar con 187 millones, mientras que Estados Unidos y Canadá obtendrían 182 millones. Con resultados significativamente distantes estarían a la cola América Latina con 33 millones, África con 6,3 millones y Oriente Medio con 5 millones de usuarios.

¿Qué se puede hacer en internet?

La red Internet ofrece muchos servicios útiles para particulares y empresas. Entre otras cosas nos permite:

o Utilizar el e-mail o correo electrónico, para intercambiar mensajes de correo de una forma sencilla y muy rápida, sin importar en qué parte del mundo estén los usuarios.

o Dar a conocer nuestro negocio o actividad al mundo, mediante el servicio World Wide Web, el cual, mediante páginas multimedia (texto, gráficos y sonido) proporciona un escaparate permanente para presentar nuestra empresa o actividad.

o Crear nuestros propios servicios, desde donde podemos ofrecer información directa sobre nuestros productos, ofertas y servicios.

o Gracias a las páginas Web de otras empresas, podemos encontrar posibles colaboradores para futuros negocios.

o Establecer un sistema de comunicación para las sucursales de una misma empresa. La red Internet proporciona un medio de transporte de datos económico que puede ser utilizado para intercambiar información entre diferentes sedes o sucursales de una empresa global.

o Buscar información para hacer una tarea o trabajo. Podemos conectar con los servidores de información de proveedores para conocer detalles de sus productos, datos técnicos y obtener demostraciones de sus productos (versiones de evaluación de software, ficheros de vídeo de ordenador con demostraciones o tutoriales ...)

o Tener acceso a los servicios de Banca Electrónica. La mayoría de los Bancos ofrecen servicios como consulta de cuentas, fondos de inversión, operativa con tarjetas o transferencias a través de la red Internet.

o Ahorrar tiempo en las relaciones con la Administración gracias a los servicios que ésta ofrecerá en un futuro inmediato (Hacienda).

o Comprar artículos y servicios de todo tipo en tiendas repartidas por todo el globo.o Leer artículos en publicaciones electrónicas de todo tipo.o Conocer las noticias más importantes de diversos países, mediante el acceso a las

versiones electrónicas de los principales diarios del mundo.o Acceso online a los movimientos de la bolsa.o Tener acceso a cientos de miles de bases de datos con información sobre temas

diversos, desde la literatura hasta la ciencia, desde los negocios hasta el entretenimiento.

o Tener acceso a cientos de miles de programas para su ordenador, desde juegos hasta tratamientos de textos.

Consultar informaciónLa gran cantidad y diversidad de información disponible en la red no está organizada para facilitar de alguna manera su recuperación. Tendremos, por tanto, que utilizar varios métodos para buscar y recuperar información, dependiendo de lo que estemos buscando.

Usando una dirección específica de Internet

Para ello necesitas utilizar un Navegador de Internet (los más usados son Mozilla Firefox, Netscape e Internet Explorer).

Usando Directorios o Índices de Materias

Un directorio es, básicamente, una lista alfabética de materias que puede ser ampliamente subdividida hasta llegar a los recursos que se almacenan en el directorio. En Internet podemos encontrar este tipo de servicios que nos ayudarán a encontrar colecciones de enlaces de recursos en Internet sobre una materia. La mayoría ofrecen un motor de búsqueda para interrogar al sistema.

Usando Motores de Búsqueda

Los motores de búsqueda son superordenadores que están continuamente rastreando la Web y construyendo un gigantesco índice con todas las páginas que encuentra y su contenido. Normalmente no existen criterios de selección de los ficheros incorporados a la base de datos de estos motores. Son apropiados para buscar sitios específicos.

En la actualidad existen muchos motores de búsquedas de carácter general o especializado. Aunque normalmente su lenguaje de interrogación es el Inglés los hay también centrados en el ámbito hispano cuyo idioma, lógicamente, es el español. Destacan Google, Altavista, Excite, Lycos, Yahoo!

Usando Bases de Datos

Los motores de búsqueda y los directorios no pueden buscar en toda la red. En Internet existe mucha información útil que sólo aparece si buscamos en bases de datos accesibles a través de ésta. Es lo que se conoce como «web invisible» Estas bases de datos, que no pueden ser indizadas por los motores de búsqueda, están mantenidas normalmente por instituciones académicas o gubernamentales e incluyen información de referencia y sobre todo artículos de revistas.

Chat listas.El chat permite conversar utilizando un dispositivo móvil o una computadora que tenga conexión de Internet para poder enviar y recibir mensajes al momento.El chat se puede clasificar en tres tipos: Chats basados en la web son foros virtuales que permiten enviar y recibir mensajes en

tiempo real a todos los participantes de un salón de chat o chatroom. Una sala de chat se suele dedicar a un tema en particular, como películas, deportes, tecnologías emergentes, entre otros.

Chat en tiempo real conocidos como “mensajería instantánea“, ofrece a los usuarios la posibilidad de comunicarse en tiempo real con personas que se han añadido a un grupo de personas conocidas. Para empezar a chatear sólo tienes que descargar el software

respectivo y crear una cuenta. Los participantes del chat realizan una conversación a través de mensajes de texto, videos, imágenes o audio. Son ejemplos de mensajería instantánea facebook chat, Windows Messenger y Yahoo messenger.

IRC son las siglas de Internet Relay Chat este tipo de chat es la forma más antigua y más conocida de chat que existe. IRC permite la comunicación entre dos o más personas que se encuentren conectadas al mismo servidor y salón de chat. IRC se diferencia de chat en tiempo real en que las conversaciones se centran en un tema particular. Ejemplos de IRC son ICQ y mIRC.

Descargar archivos El uso más común del término descarga está relacionado con la obtención de contenido de Internet, donde un servidor remoto recibe los datos que son accedidos por los clientes a través de aplicaciones específicas, tales como navegadores. De hecho, el acceso de cualquier información en Internet (por ejemplo, una página web, por ejemplo) se lleva a cabo mediante la descarga antes de su contenido (texto, imágenes, etc.) y posterior visualización del contenido que está disponible de forma local en el dispositivo. Sin embargo, el uso común del término (no técnico) del término descarga se limita a referenciar el contenido que es obtenido a través de Internet para su posterior visualización (offline), como un documento o aplicación.Subir o bajar es la transferencia de datos desde un host local a otro equipo o a un servidor. En caso de que ambos estén en red, se puede usar un servidor de FTP, HTTP o cualquier otro protocolo que permita la transferencia.

Formatos de archivosUn formato de archivo es un estándar que define la manera en que está codificada la información en un archivo. Dado que una unidad de disco, o de hecho cualquier memoria solo puede almacenar en los bits, la computadora debe tener alguna manera de convertir la grande información a ceros y unos y viceversa. Hay diferentes tipos de formatos para diferentes tipos de información. Sin embargo, dentro de cada tipo de formato, por ejemplo documentos de un procesador de texto, habrá normalmente varios formatos diferentes.

Ejemplos de formatos de Documento

PDFODTDJVUWIKIBZIP2DOCDOCXEPSXLS

XLSXMKVAMVPPTPPTXDPFTEXODPRTF

SWFTXTODSHTMLASTDVICSV

Ejemplos de formatos de audioAACMP3MP3ProVorbisRealAudio

VQFWMAAIFFFLACWAV

MIDImkaOGG

Ejemplos de formatos de imagenJPEGILBM

PNGBMP

TIFFHD Pro

JPG GIF.

Ejemplos de Formatos de videoASFavi.mov

m4vIFFOgg

OGMMatroska (mkv)3GP

Formatos de empaquetado y compresióntarzipRAR ARJ

gzip

bzip2

afiokgb

Servidores de internet: correo, FTP.

POP3 y SMTP: hay servidores especializados en correos electrónicos o e-mails. Estos utilizan los protocolos POP3 y SMTP para recibir los correos de nuestro servidor en nuestro cliente, o para enviar desde nuestro cliente un correo al servidor de otro cliente. Aunque hay diversos tipos de protocolos estos son los más utilizados. Un protocolo no es otra cosa que “una forma de hacer algo”.

FTP: acrónimo de File Transfer Protocol o Protocolo de transferencia de archivos. Es un protocolo utilizado para la transferencia de archivos entre un cliente y un servidor, permitiendo al cliente descargar el archivo desde el servidor o al servidor recibir un archivo enviado desde un cliente. Por defecto FTP no lleva ningún tipo de encriptación permitiendo la máxima velocidad en la transferencia de los archivos, pero puede presentar problemas de seguridad, por lo que muchas veces se utiliza SFTP que permite un servicio de seguridad encriptada.

DENOMINACIÓN DEL SERVIDOR DESCRIPCIÓN

Servidor de Correo Es el servidor que almacena, envía, recibe y realiza todas las operaciones relacionadas con el e-mail de sus clientes.

Servidor ProxyEs el servidor que actúa de intermediario de forma que el servidor que recibe una petición no conoce quién es el cliente que verdaderamente está detrás de esa petición.

Servidor Web

Almacena principalmente documentos HTML (son documentos a modo de archivos con un formato especial para la visualización de páginas web en los navegadores de los clientes), imágenes, videos, texto, presentaciones, y en general todo tipo de información. Además se encarga de enviar estas informaciones a los clientes.

Servidor de Base de Datos

Da servicios de almacenamiento y gestión de bases de datos a sus clientes. Una base de datos es un sistema que nos permite almacenar grandes cantidades de información. Por ejemplo, todos los datos de los clientes de un banco y sus movimientos en las cuentas.

Servidores Clúster Son servidores especializados en el almacenamiento de la

información teniendo grandes capacidades de almacenamiento y permitiendo evitar la pérdida de la información por problemas en otros servidores.

Servidores DedicadosComo ya expresamos anteriormente, hay servidores compartidos si hay varias personas o empresas usando un mismo servidor, o dedicados que son exclusivos para una sola persona o empresa.

Servidores  de imágenes

Recientemente también se han popularizado servidores especializados en imágenes, permitiendo alojar gran cantidad de imágenes sin consumir recursos de nuestro servidor web en almacenamiento o para almacenar fotografías personales, profesionales, etc. Algunos gratuitos pueden ser:

www.imageshack.us, www.theimagehosting.com,www.flickr.com de Yahoo, o picasaweb.google.com de Google.

Como conectarse a internetAcceso a Internet o conexión a Internet  es el mecanismo de enlace con que una computadora o red de computadoras cuenta para conectarse a Internet, lo que les permite visualizar las páginas web desde un navegador y acceder a otros servicios que ofrece esta red. Se puede acceder a internet desde una Conexión por línea conmutada, Banda ancha fija (a través de cable coaxial, cables de fibra óptica o cobre), WiFi, vía satélite, Banda Ancha Móvil y teléfonos celulares con tecnología 2G/3G/4G. Las empresas que otorgan acceso a Internet reciben el nombre de proveedores (ISP).

UNIDAD 2. NAVEGADORES. Introducción Internet Explorer Elementos de la pantalla inicial. Barra de direcciones Herramientas estándar Favoritos y agregar favoritos. Menú herramientas y paginad e inicio Opciones de internet, seguridad. Manejo básico del navegador

Introducción

Un navegador web o explorador web (del inglés, navigator o browser) es una aplicación software que permite al usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML, desde servidores web de todo el mundo a través de Internet. Esta red de documentos es denominada World Wide Web (WWW). Cualquier navegador actual permite mostrar o ejecutar gráficos, secuencias de vídeo, sonido, animaciones y programas diversos además del texto y los hipervínculos o enlaces.

La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un

software servidor web). Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

Clases de navegadores

INTERNET EXPLORER MOZILLA FIREFOX NETSCAPE NAVIGATOR SAFARI OPERA KONQUEROR IBROWSE GOOGLE CHROME

Estos navegadores funcionan de la misma manera, lo que los diferencia son los servicios que presta de acuerdo a la utilidad que se le da, por ejemplo para los programadores les gusta utilizar mucho el MOZILLA FIREFOX, ya que este permite instalar complementos de programación.

Internet Explorer

Internet Explorer (anteriormente llamado Windows Internet Explorer y Microsoft Internet Explorer), y conocido comúnmente como IE, es un navegador web desarrollado por Microsoft para el sistema operativo Microsoft Windows desde 1995. Es el navegador web más utilizado de Internet desde 1999, con un pico máximo de cuota de utilización del 95% entre el 2002 y 2003. Sin embargo, dicha cuota de mercado ha disminuido paulatinamente con los años debido a una renovada competencia por parte de otros navegadores, logrando aproximadamente entre el 30% y 54% en 2012, y aún menos, cuando logra ser superado por Google Chrome, dependiendo de la fuente de medición global. La situación empeora cada vez más en el 2012 cuando tuvo un bajón del 53% al 33% con respecto al 2011 y en 2013 hasta el momento su cuota sigue en descenso con un 27% de la cuota hasta el momento.

Elementos de la pantalla inicial.

BARRA DE DIRECCIONES: contiene la dirección URL de la página actual. Tiene las

opciones de búsqueda , detener , actualizar , desde la barra de direcciones podrás buscar directamente en internet. Para hacerlos podemos escribir palabras o conceptos a buscar. PESTAÑAS: te permitirán abrir más de una página web en la misma ventana. Seleccionando una u otra podrás ir alternándolas de modo que en el área de la página web se muestre el contenido de aquella que hayas seleccionado. Para facilitar la identificación del contenido de cada una de ellas, cada pestaña indica el título y el logo de la web que muestra.

ADELANTE Y ATRÁS: El botón Atrás permite volver a la última página visitada. Cada vez que se pulsa este botón se vuelve un paso más atrás. Es la acción más habitual, por eso el botón tiene un tamaño ligeramente superior.

Con el botón Adelante puedes avanzar lo que antes hayas retrocedido.

BARRA DE HERRAMIENTAS: La barra de herramientas se ha visto reducida considerablemente en la versión Internet Explorer 9. El diseño minimalista pretende ofrecer funcionalidad, dejando sólo a la vista los botones que más se utilizan y ganando así espacio para el área de la página web.

Encontramos a favoritos Inicia un panel que muestra las páginas que hayamos marcado como favoritas y que permite conservarlas y consultarlas sin tener que recordar sus direcciones.

En el botón Herramientas   contiene el comando Opciones de Internet que veremos en profundidad en el siguiente apartado, y estos otros comandos interesantes que pasamos a describir brevemente.Menú Imprimir: permite ver una vista previa de impresión

de la página actual, así como lanzar su impresión.Menú Archivo: permite realizar algunas opciones como

ver la página a pantalla completa (también con F11) o buscar dentro de la página (CTRL+F), etc.

Menú Zoom: permite agrandar o reducir la forma en que se muestra el contenido en el navegador, sin modificar el tamaño de la ventana.

Menú Seguridad: en él encontramos distintas herramientas de seguridad, que permiten, por ejemplo, eliminar el historial del navegador.

Ver descargas: al descargar un archivo de internet al equipo, se muestra en un listado de descargas que nos permite controlar cuánto falta para que la descarga finalice, o cuál fue el último archivo descargado, así como ejecutarlo. Desde aquí podemos abrir el archivo descargado y gestionar el listado.

Opciones de InternetAl hacer clic en Opciones de Internet del botón Herramientas se nos mostrará un cuadro de diálogo donde encontraremos muchas de las opciones más importantes a la hora de trabajar con Internet Explorer

Pestaña General Tiene cinco bloques. Página principal, Historial de exploración, Búsqueda, Pestañas y Apariencia.

Pestaña seguridad En esta pantalla podemos configurar el nivel de seguridad que deseamos en nuestras conexiones.

En la parte superior tienes cuatro opciones según quieras configurar el acceso a Internet o a una intranet local, también puedes definir sitios de confianza y restringidos.

Pestaña contenido: Aquí tenemos cinco áreas. Control parental, Asesor de contenido, Certificados, Autocompletar y Fuentes.

Pestaña conexiones: Aquí podemos definir las conexiones que utilizamos para conectarnos a Internet, aunque lo más normal es hacerlo desde el menú Inicio, Panel de control , Conexión a redes.

Pestaña Programas: Desde esta pantalla podemos definir qué programas se arrancarán cuando desde IE queramos editar una página HTML, enviar un correo, ver un grupo de noticias, etc. Lo que ocurre es que sólo podemos especificar programas de Microsoft.

Pestaña Opciones avanzadas: Aquí se muestran muchas características de IE que se pueden cambiar. No vamos a citarlas todas pero hay posibilidad de indicar que no se muestren las imágenes, animaciones y vídeos directamente, sino que haya que hacer clic en el lugar que ocupan. También se puede activar que se impriman los colores de fondo de la página web.

Página principal inicio

La página principal es la página que se muestra al arrancar el navegador. Al pulsar este icono iremos directamente a ella, sea cual sea la página que estemos visitando. La definimos desde el menú Herramientas → Opciones de Internet.

AREA DE TRABAJO: es la zona donde reside el contenido de la página web. Ya sabes que, como la mayoría de las ventanas de Windows, la ventana de IE se puede variar de tamaño. Sólo tienes que hacer clic en el botón Restaurar de la esquina superior derecha y ajustar el tamaño arrastrando desde los márgenes de la ventana.La mayoría de las páginas web están diseñadas para adaptar el contenido al tamaño de la ventana, cuando la ventana es tan pequeña que algunas imágenes ya no caben aparecen automáticamente unas barras de desplazamiento horizontales que permiten mover la ventana a izquierda/derecha para ver el contenido. Las barras de desplazamiento verticales suelen estar siempre presentes.

UNIDAD 3 BUSCADORES. ¿Qué es un buscador? Tipos de buscadores ¿son necesarios los buscadores?. Empecemos a buscar en google Buscador Yahoo Altavista, Lycos, Excite. Buscadores hispanos y europeos. Como buscar eficientemente.

¿Qué es un buscador?

Hubo un tiempo, al comienzo de Internet en los años 90, en que buscar algo por la red de redes era una tarea agotadora y aburrida, ahora las cosas han cambiado. Normalmente uno se sorprende de lo fácil y rápido que resulta buscar información.

A veces resulta muy gratificante encontrar algo que ni siquiera sabíamos que existía y que supera nuestras expectativas. Es uno de los motivos por los que Internet engancha a la gente. Es como encontrarse frente a un gigantesco basurero y en la primera patada encontrar un diamante.

Claro que antes hay que saber buscar en Internet, y eso es lo que intentaremos explicar en esta unidad.

El proceso de búsqueda, a groso modo, siempre es el siguiente:

Acceder a un buscador.Escribir la palabra o palabras clave en su correspondiente caja de búsqueda.Pulsar el botón Buscar o la tecla INTRO.

Y con esos sencillos pasos tendremos a nuestro alcance un gran listado de resultados entre los cuales, muy probablemente, encontraremos lo que necesitamos.

En esta unidad ampliaremos la información sobre los buscadores y su entorno. Presentaremos varios motores de búsqueda de distintas empresa y daremos interesantes consejos, para profundizar en su utilización.

Tipos de buscadoresAunque algunos buscadores utilizan conjuntamente varios de los métodos que vamos a describir a continuación resulta útil distinguir cada forma de buscar.

Buscadores por palabras clave.Son los buscadores más comunes, el usuario introduce una palabra clave y el motor del buscador examina su base de datos para mostrar las páginas encontradas. Por ejemplo, Google, Yahoo y Bing.

Buscadores por categorías.Estos buscadores están organizados por temas de forma que al elegir un tema nos muestra otra pantalla con más temas sobre el tema que hemos elegido, así sucesivamente podemos llegar a ver las páginas que existen sobre un tema muy concreto. Es como un árbol de categorías, se empieza por la raíz y se va avanzando hacia las hojas. Por ejemplo, Deportes → Deportes extremos → Deportes extremos → Parapente → Vuelo libre. Es decir en estos buscadores se puede buscar eligiendo categorías en lugar de introducir palabras claves.

Metabuscadores.Se podrían llamar también buscadores múltiples ya que realizan varias búsquedas simultáneas en los demás buscadores y muestran los resultados ordenados por buscador

Buscadores específicos.Son buscadores que sólo contienen información sobre un tema concreto, por ejemplo, buscadores de legislación, buscadores de libros, etc. También incluimos en este tipo las páginas recopilatorios de páginas web sobre temas concretos, por ejemplo de recursos gratis.

¿son necesarios los buscadores?Si comparamos Internet a una gigantesca biblioteca, donde cada libro representa un servidor, no habría forma de colocar los libros en las estanterías de forma que respondiesen a un orden lógico. Ni dentro de cada libro se podrían ordenar los capítulos que lo forman. Puesto que un servidor puede contener páginas de diferentes temas, y que dentro de un tema las páginas están agrupadas de distinta forma. Si tomamos una página cualquiera de Internet pueden darse diferentes situaciones, desde que sea una página aislada, a que esté relacionada con millones de páginas.

Así como cuando se cataloga un libro existe una clasificación de materias aceptada mundialmente dentro de la cual se ubica el libro, en Internet no existe esto. Lo más parecido son las categorías de algunos buscadores como Yahoo, Altavista, etc, pero incluir una página en estos buscadores es algo voluntario por lo que no todas las páginas de Internet están incluidas.

Otro factor a tener en cuenta es que las páginas son dinámicas, es decir, pueden modificarse, crearse y destruirse sin previo aviso. Además están en diferentes idiomas. Y para acabarlo de poner difícil la naturaleza de las páginas es muy variada, pueden contener texto, gráficos, imágenes, sonido, vídeo, programas, etc.

Dado este aparente caos, es fácil suponer que pronto surgieran herramientas que intentasen poner un poco de orden y facilitar la localización de la información. También es fácil adivinar que estas herramientas se hayan convertido en algo imprescindible.

Hoy nadie puede imaginarse una Internet sin los buscadores. Actualmente los buscadores hacen su tarea de forma increíblemente eficaz. Pueden buscar lo que se te ocurra en muy poco tiempo y de forma precisa. También hay que reconocerles algunas limitaciones, por ejemplo, no son capaces de buscar las páginas generadas dinámicamente mediante ASP, PHP, Java, etc., puesto que las páginas no existen hasta el momento en que se solicitan. Tampoco son capaces de buscar dentro de las bases de datos accesibles desde Internet ya que cada una requiere un formulario específico.

De todas formas, en general, podemos decir que la mayor parte de la información disponible en Internet está accesible a través de los buscadores de forma rápida y fácil. Así que no hay problema, Internet puede seguir creciendo en la forma como lo ha hecho hasta ahora y nosotros seguiremos encontrando lo que buscamos.

Empecemos a buscar con Google

Vamos a ir viendo las características y manejo de los buscadores a partir de un ejemplo. Espero que así resulte más claro.

Empezaremos por uno de lo mejores buscadores que existe, el Google. Para arrancarlo teclea http://www.google.com o http://google.com en la barra de direcciones de tu navegador. O simplemente teclea "google" en el buscador que utilizas habitualmente, si no te aparece la dirección del buscador Google en la primera posición ya puedes ir pensando en cambiar de buscador.

Una vez arrancado, esta es la pantalla inicial del Google. El primer detalle a tener en cuenta es que Google detecta el idioma de tu sistema operativo y te presenta la pantalla en ese idioma. En nuestro caso en Español.

Al contrario que sucede en otros buscadores la pantalla del Google es muy simple. Tiene un cuadro de texto central donde tecleamos lo que queremos buscar. El botón para iniciar la búsqueda "búsqueda en Google" y alguna otra cosa más que iremos viendo.

Vamos a realizar nuestra primera búsqueda.

Hemos oído que hay un programa para buscar en Internet que se llama algo parecido a "Copernico". Escribimos "Copernico" y hacemos clic en el botón "Búsqueda en Google".

Aparece una pantalla como la que puedes ver en la página siguiente. Si haces lo mismo en tu ordenador el resultado puede ser diferente ya que la base de datos de Google va cambiando cada día.

Hay una línea con fondo azul que nos da los datos de la búsqueda. Nos dice varias cosas:

1. El objeto de la búsqueda y dónde se ha buscado. "Se buscó copernico en la Web."

2. El número de páginas que ha encontrado, y que nos está mostrando desde la 1 a la 10. "Resultados 1.10 de aproximadamente 22.500." ( En la imagen que ves sólo se ven las tres primeras páginas encontradas para ahorrar espacio )

3. El tiempo que ha tardado en realizar la búsqueda. Aunque parezca mentira ha tardado 0,14 segundos en encontrar las diez primeras páginas que contienen la palabra Copernico entre más de 1.200 millones de páginas que hay en su base de datos, además nos dice que hay en total 22.500 páginas con la palabra Copernico.

Vemos que las páginas que ha encontrado están en Italiano ( lógico ya que Copernico era italiano ) si nos interesan sólo en español, hacemos clic en la opción "Buscar sólo páginas en español" y hacemos de nuevo clic en el botón "Búsqueda en Google". Esto es lo que aparece.

Ahora ya hay más resultados interesantes, pero primero vamos a detenernos en ver cómo se muestran cada uno de los resultados de una búsqueda.

Primero aparece en color azul y subrayado el título de la página encontrada. Luego aparecen los fragmentos del texto de la página encontrada que contienen las palabras buscadas. Las palabras que estamos buscando aparecen en negrita. En este caso son "copernico" y "buscador". En último lugar, en letra verde, aparece la dirección de la página (URL).

Cuando aparecen varias páginas del mismo sitio web la segunda y siguientes aparecen con una sangría, como puedes ver en el segundo resultado ya que tanto el primer y segundo resultado pertenecen al sitio www.latinfund.net.

Al final de la página tienes una línea que te permite desplazarte por todas las páginas de resultados, como puedes ver en esta imagen. Puedes ir a la Siguiente página de resultados,a la Anterior, o directamente a un número de página de los que se muestran. En este ejemplo, el número 2 en color rojo indica que estamos en la segunda página de resultados.

Echando un vistazo rápido a la página de resultados vemos que en la quinta dirección encontrada, titulada "EL software del curso" aparece el texto "Copernico, el buscador entre los buscadores". Esto nos hace sospechar que hemos encontrado la que buscábamos. Hacemos clic en el título de página y nos aparece esta página.

A primera vista parece que no sea lo que buscamos. Pero sabemos que en esta página hay un texto que debe decir "Copernico, el buscador entre los buscadores" lo buscamos en el resto de la página y encontramos algo que ya parece más interesante, como puedes ver en la página siguiente

Buscador YahooYahoo! Inc. es una empresa global de medios con sede en Estados Unidos, posee un portal de Internet, un directorio web y una serie de servicios, incluido el popular correo electrónico Yahoo!. Su misión es "ser el servicio global de Internet más esencial para consumidores y negocios". Fue fundada en enero de 1994 por dos estudiantes de postgrado de la Universidad de Stanford, Jerry Yang y David Filo. Yahoo! se constituyó como empresa el 2 de marzo de 1995 y comenzó a cotizar en bolsa el 12 de abril de 1996. La empresa tiene su sede corporativa en Sunnyvale, California, Estados Unidos.

Altavista, Lycos, Excite

Altavista: fue un buscador en inglés y español, propiedad de la empresa Overture Service Inc. La cual, a su vez fue comprada por Yahoo!. Su sede se encontraba en California y se llegaron a realizar unas 61.000 búsquedas cada día.El nombre AltaVista se refiere a un motor de búsqueda de Internet y a la empresa que lo gestiona.AltaVista fue uno de los sitios más antiguos en la web. Fue lanzado en los primeros meses de 1995 y, en su momento, llegó a ocupar el primer lugar como índice de búsqueda. Google, que lo destronaría posteriormente, fue fundada un poco más tarde, en 1998, e incluso Yahoo, fue lanzado por primera vez en 1994 como una guía en Internet.1El 8 de julio de 2013, Altavista fue finalmente cerrado por Yahoo! para dejar el camino libre a Bing y al mismo Yahoo! Search.

Lycos: era un portal web que incluye un buscador. Surgió como un proyecto de desarrollo de un motor de búsqueda liderado por el Dr. Michael Mauldin de la Universidad Carnegie Mellon en 1994. Se incorporó en 1995 y llegó a ser uno de los sitios web más visitados de internet con una presencia global en alrededor de 40 países.El nombre "Lycos" es la palabra griega para «lobo», que se encuentra como raíz en Lycosidae, una familia de arañas que buscan activamente su presa, o en licántropo.En plena burbuja tecnologíca, Terra (propiedad de Teléfonica), adquirió Lycos en una de las operaciones financieras más llamativas, pero que a medio plazo resultó ser la menos rentable. Con la compra de Lycos, Terra pretendía posicionarse como líder en portales entre la comunidad latina de Estados Unidos.

El año 2009 en plena crisis económica global, los accionistas mayoritarios de Lycos, siendo Terra el mayor de ellos, acordaron la liquidación de Lycos, después de varios años de pérdidas operativas y ante la imposibilidad de encontrar un comprador.Daum es un portal en internet que goza de popularidad en Corea del Sur. Daum ofrece muchos servicios de Internet, incluso un correo electrónico gratis muy popular, servicio de mensajería, foros, compra y noticias. Su gran éxito consiste en que fue uno de los primeros portales significativos en Corea del Sur. Su popularidad comenzó cuando se unió al servicio de correo hanmail.net prestando nuevos servicios. 'Compró el portal Lycos en octubre del 2004.''

Buscadores hispanos y europeos.

Buscadores Europeos

De momento en Europa no existe alternativa a los buscadores norteamericanos, no hay un buscador europeo que pueda competir con ellos a nivel mundial.

El hecho de contar con idiomas más minoritarios que el Inglés es un lastre. Aunque en español hay bastantes millones de potenciales usuarios todavía no está muy extendido el uso de Internet en muchos países hispanos.

Si quieres buscar en el entorno francófono Voila es una buena opción. Para búsqueda en alemán T-online y Web.de. Si quieres buscar en Italia: Libero y Virgilio.

Buscadores Hispanos

Hispavista, Terra, Ya.com, Ozú, Elcano, El índice, estos buscadores surgieron bajo el modelo de Yahoo y contienen páginas propuestas por los propios creadores de las páginas.

Tienen información interesante de páginas en español ya que han captado muchas páginas de creadores locales de páginas en español pero dado el rápido crecimiento de la Web en ocasiones no han podido ir asimilando todas las páginas que se crean cada día a nivel mundial, por falta de medios en la mayoría de los casos.

Como buscar eficientemente

Lo que no debe hacer un buen buscador.

Así como la calidad de los resultados es difícil de evaluar, está bastante claro lo que no debe hacer un buscador al mostrar resultados.

- No debe mostrar demasiada publicidad que pueda llegar a confundir al usuario.

- No se deben repetir páginas del mismo sitio web sin apenas diferencias entre ellas. Esto era algo bastante corriente en los primeros buscadores y es algo que un buscador de calidad no debe hacer.

- Tampoco se deben mostrar páginas que ya no existen.

- Y por último un buscador lento tiene muy pocas posibilidades de salir adelante.

Teniendo en cuenta estos parámetros podemos elegir mejor nuestro buscador ya sólo nos queda aprender a utilizarlo bien.

Utilizar bien un buscador.

Hay unas reglas generales que se pueden aplicar a casi todos los buscadores.

- La regla fundamental es elegir bien las palabras claves al realizar una búsqueda. Conviene empezar por pocas palabras, una o dos, y si en la primera página de resultados no encontramos lo que queremos, utilizar sinónimos de las palabras claves o añadir una palabra clave más. Suele ser más efectivo modificar o añadir palabras clave y realizar una nueva búsqueda que consultar resultados más allá de las dos o tres primeras páginas.

- Utilizar palabras específicas. Cuando tenemos una idea clara de lo que queremos buscar es mejor utilizar las palabras que más se aproximen a ello. Por ejemplo, si queremos buscar algo sobre cómo consiguen la energía las plantas en lugar de escribir Biología energía plantas es mejor escribir directamente fotosíntesis.

- En general, cuanto más se acote el término de búsqueda, mejor. Si queremos buscar algo sobre un tema que no sabemos cómo denominarlo exactamente podemos dar varias palabras que lo definan por aproximación. Por ejemplo, si estamos interesados en el tema de conservar la naturaleza manteniendo los recursos naturales, podemos incluir las palabras naturaleza, conservación, recursos, reciclaje, protección.

- Mejor utilizar palabras simples que compuestas. En lugar de escribir vehículos turismos mejor poner automóviles.

- Si conocemos datos como el modelo y la marca, mejor incluirlos. Por ejemplo si buscamos un driver para un módem interno y sabemos el modelo y la marca debemos incluirlos. Si no encontramos nada podemos probar sin especificar la marca y modelo.

- Si queremos conocer algo que tiene una estructura jerárquica podemos utilizar los buscadores de categorías en lugar de palabras claves. Por ejemplo si queremos saber sobre modelos de coches podemos buscar en Industria → Automóviles → Marcas y obtendremos las diferentes marcas, luego podemos ir entrando en cada marca para ver los modelos. Aunque los buscadores de categorías cada vez están más desactualizados.

- Si estamos interesados en un tema pero no conocemos todavía casi nada de él, podemos ir a un buscador por categorías que nos irá mostrando las diferentes ramas del tema. Nos irá dando pistas sobre temas posibles. Por ejemplo, si nos interesa la astronomía, podemos encontrar temas de agujeros negros, constelaciones, el sistema solar, telescopios, etc.

- Si obtienes demasiados resultados puedes eliminar los que no te interesen utilizando las opciones de búsqueda avanzada del buscador.

- Cada buscador tiene una página de ayuda que explica cómo utilizar correctamente el buscador, conviene leer estas páginas.

También debemos tener en cuenta utilizar buscadores específicos En ocasiones es mejor utilizar buscadores específicos que genéricos. Hay buscadores sobre temas concretos, como por ejemplo libros por ISBN y también hay sitios web que sin ser propiamente buscadores se

han dedicado a recopilar direcciones interesantes sobre algún tema concreto. Por ejemplo si queremos buscar cursos y tutoriales gratuitos de informática nos será más fácil encontrarlos en Directorio de aulaClic, Lawebdelprogramador o abcdatos que en un buscador general.

Servidores de FTP anonnymous.Foros y páginas de ayudaHay buscadores dedicados a las empresas “paginas amarillas”, al ocio “youTube”, Mapas “google maps”, Sitios gratis “lo gratis.com”, Manuales y tutoriales “directorio de aulaclic”, Trabajo “elempleo.com”, Libros “Bibliotecas virtuales”, Blogs “google blogs”, Alojamiento de sitios web “buscahost”, Hoteles “Hotelsearch”, Vuelos “Vuelosbaratos”, viajes en general “despegar.com”, Noticias “Noticias Yahoo”, Automoviles “tucarro.com.co”, fotografía “sxc.hu”.

UNIDAD 4 el correo y el chat Introducción y el funcionamiento del correo. Los programas de correo. Outlook Express La barra estándar. Redactar La libreta de direcciones. Opciones Mensajería instantánea El chat y tipo de chats Mensajería instantánea

Introducción y el funcionamiento del correo.El correo electrónico o email es el servicio más utilizado de Internet, junto con la Web. Hay varios tipos de cuentas, POP, IMAP y SMTP.

Las cuentas que utilizan el protocolo POP son las más frecuentes. Permiten que sea un único usuario el que se conecte, descargue todos los mensajes del servidor a su equipo, y los gestione directamente en el cliente. Puede trabajar con ellos de modo offline.

Con el protocolo IMAP, en cambio, se trabaja únicamente con los correos cuando se está conectado. Está más pensado para trabajar en equipo, empresas o en cooperación, ya que permite que varios usuarios trabajen sobre la misma cuenta de correo a la vez. Por lo tanto, los usuarios no suelen gestionar los contenidos directamente, sino que simplemente los consultan.

Aquí hablaremos de las POP por ser las más usadas.

El correo por Internet, igual que el correo normal, debe ser privado, por esto todos los programas para leer el correo disponen de protección mediante contraseña. Aunque esto no asegura que alguien pueda interceptar el correo mientras viaja a través de la red.

Para evitar esto, se pueden utilizar sistemas de cifrado, como el PGP, que codifican el mensaje antes de enviarlo por la red y lo descodifican al llegar al destino.

Funcionamiento del correo.

El correo electrónico o e-mail es una forma de enviar mensajes entre ordenadores conectados a través de Internet.

Como la mayoría de los servicios de Internet el correo se basa en la arquitectura cliente/servidor. Vamos a explicar, de forma simplificada, en qué consiste esta arquitectura.

Los clientes son los ordenadores de los usuarios que utilizan el correo y el servidor es el ordenador que gestiona el correo, el servidor pertenece a la entidad proveedora del correo (Terra, ONO, Hotmail, Gmail, etc.)

Cuando alguien envía un correo, primero llega a su servidor de correo que lo envía al servidor del destinatario, donde el mensaje queda almacenado en el buzón del destinatario. Cuando el destinatario se conecte al servidor, éste le enviará todos sus mensajes pendientes. Por esto da igual que el destinatario esté conectado o no a Internet en el momento que se le envía un mensaje.

Podemos configurar nuestro correo para que cada vez que se arranque lea los mensajes pendientes o para que los lea cuando pulsemos en el botón Recibir.

El servidor que alberga los correos suele disponer de un espacio limitado. Si en algún momento detecta que vas a sobrepasar dicha capacidad, recibirás un aviso para eliminar correos. Si no lo haces, tu bandeja de entrada no admitirá correos nuevos. De todas formas esto no debe preocuparte demasiado, porque hoy en día los principales servicios de correo electrónico ofrecen espacio de varios GB, que resulta más que suficiente en la mayoría de casos.

El proceso cliente/servidor es más complicado de lo expuesto aquí, puesto que se envían mensajes intermedios de comprobación para asegurarse que en cada paso los datos se reciben bien.

Los clientes deben disponer de un programa-cliente de correo, por ejemplo el Outlook, Windows Live Mail o Thunderbird. El servidor es un ordenador que tiene un programa servidor de correo que puede atender miles de cuentas de correo. Normalmente el servidor de correo reside en una máquina distinta al servidor de páginas web, por esto puede que en un momento dado no funcione el servidor web pero sí el servidor de correo, o viceversa.

Un correo consta de varios elementos, la dirección de correo del destino, el texto de mensaje y puede que algunas cosas más como ficheros adjuntos, etc.

Una dirección de correo tiene una estructura fija:

nombre_cuenta@nombre_servidor

por ejemplo: [email protected]

Cada dirección de correo es única para todo el mundo, no pueden existir dos direcciones de correo iguales.

Cuando nos conectamos a Internet mediante un proveedor nos suelen asignar una o varias cuentas de correo. También podemos crearnos cuentas en sitios web que las ofrecen gratuitamente como hotmail, Gmail, yahoo, etc.

Hay dos formas básicas de utilizar el correo, a través de un programa de correo y mediante webmail.

* Webmail. Como su nombre indica, consiste en utilizar el correo desde la Web. Una de las ventajas del webmail, es que desde cualquier ordenador que tenga conexión a Internet podemos leer y enviar nuestro correo sin tener que configurar nada. Más adelante explicaremos algunas cosas más del Webmail.

* Programa de correo. Por ejemplo el Outlook o Windows Live Mail de Microsoft, el Thunderbird de Mozilla, Eudora, etc. Estos son programas específicos para trabajar con el correo y que tenemos que instalar en nuestro equipo. La primera vez que se utilizan hay que configurarlos con los datos de la cuenta y servidor de correo. Por lo tanto sólo es práctico utilizarlos en dispositivos que vayamos a utilizar con cierta frecuencia, como el portátil, el equipo personal o en el trabajo.

Pueden manejar varias cuentas a la vez sin importar quién nos haya proporcionado la cuenta. Tienen muchas más opciones que el webmail. En la imagen de la página siguiente puedes ver el aspecto general de Windows Live Mail.

Estos programas cada vez se utilizan menos en el ámbito personal gracias a la proliferación del webmail.

Los programas de correo. Outlook Express

Outlook Express fue un cliente de correo electrónico y de noticias de red producido por Microsoft para sus plataformas Windows, también con versiones para otras plataformas. Outlook Express se distribuía sin costo adicional con Microsoft Internet Explorer, y formaba parte así de los últimos sistemas operativos de las familias Windows y Windows NT.Fue un programa derivado de Microsoft Outlook (que forma parte de Office), pero especializado en correo electrónico y noticias de red, por lo que no incluye las características de groupware. En cambio, permite un mejor manejo de algunas características comunes en grupos de correo electrónico y noticias de red, como el manejo de texto.Desde el 1 de septiembre de 2009 dejó de ser operativo, fue reemplazado por el cliente Windows Mail (incluido en Windows Vista) y luego Windows Live Mail, parte del paquete de descarga Windows Live Essentials.

Multimedia

Outlook Express estaba configurado, por omisión, para el envío de mensajes en texto plano; pero, al igual que en Outlook, se puede modificar la configuración para incluir contenidos activos basados en DHTML y ActiveX; por ejemplo, imágenes, música, pequeños y largos manejos del sistema operativo programas en lenguajes de script, etc. Además, pueden usarse estos controles para la ejecución de código nativo de Windows (programas ejecutables), o usarse simplemente como agenda.

Características

Características de seguridadEstas capacidades multimedia, sumadas a la característica de previsualización, han permitido la proliferación de virus informáticos tipo gusano (worm) que se difunden a través de este programa (tan sólo al modificar su funcionamiento).Es mucho más que recomendable utilizarlo sólo en modo texto, o utilizar MUA's alternativos.Así, se aconseja siempre configurar el programa para impedir la visualización de contenido activo, especialmente el uso de ActiveX en los mensajes, que es particularmente peligroso. Esto puede hacerse desactivando el panel de vista previa y configurando Internet Explorer de forma que Outlook Express advierta al usuario de la presencia de ActiveX y lance una pregunta para que éste decida si permite o no su ejecución. Esto permite que el usuario pueda autorizar su ejecución sólo cuando sea realmente necesaria, y sólo cuando el creador del mensaje sea fiable.

Animaciones con Outlook ExpressEl programa de correo electrónico Outlook Express es capaz de mostrar contenidos codificados en lenguaje HTML dinámico o DHTML. Esto significa que, al igual que las páginas web, los mensajes confeccionados y remitidos mediante dicho programa pueden ser animados mediante imagen y sonido. Para lograr esto es preciso habilitar en el programa Outlook Express el acceso al código fuente, en el que es posible modificar el código HTML de los mensajes e insertar SVG, VML, Flash y el propio DHTML, que se basa en una combinación de CSS y de HTML mediante scripts programados en lenguajes JavaScript y VBScript.Exclusivamente en cuanto al posible valor de entretenimiento o de expresión artística de ese tipo de animación, contenida en mensajes de correo electrónico, dichas animaciones se convierten en objeto de intercambio entre aficionados a su confección, utilización y aprendizaje. Así pues, y en particular en lo que se refiere a las animaciones que es posible realizar en DHTML, en frecuentes casos los autores de scripts, adaptados a Outlook Express —que es programa propietario de los formatos que utiliza, para mensajes de correo y de noticias, los difunden desinteresadamente en grupos de noticias de Usenet y de correo electrónico; grupos que constituyen verdaderos foros de intercambio de este pasatiempo, cuyos resultados a menudo son encuadrables en el concepto de arte digital.

Riesgos e inconvenientesAlgunas animaciones utilizan ActiveX, tecnología que también puede utilizarse para introducir código maligno en los correos electrónicos. Puesto que estas animaciones se sirven del motor de Internet Explorer, es necesario configurar éste de manera que cumpla con dos condiciones esenciales: en el Outlook Express deberá aparecer un aviso de ActiveX donde se le pregunte al usuario si permite su ejecución en la pantalla, deberá impedirse la descarga de ActiveX al disco duro.Como esta configuración afecta a todo el equipo, se hace necesario utilizar programas adicionales de seguridad informática: cortafuegos, antiespías y programas telnet que permiten inspeccionar el correo cuando aún está en el servidor.Para ver y hacer estos mensajes animados, sólo es válido el Outlook Express, pues hacen uso de extensiones propias de Microsoft, algunas de las cuales no son compatibles con otros fabricantes. Las entidades definitorias de estándares web han definido esta política como adoptar, extender y extinguir en inglés, embrace, extend and extinguish, ya que obliga a fabricantes y a usuarios a utilizar tecnología Microsoft. Por ello, los programadores de scripts están tratando de adaptarse a los estándares W3C.

HistoriaEstas animaciones comienzan con la aparición de la versión 4.0 de Outlook Express en 1997, que se desarrollaron tanto en los grupos de noticias de Microsoft como en servidores privados y gratuitos.En marzo de 1998 se organizó un grupo estable en inglés: WET. Poco después, se organizó otro grupo en francés: CCG (página web no actualizada).A causa de la proliferación del virus Swen, en abril de 2004 Microsoft abrió un grupo sólo para animaciones, protegido por contraseña pública. Esta medida ha sido adoptada por otros servidores privados, ya que también evita la entrada de spammers y robots.Dadas las características de estos mensajes electrónicos, fue necesario adaptar las netiquetas publicadas por Usenet. Aunque no hay constancia escrita, ésta son algunas de las normas acordadas:Absoluta gratuidad en materiales y enseñanzaObligación de mantener nombres de autores, tanto en animaciones como en tutorialesObligación de incluir 'adult' en la línea Asunto, cuando existan imágenes no aptas para menores.

La versión 6.0 de Outlook Express ha aportado, entre otras novedades, el uso de popups para la apertura a pantalla completa.

ExtensionesOutlook Express no tiene una interfaz para interactuar con la interfaz gráfica como sí dispone Outlook. Solamente las interfaces IStoreNamespace and IStoreFolder fueron documentadas en 2003, pero sólo están relacionadas con su base de datos. Algunas compañías han desarrollado soluciones interceptando funciones del sistema operativo. La más conocida fue la extensión PGP, porque era el único ejemplo cuyo código fuente sí estaba disponible (con licencia GPL). En el 2003 algunas compañías desarrollaron soluciones comerciales. Las más conocidas fueron GSD Outlook Express Toolbar Kit y OE API.

CompetenciaEste tipo de aplicaciones rara vez es usado por el usuario, ya que un entorno web como Gmail o Hotmail permite acceso global y no tener que configurar la aplicación en diferentes máquinas para acceder a los correos. Incluso aplicaciones similares como Thunderbird, Windows Live Mail y Evolution casi no se utilizan.

Mensajería instantánea

La mensajería instantánea (conocida también en inglés como IM) es una forma de comunicación en tiempo real entre dos o más personas basada en texto. El texto es enviado a través de dispositivos conectados a una red como Internet.Introducción dos.

La mensajería instantánea requiere el uso de un cliente de mensajería instantánea que realiza el servicio y se diferencia del correo electrónico.La mayoría usan redes propietarias de los diferentes softwares que ofrecen este servicio en cada máquina diferente. Adicionalmente, hay programas de mensajería que siempre te sirven de gran ayuda para que llegue tu envío de forma instantánea que utilizan el protocolo abierto XMPP, con un conjunto descentralizado de servidores.Los clientes de mensajería instantánea más utilizados son ICQ, Yahoo! Messenger, Windows Live Messenger, Pidgin, AIM (AOL Instant Messenger) y Google Talk (que usa el protocolo abierto XMPP). Estos servicios han heredado algunas ideas del viejo, aunque aún popular, sistema de conversación IRC. Cada uno de estos mensajeros permite enviar y recibir mensajes de otros usuarios usando los mismos software clientes, sin embargo, últimamente han aparecido algunos clientes de mensajerías que ofrecen la posibilidad de conectarse a varias redes al mismo tiempo (aunque necesitan registrar usuario distinto en cada una de ellas). También existen programas que ofrecen la posibilidad de conectarte a varias cuentas de usuario a la vez como aMSN.

Características de la mensajería instantánea

Los sistemas de mensajería tienen unas funciones básicas aparte de mostrar los usuarios que hay conectados y chatear. Son comunes a todos o casi todos los clientes o protocolos y otras son menos comunes:

Contactos:Mostrar varios estados: Disponible, Disponible para hablar, Sin actividad, No disponible, Vuelvo enseguida, Invisible, no conectado.Con el estado invisible se puede ver a los demás pero los demás a uno no.Mostrar un mensaje de estado: Es una palabra o frase que aparece en las listas de contactos de tus amigos junto a tu nick. Puede indicar la causa de la ausencia, o en el caso del estado

disponible para hablar, el tema del que quieres hablar, por ejemplo.

A veces, es usado por sistema automáticos para mostrar la temperatura, o la canción que se está escuchando, sin molestar con mensajes o peticiones de chat continuos.También se puede dejar un mensaje de estado en el servidor para cuando se esté desconectado.Registrar y borrar usuarios de la lista de contactos propia.Al solicitar la inclusión en la lista de contactos, se puede enviar un mensaje explicando los motivos para la admisión.Rechazar un usuario discretamente: cuando no se quiere que un usuario en concreto le vea a uno cuando se conecta, se puede rechazar al usuario sin dejar de estar en su lista de contactos. Solo se deja de avisar cuando uno se conecta.A veces de pueden agrupar los contactos: Familia, Trabajo, Facultad, etc.Se puede usar un avatar: una imagen que le identifique a uno. No tiene que ser la foto de uno mismo.

Conversación:Puede haber varios tipos de mensajes:Aviso: envía un mensaje solo. No es una invitación a mantener la conversación, solo se quiere enviar una información, un ejemplo de uso de este tipo sería el Mensaje del día o MOTD ofrecido por el servidor.

Invitación a chatear: se invita a mantener una conversación tiempo real.Mensaje emergente: es un aviso que se despliega unos segundos y se vuelve a cerrar. No requiere atención si no se desea. Sirve como aviso breve que moleste lo mínimo posible. Por ejemplo, "ya lo encontré, gracias". tu potoMuchas veces es útil mostrar cuando el otro está escribiendo.Muchas veces se puede usar emoticonos.Charlas en grupo al estilo IRC MultiUser Chat:Se pueden crear salas (grupos de charla), públicas y privadas y también permanentes o que desaparezcan al quedarse sin usuarios.Restringir el acceso a salas mediante invitaciones certificadas, para invitar solo a quien uno quiera.

Otras:Mandar ficheros: la mayoría de los clientes de mensajería instantánea, también permiten el envío de archivos, generalmente usando protocolos punto a punto (P2P).Posibilidad de usar otros sistemas de comunicación, como una pizarra electrónica, o abrir otros programas como un VNC o una videoconferencia.

Servicios La mensajería instantánea se utiliza, generalmente de persona a persona, pero se puede utilizar, mediante robot de software para que se pueden utilizar de persona a equipo, en este caso, se trata de Servicios sobre mensajería instantánea un tipo de aplicación que cada vez es más utilizado, por sus rapidez de respuesta y versatilidad de servicios.

Historia

Una primera forma de mensajería instantánea fue la implementación en el sistema pe2.0 usado al principio de la década de 1970. Más tarde, el sistema talk implementado en UNIX/LINUX comenzó a ser ampliamente usado por ingenieros y académicos en las décadas de 1980 y 1990 para comunicarse a través de internet. ICQ fue el primer sistema de mensajería instantánea para ordenadores con sistema operativo distinto de UNIX/LINUX en noviembre de 1996. A partir de su aparición, un gran número de variaciones de mensajería

instantánea han surgido y han sido desarrollados en paralelo en otras partes, cada aplicación teniendo su propio protocolo. Esto ha llevado a los usuarios a tener que usar un cliente para cada servicio simultáneamente para estar conectado a cada red de mensajería. Alternativamente, han surgido programas multicliente que soportan varios protocolos como Pidgin o Trillian.Recientemente, algunos servicios de mensajería han comenzado a ofrecer telefonía IP (VoIP), videoconferencia, que permiten integrar capacidades de transmitir audio y vídeo junto con las palabras.

El chat y tipo de chats

DEFINICIÓN DE CHATEs un término adquirido de la lengua inglesa, que significa charla. Es una conversación virtual escrita en tiempo real entre dos o más personas cuyo medio para poder llevarla a cabo es internet, por lo que las personas pueden estar situadas en distintas ciudades o países, la conversación puede ser tanto pública como privada. En el chat puedes conocer a la persona con la que hablas o utilizar un pseudónimo y mantener el anonimato, además al mantener el anonimato, por esta razona la información que das a través del chat es la que la persona quiere, no siendo en todos los casos veraz.

Un mismo chat puede estar conformado por canales de distinta temática, los cuales son zonas virtuales, en la que una persona puede acceder y hablar de ese tema con el grupo que esté conectado a dicho canal e incluso mantener conversaciones privadas con diferentes personas de dicho grupo.

FUNCIÓN DE LOS CHATSActualmente el uso del chat está muy extendido, se puede utilizar con fines diferentes, como por ejemplo:Conocer genteComo medio de comunicación para hablar sobre un tema de interés con un grupo de gente expertaComo medio de comunicación entre un grupo de trabajoCon usos didácticos:Se puede usar en cursos a distanciaPara trabajos en gruposPara practicar idiomas extranjeros comunicándote con personas de otros países.Realizar tutoríasetc.Con el chat se pueden tomar decisiones inmediatas.

TIPOS DE CHATS

Los diferentes tipos de chats se dividen según la temática a la que se refieren o su formato. Aquí se hará alusión a esta última característica, así pues estos son:

Chats por la Web:Este chat transmite los mensajes mediante las páginas web. Es el más utilizado ya que es muy sencillo y tiene fácil acceso ya que no hace falta instalarse ningún programa, ni darse de alta en ningún sitio. Simplemente entrar en una página web, dar un apodo y comenzar a charlar.

Los chat más conocidos están en los grandes portales como Terra, Inforchat, etc., pero también los hay en sitios más pequeños. Un sitio web puede crearse un programa propio que

implemente una sala de chat a partir de los programas de libre distribución existentes en diversos lenguajes, como pueden ser Java, PHP, Perl, etc.

La parte negativa de este tipo de chat es que si se actualiza la página con nueva información, está tiene que cargarse por completo. Es un chat muy dependiente de los navegadores por lo que cada vez se usa menos.

IRC (Internet Relay Chat):Es el origen de los chats tal y como se conocen hoy en día. Fue creado en 1988. Permite la interacción entre dos o más personas simultáneamente por medio de un canal. Para su funcionamiento es necesario un programa descargable, como el mIRC. Por medio de mIRC accedes a un salón virtual o canal de IRC y cada uno de ellos se enfoca a un tópico específico.

Una desventaja es que es más complicado que los chats web ya que en los IRC se trabaja con scripts o palabras clave para realizar ciertas acciones como listar los canales de un servidor o unirte a uno de ellos.

Chats de mensajería instantánea:La mensajería instantánea permite comunicarse entre dos o más personas en tiempo real, permitiendo enviar y recibir mensajes de texto, imágenes, audio, etc.

Es la evolución entre los chats en la Web y los IRC, tienen muchas más funciones que los primeros y son más sencillos que los segundos.

Lo único que se necesita es la descarga de un programa que es ejecutado en segundo plano siempre y permite la comunicación entre el ordenador y el servidor central.

Algún ejemplo de mensajería instantánea son Windows Live Messenger, Google Talk, Yahoo Messenger, AOM o ICQ.

Windows Live Messenger: nos permite enviar y recibir mensajes de forma instantánea. Cuando accedes al programa tienes una lista de contactos donde añades gente y puedes ver si están conectados en cada momento y establecer una conversación escrita en tiempo real e intercambiar imágenes, audio, ect. Además Windows Live tiene integrada la plataforma de correo electrónico Hotmail por lo que puedes comunicarte con los demás aunque no estén conectados y mandar y recibir documentos. También posee conexión con las redes sociales de Windows Live y puedes visitarlas desde allí para conocer gente o ver a tus contactos actuales.

Chats comerciales: Este chat se utilizaría para que las empresas den información comercial unas a otras o a sus propios clientes. Es un medio efectivo ya que no se hace esperar la respuesta. Por ejemplo, en una tienda virtual un posible cliente que se interesa por un artículo y es atendido en ese mismo instante para resolver unas dudas puede decidirse a comprar más fácilmente.

Ejemplos de empresas que utilizan este tipo de servicios son LivePerson y Volcano.Roulette Chats: Este tipo de chat es poco convencional. Consiste en un sistema de chat mediante webcam en el que se conecta a dos interlocutores aleatoriamente. El usuario no escoge con quién habla, pero sí puede cambiar de persona en cualquier momento. Son chats diseñados para conocer gente y a los que sólo pueden entrar adultos.

Multimedia Chats: Estos chats permiten la comunicación por medio escrito pero se centran más en la comunicación por medio de audio y vídeo. Estos programas son más útiles pero requieren de más medios, como altavoces, cámara web y micrófono.

UNIDAD 5 INTRODUCCION AL HTML Conceptos básicos de HTML Código básico de una página web. Dando formato al texto de una pagina Código HTML para crear enlaces Dentro de la misma pagina Con otras páginas del usuario Interactuando con páginas de internet Insertar imágenes en páginas web.

Conceptos básicos de HTML

IntroducciónEl World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básica donde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por contener texto, imágenes, animaciones... e incluso sonido y video.Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante los links o enlaces hipertexto. Gracias a estos enlaces el navegante de internet puede pulsar sobre un texto (texto al que llamaremos de ahora en adelante activo) de una página para navegar hasta otra página. Será cuestión del programador de la página inicial decidir que palabras o frases serán activas y a donde nos conducirá pulsar sobre ellas.

El lenguaje HTML (HyperText Markup Language), es el formato estándar que se utiliza para crear e interpretar documentos de texto e imágenes, conocidos popularmente como páginas web. Estos documentos, que en realidad son archivos de texto plano, están compuestos básicamente por: - la información que el usuario ve en la pantalla cuando accede a una página, y - códigos (tags o etiquetas), transparentes para el usuario, que son interpretados por el programa del navegador y que controlan la manera como la información es mostrada en la pantalla. El objeto del presente módulo es aprender a utilizar de manera correcta, algunas de esas etiquetas, con el fin de crear y modificar páginas mediante el uso de cualquier editor de texto. El siguiente ejemplo sencillo, contiene lo necesario para crear una página que desplegará en el explorador (browser o navegador), la frase “Bienvenido al curso de HTML”:

<HTML> <HEAD> <TITLE>Primer Página</TITLE> </HEAD> <BODY> Bienvenido al curso de HTML </BODY> </HTML>

Las palabras encerradas entre los símbolos menor y mayor que (< >), son las etiquetas de HTML y las frases dentro de éstas, constituyen la información que realmente verá el usuario. Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la etiqueta </HTML>. La estructura de una página está compuesta básicamente por dos secciones: el encabezado (HEAD), y el cuerpo (BODY), delimitados por las etiquetas <HEAD>, </HEAD>, <BODY> y </BODY> respectivamente.

El cuerpo contiene toda la información de la página que será desplegada por el browser al accederla, mientras que el encabezado cuyo contenido generalmente no es visible, se utiliza principalmente para colocar en él, además del título de la página, scripts y otras etiquetas especiales en las que se consignan datos relacionados con el autor, palabras claves sobre el contenido, descripción, etc. En un documento HTML se pueden incluir un sinnúmero de etiquetas, que controlan la manera como la información será presentada por el explorador. Existen etiquetas para formatear la presentación del texto y las imágenes, otras indican al sistema cómo responder a eventos generados por el usuario, tales como, hacer clic con el ratón o desplazarlo sobre una imagen, texto o ciertas áreas sensibles. También hay etiquetas para organizar la información dentro tablas, dividir la pantalla en secciones o ventanas independientes, etc. Una de las más importantes es la etiqueta que le permite al usuario “navegar” entre documentos, simplemente dando clic sobre los denominados “vínculos” (links), sin importar dónde residen las páginas a las cuales apuntan. El explorador, también conocido como navegador o browser, es el software que permite acceder, interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya dirección es conocida. El navegador interpreta las etiquetas y muestra el documento en pantalla. La principal ventaja del formato HTML es su portabilidad. Es decir, los exploradores son capaces de interpretar y mostrar la información contenida en una página web, independientemente de la plataforma en que se usen (IBM, MAC, UNIX, LINUX, etc.). El presente módulo no pretende hacer una explicación exhaustiva del lenguaje HTML ni de ninguna herramienta de edición gráfica. Aquí se tratarán únicamente, aquellos aspectos básicos que le permitan al lector desarrollar páginas sencillas que funcionen de acuerdo a lo esperado, sin importar la versión y la casa productora del software del navegador ni la plataforma de trabajo.

QUÉ SE NECESITA PARA CREAR PÁGINAS WEB? Dado que las páginas Web son simples documentos de texto plano, lo único que se requiere para su creación es un editor de texto. Aunque existen muchas y potentes herramientas para la creación y edición gráfica de documentos HTML, el Block de Notas (NotePad), el editor (EDIT) de DOS, o cualquier otro editor de texto sirven bien para estos propósitos. Mientras que para visualizar documentos HTML, debemos disponer de un explorador como Netscape Navigator ®, Mozilla Firefox ® o Microsoft Internet Explorer ®, que son los más populares en el mercado.

CODIGO BASICO DE UNA PAGINA WEB

LA PRIMER PÁGINA Para crear ésta y todas las páginas propuestas, se utilizará el Block de Notas de Microsoft (notepad). Ábralo y escriba en él el siguiente texto: <HTML> <HEAD> <TITLE>Mi primera página</TITLE> </HEAD> <BODY> HOLA A TODOS! ÉSTA ES MI PRIMERA PÁGINA WEB </BODY> </HTML> HTML no es un lenguaje sensible a las mayúsculas, lo que significa que cualquier etiqueta puede ser escrita en mayúsculas, minúsculas o una combinación de ellas. Por ejemplo, escribir <HTML> tendrá el mismo efecto que escribir <html> o <Html>. De igual forma, no es necesario utilizar una línea para cada etiqueta, ni conservar la sangría y formato propuestos en los ejemplos de éste módulo. Lo anterior se hace para facilitar la lectura, comprensión y edición de los archivos, además de ser una práctica casi obligada entre los buenos desarrolladores. El código anterior pudo haberse escrito de la siguiente manera, y el resultado obtenido seguirá siendo el mismo: <html><HEAD><TITLE>Mi primera página</title></HEAD><BODY> HOLA A TODOS! ÉSTA ES MI PRIMERA PÁGINA WEB</BODY> </HTML> Guarde el archivo con el nombre PrimeraPagina.html en un directorio cualquiera, por ejemplo, C:/CursoHTML/, asegurándose de colocarle la extensión .html. Abra en el explorador el archivo que acaba de crear y si todo va bien, obtendrá una página similar a la siguiente:

DANDO FORMATO DE UNA PAGINA DE TEXTO

ETIQUETAS PARA TEXTO Las etiquetas de texto como su nombre lo indica, permiten cambiar los atributos y la manera como el texto se verá dentro de la página. Se puede afectar todo un párrafo, una línea, una palabra o caracteres individuales simplemente encerrándolos dentro de las etiquetas apropiadas. Algunos atributos del texto pueden ser controlados por diferentes etiquetas, obteniendo resultados similares. ETIQUETA <HX> </HX> Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir títulos y subtítulos, dado que permite mostrar texto en negrillas con seis tamaños diferentes, dependiendo del valor asignado al atributo X. Para ver su funcionalidad, escriba las siguientes líneas en un nuevo archivo: <HTML> <HEAD> <TITLE> Encabezados</TITLE > < / H EAD> <BODY> <H1>Este texto tiene el tamaño que le da la etiqueta H1</H1> <H2>Este texto tiene el tamaño que le da la etiqueta H2</H2> <H3>Este texto tiene el tamaño que le da la etiqueta H3</H3> <H4>Este texto tiene el tamaño que le da la etiqueta H4</H4> <H5>Este texto tiene el tamaño que le da la etiqueta H5</H5> <H6>Este texto tiene el tamaño que le da la etiqueta H6</H6> < / BOD Y > </HTML> Una vez guardado el archivo, ábralo en el explorador y observe los resultados. La etiqueta <HX> tiene otro atributo que permite controlar la alineación del texto. Éste se puede alinear al centro (align="center"), a la derecha (align="right"), a la izquierda, que es la alineación que toma por defecto cuando el atributo align es omitido, o justificado (align="justify").

Por ejemplo, <H1 align=”center”>Texto </H1> Mostrará la palabra “Texto” alineada al centro de la página, mientras que <H1 align=”right”>Texto </H1> Alineará “ Texto” a la derecha y

<H1>Texto </H1> Presentará “Texto” alineada a la izquierda. Lo mismo ocurrirá si se comete un error al escribir el valor del atributo align. Veamos un par de ejemplos: <H1 align=”centre”>Este texto no se alineará al centro </H1> <H1 aling=”right”>Este tampoco se alineará a la derecha</H1> En general, se puede afirmar que cuando la sintaxis de una etiqueta no es la correcta, el navegador no generará error o advertencia alguna al respecto, ni dejará de mostrar la página, simplemente los resultados no serán los esperados. ETIQUETA <FONT> </FONT> Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, las siguientes líneas escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con cuatro tamaños de fuente diferentes: Texto con fuente tamaño normal <FONT SIZE="+1">Texto con fuente tamaño + 1</FONT> <FONT SIZE="+2">Texto con fuente tamaño + 2</FONT> <FONT SIZE="-1">Texto con fuente tamaño - 1</FONT> <FONT SIZE="-2">Texto con fuente tamaño - 2</FONT>

La sintaxis completa de la etiqueta <FONT> es la siguiente: <FONT SIZE="X" COLOR="color" FACE="Nombre de la fuente">Texto</FONT> Donde X corresponde como ya se vió, al tamaño de la fuente que admite valores positivos y negativos. El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico. Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada “Paleta Segura”. El uso de cualquiera de esos colores, garantiza que las páginas podrán ser vistas tal como fueron diseñadas, aun cuando se utilice para su visualización un monitor con la configuración más pobre. La tabla siguiente muestra los valores hexadecimales (códigos) y nombres de los 16 colores mencionados.

Finalmente, Nombre de la fuente es el atributo correspondiente a los nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica, Times New Roman, Arial Black, Chalesworth, etc. Como ejemplo, se propone escribir las siguientes líneas dentro del cuerpo de una nueva página:

<FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT> <FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT> <FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT> <FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT> Cuyo resultado será similar al de la siguiente gráfica:

ETIQUETA <PRE> </PRE> HTML sólo reconoce y muestra un espacio en blanco entre palabras, aunque se hayan escrito dos o más. Tampoco reconocerá tabuladores o retornos de carro. Es decir, sí dentro del cuerpo de un archivo HTML se escribe el siguiente texto:

<BODY> Este texto tiene varios espacios y retornos de carro </BODY> Al abrir la página en el explorador se obtendrá:

Sí se quiere que el texto se vea en la página tal como fue escrito, éste debe encerrarse dentro de las etiquetas <PRE> y </PRE> (preformated), que forzarán al explorador a mostrar todos los espacios, tabuladores y retornos de carro que encuentre. ETIQUETA <BR> y <P> La etiqueta <BR> permite forzar un salto de línea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razón por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un nuevo párrafo dejando una línea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo párrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parámetro ALIGN. A continuación se muestran algunos ejemplos:

ETIQUETA <HR > Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal Rule), con alineación, tamaño y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes líneas: Línea centrada, de tamaño 10 puntos y ocupando el 30% de la página <HR ALIGN=”center” SIZE= ”10” WIDTH= ”30%”>

Línea alineada a la izquierda, de tamaño 5 puntos y ocupando la mitad de la página <HR ALIGN=”left” SIZE= ”5” WIDTH= ”50%”> Línea alineada a la derecha, de tamaño 20 puntos y ocupando la mitad de la página <HR ALIGN=”right” SIZE= ”20” WIDTH= ”50%”> Línea sencilla que ocupará el 90% de la página <HR>

OTRAS ETIQUETAS PARA TEXTO La siguiente tabla muestra otras etiquetas muy útiles a la hora de trabajar con texto y los efectos que se conseguirán:

COMENTARIOS En HTML, como en cualquier otro lenguaje existe una forma de escribir comentarios dentro del código. Todo lo escrito dentro de los signos <!-- y --> será ignorado por el navegador sin que se muestre cuando la página sea visualizada. CARACTERES ESPECIALES Existen una serie de signos que aunque estén disponibles en el teclado, pertenecen a un conjunto específico de caracteres propios del idioma para el cual fue configurado el computador. Es así como, una página escrita por un hispano parlante, que probablemente utiliza el conjunto de caracteres de Europa Occidental, denominado Latin-1 (ISO 8859-1), sea visualizada de manera diferente por un usuario ubicado en un país de Asia o Europa Oriental. Las vocales acentuadas, la letra eñe, el signo del Euro y otros caracteres especiales deben sustituirse por ciertos códigos, para que su visualización sea la correcta, sin importar el conjunto de caracteres predefinido en el navegador. Por ejemplo, la letra eñe debe ser reemplazada por “&ntilde;”, de tal forma que la palabra año se escribe dentro de una página Web de la siguiente manera: a&ntilde;o

La tabla siguiente muestra algunos de los caracteres especiales más utilizados, y su correspondiente código:

Antes de realizar el primer ejercicio, es importante anotar que el lenguaje HTML soporta el anidamiento de etiquetas. Si fuera necesario por ejemplo, exhibir en una página la frase "MÓDULO DE HTML" subrayada, en negrilla, con fuente "VERDANA" y de color azul, bastará con escribir la siguiente línea dentro del cuerpo del archivo: <FONT SIZE="6" COLOR="#0000ff" FACE="Verdana"> <U><B>MÓDULO DE HTML</B></U></FONT> Lo anterior significa que un trozo de texto puede estar afectado simultáneamente por varias etiquetas. Lo único que se debe tener en cuenta a la hora de anidarlas es que la primera etiqueta en ser abierta debe ser la última en cerrarse.

LA ETIQUETA <BODY> Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma por defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendrá la página. La siguiente es la sintaxis completa de esta etiqueta: <BODY BACKGROUND = "nombre_imagen" BGCOLOR = "color_fondo" TEXT = "color_texto" LINK = "color_enlace" VLINK = "color_enlace_V" ALINK = " color_enlace_A"> … </BODY> nombre_imagen se refiere al nombre, o mejor la ubicación del archivo de una imagen que se quiere aparezca como fondo de la página, color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los códigos o los nombres de los colores para el fondo de la página, el texto de la información, el texto de los enlaces no visitados, el

texto de los enlaces visitados y el texto de los enlaces activos respectivamente. El manejo de estos tres últimos se verá más adelante en el capítulo correspondiente a enlaces. El siguiente ejemplo desplegará una página con fondo negro (black) y texto de color lima (#00ff00): <HTML> <HEAD> <TITLE>Cuerpo</TITLE> < / H EAD> <BODY BGCOLOR=”black” TEXT=”#00ff00”> <H3>ESTA PÁGINA TENDRÁ FONDO NEGRO Y TEXTO LIMA</H3> </BODY> </HTML>

UBICACIÓN DE ARCHIVOS Antes de comenzar a trabajar con imágenes, es indispensable entender el concepto de la ubicación relativa de archivos. Existen en HTML algunos atributos que indican la ruta o el camino donde se encuentran ubicados ciertos elementos y no un valor simple como un número o el código de un color. Tal es el caso del atributo background cuyo valor hace referencia a la ubicación y el nombre de una imagen que se quiere aparezca como fondo en la página (BACKGROUND=”ruta”). Cualquiera que sea el sistema operativo que se utilice, los programas, aplicaciones, archivos y documentos se guardan físicamente en una unidad de almacenamiento, dentro de una jerarquía de directorios y subdirectorios conocida como Sistema de Archivos. Un directorio puede contener archivos y otros directorios denominados subdirectorios. Dependiendo de la ubicación de las páginas y las imágenes u otros objetos dentro del sistema de archivos, el valor o ruta de los atributos, cambia. Existen tres posibilidades (ver gráfica de Ejemplo de sistema de Archivos):

1. La página y la imagen se encuentra dentro del mismo subdirectorio (ejemplos: Página1 e Imagen1, Página 2 e Imagen 2 y Página 3 e Imagen 3)

2. La imagen se encuentra en un subdirectorio ubicado en el mismo nivel o por debajo

del subdirectorio que contiene la página (ejemplos: Página 3 e Imagen 1, Página 3 e Imagen 2 y Página 1 e Imagen 2).

3. La imagen se encuentra en un subdirectorio arriba del que contiene la página

(ejemplos: Página 2 e Imagen 1, Página 2 e Imagen3 y Página 1 e Imagen 3).

El ejemplo más sencillo se tiene cuando, tanto la imagen de fondo como la página residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce al nombre de la imagen: <BODY BACKGROUND=”nombre_imagen”> Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo del directorio que contiene la página, la ruta además del nombre de la imagen debe estar compuesta por el o los nombres de los subdirectorios que la contienen, separados por un slash (/). Si por ejemplo, se desea que “Imagen 2” aparezca como fondo de la Página 3, la ruta será: “D2/D3/Imagen 2”, con lo que la etiqueta BODY será similar a: <BODY BACKGROUND=”D2/D3/Imagen 2”> La última posibilidad que existe es que la imagen se encuentre ubicada uno o más niveles por encima del directorio que contiene la página. En este caso la ruta estará compuesta por el nombre de la imagen, precedida por un conjunto de dos puntos y un slash (../) Por cada nivel que sea necesario subir para alcanzar el directorio donde está ubicada la imagen. Con los siguientes ejemplos se ilustra esta situación: La “Imagen 1”, ubicada un nivel por encima debe aparecer como fondo de la “Pagina 2” . La ruta será: “../Imagen 1” y la etiqueta BODY debe ser: <BODY BACKGROUND=”../Imagen 1”>

Ahora se quiere que “Imagen 3” sea el fondo de la “Pagina 2”: <BODY BACKGROUND=”../../Imagen 3”> Una práctica común y muy útil, consiste en crear un subdirectorio ubicado al mismo nivel de las páginas, que contendrá todas las imágenes. De esta manera, la siguiente página tendrá como fondo una imagen llamada logoPostgres.gif, que se encuentra ubicada en el subdirectorio Imagenes:

<HTML> <HEAD> <TITLE>Cuerpo1</TITLE> </HEAD> <BODY BACKGROUND=”Imagenes/logoPostgres.gif”> </BODY> </HTML>

Es importante mencionar que HTML soporta sólo ciertos formatos de imagen. Básicamente se pueden mostrar imágenes creadas en formato GIF y JPG. Las últimas versiones de navegadores soportan el formato PNG de MACROMEDIA ®

LISTAS En ocasiones es necesario presentar información de manera ordenada mediante listas con viñetas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con viñetas o listas de definición, cada una de ellas con sus variaciones. LISTA ORDENADA <OL> Considere el caso en el que debe presentar la lista numerada de algunas de las dependencias de la empresa donde trabaja, comenzando con un número en particular: 4. Dirección de Informática 5. Planeación 6. Vicepresidencia Financiera 7. Comunicaciones

El listado anterior se consigue en HTML mediante el uso de las etiquetas <OL> (Ordered List) y <LI> (List Item): <OL TYPE ="1" START ="4"> <LI>Dirección de Informática <LI>Planeación <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista será numérica (el número entre comillas puede ser cualquier entero y el resultado será el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado esté precedido por el número 4, el segundo por el número 5 y así sucesivamente. Sí no se incluye ninguno de los dos atributos anteriores, el explorador desplegará la misma lista pero comenzando el listado en 1. Sí se quiere presentar el mismo listado pero de la siguiente manera:

A. Dirección de Informática B. Planeación C. Vicepresidencia Financiera D. Comunicaciones Bastará con cambiar el 1 del atributo TYPE por una A y el 4 del atributo START por un 1, o simplemente omitir éste último: <OL TYPE = "A" START ="1"> <LI>Dirección de Informática <LI>Planeación <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> EJERCICIO PROPUESTO Cambie la A mayúscula del tributo TYPE por una i, luego por una I y finalmente por una a y observe los resultados. LISTA CON VIÑETAS <UL> Sí en lugar de una letra o un número precediendo los ítems del listado, lo que se quiere es que aparezca una viñeta, se debe entonces utilizar la etiqueta <UL> (Unorderd List) de la siguiente manera: <UL TYPE = "circle"> <LI> Ítem 1 <LI> Ítem 2 <LI> Ítem 3 <LI> Ítem 4 </UL>

Lo que producirá una lista similar a:

o Ítem 1 o Ítem 2 o Ítem 3 o Ítem 4 La etiqueta <UL> únicamente tiene el atributo TYPE, que se refiere al tipo de viñeta que presentará. Pruebe omitiendo este atributo o cambiando circle por disc o por square. LISTA DE DEFINICIÓN <DL> Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definición. Se utiliza típicamente en la construcción de glosarios. Considere por ejemplo, la siguiente lista de términos que definen las funciones de algunas dependencias de la empresa: PLANEACIÓN: Encargada de ejecutar y revisar los planes de inversión. INFORMÁTICA: Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa. RECURSOS HUMANOS: Encargada de los asuntos relacionados con el recurso humano. El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los términos a definir se precede con la etiqueta <DT>, mientras que a la definición en sí, se le antepone la etiqueta <DD>: <DL> <DT>PLANEACIÓN: <DD>Encargada de ejecutar y revisar los planes de inversión. <DT>INFORMÁTICA: <DD>Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa. <DT>RECURSOS HUMANOS. <DD>Encargada de los asuntos relacionados con el recurso humano. </DL>

EJERCICIO 2 El ejercicio consiste en elaborar una página similar a la de la figura siguiente, cuyo nombre será Menu.html, la cual servirá de complemento a otros ejercicios sugeridos más adelante. Se trata de crear una página que tenga como fondo la imagen fondo.gif y la palabra MENU en color “lima”, además de un listado numerado con los ítems Computador, Automóvil y Teléfono en color amarillo.

TABLAS Una tabla está compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar información de manera organizada. En una celda se puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado por HTML. Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son: WIDTH ="95%" Ancho de la tabla con respecto al tamaño de la página. En este caso la tabla ocupará el 95%; o WIDTH ="600", con lo que la tabla tendrá un ancho de 600 píxeles. BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla. CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido. BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.

En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su contenido. En realidad existen tres etiquetas adicionales, que colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número de filas y columnas, además de otras características: <TR> Se utiliza para definir una nueva fila. <TD> Permite agregar una celda o columna dentro de una fila <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será escrito en negrilla.

Lo anterior significa que una tabla en HTML tendrá tantas filas como etiquetas <TR> contenga y una fila estará compuesta por un número de celdas igual al de etiquetas <TD> o <TH> que la misma tenga. Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas:

Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el número de columnas o de filas que ocupará una celda en particular. Suponga que se debe crear una tabla similar a la siguiente:

Observe que la tabla está compuesta por dos filas y dos columnas, y que la celda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está distribuida en dos o más columnas o filas, se utiliza para su definición el atributo COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente corresponde al número de columnas o filas sobre las que se distribuirá la celda. Para crear la tabla que se muestra arriba, se debe escribir: <TABLE BORDER=”1”> <TR > <TH COLSPAN=”2”>TÍTULO DE LA TABLA</TH> < /TR> <TR > <TD>Celda 1</TD> <TD>Celda 2</TD> < /TR> </TABLE> Y si lo que se desea es crear una tabla como la siguiente:

EJERCICIO PROPUESTO Cree una página que contenga una tabla con un pequeño inventario de productos, similar a la que se muestra a continuación.

INSERTAR IMÁGENES Las páginas Web además de mostrar texto, son capaces de desplegar imágenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Una imagen con extensión BMP, CDR, PCX o cualquier otro formato diferente no será exhibida en el explorador y en su lugar se mostrará uno de los siguientes iconos, dependiendo del navegador que se tenga:

Una imagen puede ubicarse en cualquier parte de la página, incluso puede ocupar el lugar de un carácter. Para insertar imágenes lo único que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su atributo SRC ="ruta" permiten mostrar una imagen:

<IMG SRC ="logo.gif"> El ejemplo anterior mostrará la imagen logo.gif ubicada en el mismo directorio donde reside la página web. Si por el contrario la imagen se encuentra en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta tiene las mismas características ya definidas en el aparte dedicado a “Ubicación de Archivos” de éste módulo. Por ejemplo, SRC=”Imagenes/logo.gif” mostrará la imagen logo.gif, ubicada bajo el subdirectorio Imagenes. La etiqueta <IMG> cuenta además de SRC con otros atributos que controlan la manera como se desplegarán las imágenes: ALT ="Texto alternativo" Permite definir un texto que aparecerá en caso de que la imagen por alguna razón no pueda ser mostrada, o cuando se desplaza el puntero del ratón sobre la imagen ya desplegada. HEIGHT = ”XX” y WIDTH = ”XX” Medida en píxeles del alto y ancho de la imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que de esta manera el navegador conozca el tamaño de la imagen antes de descargarla. Con ellos podemos controlar además el tamaño original de una imagen. Si por ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 píxeles, sea mostrada a la mitad de su tamaño en el navegador, basta con escribir una de las tres líneas siguientes, siendo más recomendable la tercera: <IMG SRC ="Imagenes/logo.gif" HEIGHT = “60” > <IMG SRC ="Imagenes/logo.gif" WIDTH = “60” > <IMG SRC ="Imagenes/logo.gif" WIDTH = “60” HEIGHT = “60” > Sí se desea cambiar el tamaño de la imagen de manera proporcional, solo es necesario incluir uno de los dos atributos. ALIGN = ”Alineación de texto” Permite especificar la alineación respecto de la imagen de un texto que se escriba inmediatamente después de la etiqueta <IMG>. El texto en mención, puede alinearse arriba, utilizando TOP como valor; en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el valor para ALIGN es BOTTOM. Además, el atributo ALIGN puede recibir el valor LEFT, con lo que la imagen se colocará a la izquierda del texto, o RIGHT, caso en el que la imagen aparecerá a la derecha. BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen. Si se omite este atributo, simplemente no se dibujará ningún borde. Para comprender mejor el comportamiento de las imágenes, copie en un directorio denominado Imágenes el siguiente logotipo y luego escriba en un archivo las líneas que a continuación se muestran:

<IMG SRC ="Imagenes/logo.gif" ALT ="Logo tamaño 180 x 180 píxeles" WIDTH = 180 ALIGN = “top” BORDER=”5”>Texto alineado arriba de la imagen <P> <IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño original" ALIGN = “middle” BORDER=”3”>Texto alineado en la mitad de la imagen <P> <IMG SRC ="Imagenes/logo.gif" ALT =" Logo tamaño 60 x 60 píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de la imagen <P> <IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto

CODIGO HTML PARA CREAR ENLACES

VÍNCULOS Como ya se mencionó, una de las etiquetas más importantes de HTML es la que permite, a través de vínculos o enlaces, navegar por las diferentes páginas y sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar específico en la misma página, que abran otra página o un sitio nuevo e inclusive utilizar un vínculo para enviar un correo electrónico a una dirección dada o permitir que el usuario descargue y ejecute, o guarde archivos ubicados en una localización remota. Un vínculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que lo convierte en un elemento “sensible”. Es decir, el elemento responderá a acciones tales como hacer clic, doble clic o desplazar el puntero del ratón sobre él. Si el enlace se coloca sobre una franja de texto, ésta aparecerá subrayada y con diferente color; si es una imagen la que lo soporta, HTML entonces le colocará un borde del color definido para el atributo LINK de la etiqueta BODY.

VÍNCULOS DENTRO DE LA PÁGINA Para facilitar la navegación dentro de una página cuando su contenido es demasiado largo y al desplegarla ocupa más de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios específicos o predeterminados de la misma. Para esto, se deben utilizar dos atributos de la etiqueta <A>: <A NAME = "nombre">Texto de marca</A> sirve para marcar la zona de nuestra página a la cual saltará el explorador cuando demos clic sobre el enlace definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que en realidad contiene el enlace.

EJERCICIO 3 Abra en el editor de texto el archivo Automóvil.txt. Con los conocimientos hasta ahora adquiridos realice los cambios necesarios para crear una página similar a la siguiente, la cual guardará con el nombre de Automovil.html.

Una vez obtenido el resultado deseado, abra la página en el browser y observe que su contenido ocupa más de una pantalla. Nos interesa colocar enlaces sobre los literales a. El motor y b. La transmisión, de tal forma que al dar clic sobre cualquiera de ellos, el explorador nos lleve a la sección deseada. Para lograrlo, agregue las siguientes etiquetas en los lugares apropiados:

ENLACES A OTRA PÁGINA Para ilustrar el uso de enlaces a otras páginas, se utilizarán Menu.html (creada en el ejercicio 2), Automóvil.html y dos páginas nuevas: Computador.html y Telefono.html, que se crearán con los siguientes textos: Computador.txt y Telefono.txt. Las páginas así creadas deben guardarse dentro del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda desde allí acceder a cualquiera de las otras tres páginas (Automóvil, Computador y Teléfono). Para esto se debe editar la página Menu.html y agregar los links faltantes: <LI><A HREF="Automovil.html">Automóvil</A> <LI><A HREF="Computador.html">Computador</A> <LI><A HREF="Telefono.html">Teléfono</A> En el ejercicio 3, cuando se definieron enlaces a otras secciones dentro de la misma página, el atributo HREF contenía el nombre de una sección predefinida, precedida por el signo #. Cuando se quiere crear un enlace a otra página que reside dentro del mismo nivel, vale decir dentro del mismo directorio, el atributo HREF debe contener la ruta y el nombre completo de la página y su extensión. La ruta cumple con las mismas características ya explicadas en la sección dedicada a la ubicación de archivos.

Es importante anotar, que en lo que se refiere a nombres de archivos y páginas, HTML es sensible a las mayúsculas. Es decir, Telefono.html es diferente a telefono.html. Lo anterior no se aplica a las etiquetas como ya se explicó. ENLACES A PÁGINAS REMOTAS La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder páginas Web localizadas en cualquier servidor y punto geográfico del mundo, para lo cual lo único que se necesita conocer es su dirección, que constituye el valor (“nombre”) del atributo HREF. Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya dirección es www.masterlinux.org, es: <A HREF ="http://www.masterlinux.org"> IR A MASTERLINUX </A> Los caracteres http se refieren al tipo de servicio o protocolo que presta el servidor, en este caso protocolo de transferencia de hipertexto, en inglés HyperText Transfer Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es del alcance de éste modulo profundizar en ellos. El procedimiento para utilizar una imagen como elemento de enlace es similar al anteriormente explicado. En el siguiente ejemplo, se utilizará la imagen Hormiga.gif como elemento de enlace. <A HREF ="http://www.masterlinux.org"> <IMG SRC ="Hormiga.gif" HEIGHT=100 ALIGN ="left"> </A>

ENLACE AL SERVICIO MAIL El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrónico para enviar un mensaje a la dirección definida en el atributo HREF. Este

enlace, al igual que los anteriores, puede ser colocado indistintamente sobre imágenes o texto. <A HREF=" mailto:[email protected]"> Escribanos </A> si desea recibir más información. Al abrir esta página en el explorador, la palabra “Escribanos” aparecerá subrayada, y al dar clic sobre ella se desplegará la herramienta de Mail, lista para enviar un mensaje a mi cuenta de correo.

MARCOS O FRAMES Los marcos o FRAMES, son etiquetas o procedimientos especiales de HTML que permiten dividir, lo que aparentemente es una sola página, en diferentes zonas o ventanas, independientes unas de las otras. En cada ventana se puede mostrar una página diferente. La división puede hacerse verticalmente por columnas, de manera horizontal por filas, o una combinación de ambas. La página contenida en cada marco tendrá definidas sus propiedades de manera independiente y desde un marco se puede, a través de enlaces, hacer que se despliegue una página cualquiera en otro marco, lo que los hace muy útiles para varios propósitos. Por ejemplo, en una misma ventana se puede definir un marco que contenga el logotipo o “banner” de la compañía, un segundo marco para desplegar el menú de navegación, y por último un marco que muestre la página o documento actual.

La construcción de páginas que contienen marcos se hace de manera similar a la de cualquier documento HTML. La única diferencia radica en el hecho de que la etiqueta <BODY> es reemplazada por <FRAMESET>, que es la etiqueta que define la estructura de los frames o marcos en los que se dividirá la ventana del navegador.Para explicar el uso de <FRAMESET>, y el de otras etiquetas necesarias para la implementación de frames, se utilizarán cuatro páginas ya creadas: Computador.html, Automovil.html, Telefono.html y Menu.html, y una nueva que servirá como página de definición de los marcos, la cual debe guardarse con el nombre de Marcos.html, dentro del mismo directorio de las otras páginas mencionadas. Se creará como ejercicio una página dividida verticalmente en dos marcos:

En el de la izquierda, ocupando el 20% de la pantalla, aparecerá el contenido de la página “MenuFrames.html”; mientras que en el marco de la derecha que ocupará el 80% restante, se desplegará inicialmente la página Computador.html o cualquiera de las otras dos, dependiendo del enlace que se active en el frame de la izquierda. Para este propósito se deben escribir las siguientes líneas: <HTML> <FRAMESET COLS="20%, 80%"> <FRAME SRC = "MenuFrames.html" NAME ="izquierda"> <FRAME SRC="Computador.html" NAME ="derecha"> </FRAMESET> <NOFRAMES> Lo sentimos, su navegador no soporta FRAMES </NOFRAMES> </HTML> La etiqueta FRAMESET sirve para dos propósitos principales: definir la orientación de los marcos que puede ser horizontal (ROWS) o vertical (COLS); y el número y tamaño de cada marco. En el ejemplo, el atributo COLS ="20%, 80%", divide la pantalla en dos marcos verticales, ocupando el primero de ellos a la izquierda, el 20%, y el segundo el 80% del espacio. Para conformar n marcos dentro de una pantalla, el atributo COLS o ROWS debe contener n valores separados por comas. Estos valores pueden ser porcentajes o valores absolutos; en cuyo caso el marco así definido, tendrá un espacio igual al del número de píxeles indicado. Si se quiere por ejemplo, dividir la pantalla de manera horizontal en cuatro frames, y se necesita que el primero de ellos tenga una altura fija de 40 píxeles, el segundo ocupe el 50% del espacio restante, y los otros dos se dividan el espacio de manera proporcional: <FRAMESET ROWS="40, 50%, 25%, 25%"> Otra forma de definir el tamaño de los frames consiste en utilizar el carácter *. En el siguiente ejemplo, una pantalla de 800 píxeles será dividida en tres marcos verticales: el primero de 400 píxeles (50% de 800), el segundo de 260 (valor absoluto) y el tercero 140 píxeles, correspondiente al espacio restante. <FRAMESET COLS="50%, 260, *"> Las etiquetas <FRAME> definen entre otras cosas el origen de la página que contendrá y el nombre del marco. En el ejercicio propuesto, se observan dos de estas etiquetas, en la primera se define el marco denominado “izquierda” donde se desplegará la página MenuFrames.html y en el segundo marco de nombre “derecha” se mostrará la página Computador.html. Para que el ejercicio sea completamente funcional, es necesario editar el archivo Menu.html como se indica a continuación, guardándolo luego como MenuFrames.html: <A HREF = "Computador.html" TARGET = "derecha"> Computador</A> <A REF ="Automovil.html" TARGET ="derecha"> Automovil</A> <A REF ="Telefono.html" TARGET ="derecha"> Teléfono</A> El atributo TARGET de la etiqueta <A>, cuyo valor en el ejemplo es “derecha”, indica en cual de los marcos definidos se debe desplegar la página correspondiente a cada uno de los enlaces. Si se omite este atributo, el documento será mostrado dentro del mismo marco. Otro

valor posible para TARGET es “blank”, con lo que se abrirá una nueva ventana en la cual se mostrará la página correspondiente al enlace invocado. La etiqueta <FRAME> tiene otros atributos que permiten controlar el comportamiento de cada marco: <FRAME SRC="xx" NAME="xx" MARGINWIDTH="x" MARGINHEIGHT="y" SCROLLING="z" FRAMEBORDER="w" NORESIZE> Donde: MARGINWIDTH="x" define el valor en píxeles del margen izquierdo y derecho entre el contenido y los bordes del frame. El valor de x debe ser mayor que 1. Si este atributo es omitido, el browser se auto ajustará para hacer el mejor despliegue posible del contenido del marco. MARGINHEIGHT="y" trabaja de manera similar a MARGINWIDTH, pero controla los márgenes superior e inferior del frame. El atributo SCROLLING="z" soporta tres valores posibles yes, no y auto. Se utiliza para controlar la aparición o no de las barras de desplazamiento (scrollbars), cuando el contenido del frame excede el área del mismo. FRAMEBORDER="w" se utiliza para controlar que el browser muestre o no los bordes del marco. En Internet Explorer w debe ser un valor numérico (cero significa sin bordes), mientras que en Netscape Navigator w toma cualquiera de los valores yes o no. Por defecto, el tamaño de todos los frames especificados en una página puede ser cambiado por el usuario arrastrando los bordes del marco. Si se desea mantener fijo el tamaño predefinido de un marco, basta con agregar el atributo

NORESIZE dentro de la etiqueta de definición. Aunque no es muy común en la actualidad, si el navegador desde donde se accede la página no soporta el procedimiento FRAMES, se desplegará en lugar de los marcos definidos, la información contenida dentro de las etiquetas

<NOFRAMES> y </NOFRAMES>.

Dentro de un documento que contiene frames pueden existir varias etiquetas <FRAMESET> , lo que se conoce como anidamiento. Con este procedimiento, un marco puede ser subdividido en otros marcos, para lo cual la etiqueta <FRAME> que define las características del marco a subdividir se reemplaza por una nueva etiqueta de definición de frames. En el ejemplo siguiente, la pantalla es dividida inicialmente en dos zonas horizontales, mediante la etiqueta <FRAMESET rows="30%, *"> ; la etiqueta <FRAMESET cols="25%, *"> , divide al segundo marco horizontal en dos nuevos marcos verticales. <HTML> <HEAD> <TITLE>Ejemplo de Frames</TITLE> </HEAD> <FRAMESET ROWS="30%, *"> <FRAME SRC = "banner.htm">

<FRAMESET COLS="25%, *"> <FRAME SRC="menu.html" NAME ="menu"> <FRAME SRC="princ.html" NAME ="princ"> </FRAMESET> </FRAMESET> </HTML>

FORMULARIOS Los formularios son por excelencia los elementos utilizados para recolectar información de los usuarios que luego es enviada al servidor para ser procesada. Están constituidos por un conjunto de elementos denominados controles, cuyo contenido puede ser editado o activado por el cliente. Un control es básicamente un elemento de HTML que pertenece a un tipo y que tiene asociado un nombre y un valor. El envío se hace mediante un controlador de formulario (generalmente un botón). Cuando el usuario, después de completar un formulario lo envía, en realidad está transmitiendo un conjunto de parejas: nombre del control y valor. Un formulario puede contener además de controles, imágenes, texto en todos los estilos, tablas, etc., pero nunca puede contener a otro formulario. Para declarar un formulario se utiliza la etiqueta FORM que consta básicamente de dos atributos: <FORM ACTION ="programa" METHOD ="método"> … </FORM> En programa se especifica un servicio o un programa escrito en cualquiera de los lenguajes compatibles (CGI, PERL, PHP, VBSCRIPT, etc.), que se encargará de procesar las variables contenidas en cada uno de los controles incluidos dentro del formulario. Por no ser la programación del alcance de este módulo, únicamente se utilizará aquí la acción ACTION ="mailto: dirección de correo", cuya acción será enviar a la dirección de correo especificada los datos contenidos en los controles. El atributo METHOD soporta dos valores: el método POST y el método GET. El primero de ellos se utiliza cuando se requiere procesamiento externo de los datos del formulario o la introducción de modificaciones al destino, por ejemplo, escribir en una base de datos. El método GET es ideal para el envío de formularios que no producen ninguna modificación en el destino, ejemplo una consulta sobre una base de datos. Los controles disponibles en HTML, se pueden clasificar según su utilidad en cuatro tipos: controles para texto, opciones, menús y botones.

CONTROLES PARA TEXTO Texto de una sola línea Para especificar dentro de un formulario un control de texto de una sola línea que contendrá cadenas de texto, se utiliza la etiqueta: <INPUT TYPE ="text" NAME ="Nombre" SIZE ="60" MAXLENGTH ="80" VALUE = "Texto que aparecerá cuando se abra la página">

Con el atributo NAME ="Nombre" se bautiza el campo para distinguirlo de otros campos del mismo tipo. El texto que introduzca el usuario, quedará asociado a la variable “Nombre”. El atributo SIZE ="60" especifica la longitud del campo en caracteres que se visualizará en la pantalla (para el ejemplo 60), mientras que MAXLENGTH ="80" indica el número máximo de caracteres (en este caso 80), que el usuario podrá introducir. VALUE = "Texto que aparecerá cuando se abra la página" define el valor inicial del control, que aparecerá cuando la página que contiene el formulario sea abierta. Este atributo puede dejarse en blanco, especificando como valor " ", o simplemente omitiendo el atributo. Otro control para texto de una sola línea es el conocido como control de tipo password. Funciona y se define de manera similar al anterior, con la diferencia de que los caracteres introducidos dentro del control no serán visibles para el usuario, en su lugar se mostrará un conjunto de asteriscos. Área de texto Este control se utiliza cuando se sabe de antemano que los datos ingresados por el usuario ocuparán más de una línea. Para construir uno de estos campos se debe especificar además del nombre de la variable a la cual se asociará el texto, el número de filas y columnas que se visualizarán en la pantalla. La sintaxis de esta etiqueta es como sigue: <TEXTAREA NAME ="nombre" ROWS = "2" COLS ="60"> Texto </TEXTAREA>

La etiqueta anterior mostrará sobre la página un campo de dos líneas de 60 caracteres de ancho. Lo anterior no significa que el usuario no pueda introducir texto que sobrepase una de estas dos dimensiones. Cuando esto ocurre, simplemente se activará el scrollbar vertical u horizontal según sea el caso. La variable nombre contendrá el texto que el usuario introduzca. Observe que esta etiqueta debe cerrarse con </TEXTAREA>, y que los caracteres contenidos dentro de las dos etiquetas, en el ejemplo “Texto”, constituyen el valor inicial. CONTROLES DE OPCIÓN Radio Botones Este tipo de control se utiliza cuando se quiere que el usuario escoja una y solo una de entre varias opciones disponibles. Por ejemplo, si se está realizando una encuesta y es necesario conocer el estado civil del encuestado, se puede colocar dentro del formulario algo similar a:

Para lograrlo debemos escribir las siguientes líneas: <PRE> <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Soltero"> Soltero(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Casado"> Casado(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="U.Libre" CHECKED> U. Libre <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Viudo"> Viudo(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Divorciado"> Divorciado(a) </PRE> En el ejemplo, la variable EstadoCivil tendrá como valor U.Libre que es la que se encuentra seleccionada. Si se quiere que una de las opciones aparezca seleccionada por defecto, se debe agregar a la etiqueta que define tal opción el atributo CHECKED.

Casilla de verificación Al contrario de los radio botones, la casilla de verificación permite seleccionar más de una opción. La sintaxis de su etiqueta es como sigue: <INPUT TYPE ="checkbox" NAME ="nombre" VALUE ="valor" CHECKED> Si el usuario selecciona esta casilla, la variable nombre contendrá el texto especificado en el atributo valor. MENÚ DESPLEGABLE Esta es otra forma de permitir al usuario escoger una única opción dentro de varias disponibles, ocupando dentro de la página un área menor a la que se necesitaría si se utilizaran radio botones. La encuesta del estado civil desplegada luciría como se muestra más adelante y se construye mediante las siguientes líneas: <SELECT NAME="EstadoCivil"> <OPTION>Soltero(a) <OPTION>Casado(a) <OPTION SELECTED>U. Libre <OPTION>Viudo(a) <OPTION>Divorciado(a) </SELECT> Una variante a este tipo de control se consigue agregando el atributo MULTIPLE a la etiqueta SELECT, lo que permite seleccionar más de un valor entre las opciones posibles: <SELECT NAME="EstadoCivil" MULTIPLE>

BOTÓNES Aunque se pueden implementar otros usos, los botones son controladores que se utilizan básicamente para: enviar (SUBMIT) el formulario o para reinicializar o borrar (RESET) los campos del mismo. El botón de tipo SUBMIT, ejecutará el programa especificado en el atributo ACTION ="programa" de la etiqueta FORM, cuando el usuario de clic sobre él. La forma de construir botones SUBMIT y RESET es como sigue: Etiqueta B o t ó n

<INPUT TYPE ="submit" VALUE ="Enviar">

<INPUT TYPE ="reset" VALUE ="Borrar"> En ambos casos, el valor contenido en el atributo VALUE, corresponde al texto que aparecerá sobre el botón.