Internet y Diseño de páginas web

Transcripción

1 Taller de Matemáticas Internet y Diseño de páginas web Por

2 INTRODUCCIÓN Los presentes apuntes se centran en la práctica del acceso y la utilización de Internet y del diseño de páginas web. Otras consideraciones teóricas o históricas sobre el inicio de Internet o del lenguaje HTML, o sobre la programación detallada de las páginas web, puede encontrarse en Internet en multitud de sitios web, entre los que señalo algunos a continuación: Este sitio web es muy recomendable por su contenido variado y de calidad. Podemos encontrar aquí manuales sobre redes, programación y diseño de páginas web, entre otros.( ) Esta dirección lleva a un manual sobre el lenguaje HTML interactivo bastante asequible. ( Está dirección corresponde a un Tutorial de HTML alojado en un servidor de la Universidad de Murcia. ( ) Otro manual interactivo de HTML. ( ) A continuación, también aparecen algunas direcciones en las que podemos encontrar recursos gráficos útiles para la creación de páginas web: Taller de HTML - Además de un manual sobre HTML podemos encontrar multitud de recursos para la creación de páginas web. (www2.uca.es/taller-html/taller-html.html) Ciudad GIF - Imágenes en formato.gif ( Aquí encontraremos algunas imágenes animadas en formato.gif ( Más imágenes animadas en formato.gif ( MundoGif - Más de lo mismo. ( 2

3 Internet 3

4 Internet INTERNET 1.- Cómo conectarse a Internet. Actualmente podemos conectarnos a Internet a través de la línea telefónica básica (RTC), o bien, a través de una línea telefónica de banda ancha (DSL o cable). La diferencia fundamental entre uno y otro tipo de línea está en la velocidad a la que los datos son transmitidos entre nuestro ordenador e Internet, que siempre es menor cuando utilizamos la línea telefónica básica. Otro inconveniente de la línea telefónica básica es que, durante la conexión a Internet, la línea telefónica permanecerá ocupada, por lo que no podremos recibir llamadas telefónicas en esos momentos. Con las líneas de banda ancha esto no ocurre. Aunque, aparentemente, la mejor solución es contratar una línea telefónica de banda ancha, debemos tener en cuenta otros factores como el número de horas mensuales que utilizamos Internet y la franja horaria en la que nos conectamos. En muchas ocasiones es aconsejable utilizar la línea telefónica básica porque resulta mucho más económica. Un ejemplo de este caso sería utilizar Internet durante 10 horas al mes, a partir de las 18 horas a diario o a cualquier hora los fines de semana, disponiendo del Bono Cuidad de Telefónica, lo que supondría un gasto mensual aproximado de 4,20 + IVA, mientras que si utilizáramos una línea de banda ancha nos costaría alrededor de 40 + IVA. Por supuesto que cuantas más horas nos conectemos a Internet y haciéndolo entre las 8 y las 18 horas de Lunes a Viernes, más nos interesará una línea de banda ancha. 1.a.- Conexión a través de una línea telefónica básica (RTC). Nuestro ordenador debe tener un modem instalado en su interior, o bien, conectaremos un modem externo a un puerto serie. El modem es el aparato que permite que nuestro ordenador se comunique con otros ordenadores en Internet. Para que el modem funcione correctamente debe estar instalado en nuestro ordenador el software que le acompaña y es necesario conectarle a una toma de la línea telefónica. Al abrir debemos ver la carpeta. En caso contrario, será necesario instalar el servicio de acceso telefónico a redes del sistema operativo. Para ello, accedemos al panel de control, dentro de él a Agregar y quitar programas y después a la ficha Instalación de Windows. Seleccionamos Comunicaciones y pulsamos el botón Detalles. Marcamos la casilla que se encuentra a la izquierda de Acceso telefónico a redes y aceptamos hasta quedar de nuevo en el panel de control. Comprobamos ahora, abriendo el icono el protocolo TCP/IP. En caso contrario, pulsamos el botón y pulsamos. en el panel de control, que está instalado, seleccionamos 4

5 Internet A continuación elegimos en la lista de fabricantes y seleccionamos en la lista de protocolos de red. Pulsamos Aceptar y comienza la instalación del protocolo seleccionado. Durante este proceso es posible que sea necesario introducir el CD del sistema operativo y al finalizar la instalación será preciso reiniciar el ordenador. Ahora ya podemos crear nuestra conexión de acceso telefónico a Internet. Para ello, dentro de la carpeta, en Mi PC, abrimos el asistente para. En la primera página escribimos el nombre que servirá para que podamos identificar nuestra conexión de acceso telefónico a redes en el ordenador, y seleccionamos el modem que deberá utilizarse. Pasamos a la página siguiente e introducimos el número de teléfono de acceso al nodo de comunicaciones de la compañía telefónica que nos permita realizar la conexión a Internet. Para el MECD es el número Pulsamos el botón Siguiente y a continuación Finalizar. La nueva página debe configurarse como aparece en la ilustración de abajo para conectarnos a Internet a través del CNICE. Para terminar de configurar nuestra conexión de acceso telefónico a redes, situamos el puntero del ratón sobre el icono que acabamos de crear y, pulsando el botón derecho, elegimos Propiedades. En la página que aparece pulsamos en Tipo de servidor y en la nueva página dejamos marcada, solamente, la casilla del TCP/IP y pulsamos el botón Configuración TCP/IP. El número de teléfono del nodo de acceso, los datos del DNS, el nombre de usuario y la contraseña son facilitados por la compañía con la que contratemos el servicio de acceso a Internet o, en el caso de los docentes de este país, por el CNICE. En este último caso, podemos utilizar, además de las DNS principal y secundaria que se muestran a la izquierda, las siguientes: DNS principal: y DNS secundaria: Por último pulsamos Aceptar hasta volver a la carpeta de Acceso telefónico a redes. 5

6 Internet Ahora hacemos doble clic en el icono de nuestra conexión a Internet, introducimos el nombre de usuario y la contraseña y pulsamos en Conectar. Tras unos segundos, en los que nuestro ordenador negocia las condiciones de conexión con el servidor al que se conecta, se establece la conexión a Internet. Mientras la conexión a Internet está abierta se muestra un icono con dos pequeños ordenadores en la parte derecha de la barra de tareas de Windows. Pinchando en este icono podemos desconectarnos de Internet. Para hacer más cómoda la conexión a Internet, podemos crear un icono de acceso directo a nuestra conexión de acceso telefónico. Para ello, con el puntero del ratón sobre el icono de nuestra conexión, pulsamos el botón derecho y seleccionamos Crear acceso directo. El ordenador nos mostrará la siguiente advertencia: Pulsamos en Si y ya tenemos nuestro icono de acceso telefónico en el escritorio. 1.b.- Conexión mediante una línea de banda ancha. Existen distintas formas de conectarse en función de que se utilice una línea ADSL, un kit ADSL (conexión ADSL sobre una línea telefónica básica) o una conexión telefónica por cable (Retecal). En cualquier caso, es siempre recomendable que un técnico de la compañía con la que contratemos la línea, nos instale la línea y los circuitos necesarios en el ordenador, y configure el modem o el router (aparato similar al modem que se usa para conectar el ordenador a una línea ADSL) adecuadamente. 2.- Navegación por Internet. Si disponemos de una conexión que utiliza la línea telefónica básica, hemos de conectarnos a Internet antes de poder navegar. En una conexión de banda ancha sólo necesitamos abrir al navegador de Internet, pues al arrancar el ordenador ya quedamos conectados a la red. Veremos aquí como utilizar Internet Explorer (el navegador de Internet de Microsoft), dado que está en todos los ordenadores, si bien existen muchos otros navegadores de Internet. Arranque del navegador de Internet. El icono con una la letra e azul pone en marcha el navegador y, cuando le abrimos por primera vez, nos muestra una página web de Microsoft relativa al propio navegador. 6

7 Internet La página de inicio. La página de inicio es la que se muestra cada vez que se pone en marcha el navegador de Internet. Para cambiar la página web que se mostrará por defecto al abrir el explorador, debemos acceder a las Opciones de Internet que encontramos en el menú Herramientas, y en el recuadro Dirección de la ficha General, escribimos la dirección de Internet que deseamos que se muestre cada vez que se inicie el explorador. Podemos, también, pulsar el botón Usar página en blanco para que no muestre ninguna página web al iniciarse, o bien, pulsar el botón Usar actual para que la dirección de la página web que esté visualizándose en ese momento, pase al recuadro Dirección y sea la página de inicio de ahí en adelante. Visitar una página web. Basta con escribir la dirección de la página web que deseamos visitar en la barra de direcciones y pulsar <Intro> para que el navegador muestre su contenido. Los hiperenlaces. Cuando visualizamos una página web podemos acceder a nuevas páginas u otra información a través de los hipervínculos o hiperenlaces. Un hipervínculo es una palabra o una imagen asociada a una página web, de forma que, haciendo clic sobre ella, el navegador muestra la página asociada. De esta forma (utilizando los hipervínculos) podemos movernos de una página web a otra sin necesidad de escribir su dirección en la barra de direcciones. Cuando situamos el puntero del ratón sobre un hipervínculo, cambia su forma de flecha por una mano, lo que nos indica que, si hacemos clic sobre él, nos mostrará otra página web. Actualizar la página. A veces, al cargarse una página en nuestro navegador, algunos elementos no se muestran. En ese momento podemos pulsar sobre el botón Actualizar para que se recargue la página y, probablemente, los elementos que no se habían cargado en un primer momento se cargarán ahora y serán mostrados por el navegador. Imprimir la página que estamos visualizando. Basta con pulsar el icono Imprimir, de la barra de herramientas del navegador, para que se envíe la página a la impresora. También podemos situar el puntero del ratón sobre algún lugar inactivo de la página que vemos y, pulsando el botón derecho del ratón, elegir Imprimir. Casi siempre (sobre todo si la página que deseamos imprimir está formada por varios marcos) aparecerá una ventana de diálogo de impresión, en la que podremos hacer algunos ajustes antes de que la página sea enviada a la impresora. 7

8 Internet Los favoritos. Los favoritos son las direcciones de Internet que nos interesa recordar. Con el fin de facilitar la posterior conexión a esas páginas, el navegador dispone de una carpeta llamada Favoritos a la que accedemos pulsando sobre el botón correspondiente de la barra de herramientas. Para añadir la dirección de la página web que estamos visualizando basta con pulsar el botón derecho del ratón, elegir Agregar a Favoritos y confirmar los datos de la página. El historial. Cuando navegamos por Internet, toda la información (texto e imágenes) que vemos en las distintas páginas web queda almacenada en nuestro ordenador de forma permanente. En las Opciones de Internet podemos configurar durante cuanto tiempo queremos que esos archivos permanezcan en nuestro ordenador. Si pulsamos el botón Historial aparece una lista de enlaces a las páginas visitadas (durante los últimos 20 días, por defecto), de manera que podremos volver a ellas con solo hacer clic en el enlace correspondiente. Ver las páginas web sin estar conectado a Internet. Una forma de ahorrar tiempo de conexión a Internet, y con ello ahorrar dinero si nos conectamos mediante la línea telefónica básica y un modem, consiste en visualizar las páginas web que nos interesan sin analizar en ese momento la información que contienen, pasando rápidamente de una a otra en cuanto termina la carga de todos los elementos de cada una. Posteriormente, sin conectarnos a Internet, abrimos el navegador y seleccionamos Trabajar sin conexión en el menú Archivo, hacemos clic en Historial y visualizamos las páginas analizando la información durante todo el tiempo que necesitemos. Mientras trabajamos sin conexión a Internet, los hiperenlaces asociados a páginas que no fueron cargadas previamente no funcionan, dando lugar su activación a un mensaje de advertencia y la posibilidad de conectarnos a Internet en ese momento o continuar trabajando sin conexión. 2.a.- Búsqueda de información en Internet. En Internet existe mucha información en diferentes formatos y la mayor parte no tiene utilidad, o bien, sería discutible su uso, por lo que se hace imprescindible buscar la información que nos pueda interesar, filtrándola del resto de la información. Disponemos en Internet de páginas web que nos facilitan la búsqueda. Son páginas de acceso a índices (, ) o a buscadores (,, ). Los índices son grandes bases de datos que contienen informaciones sobre páginas web, organizadas en categorías, a las que accedemos mediante un índice hipertextual, eligiendo primero la categoría, después una subcategoría (a veces nos encontramos varios niveles categorizados) y al final accedemos a una lista de páginas web relacionadas con el tema que hayamos elegido. Este sistema de búsqueda es adecuado cuando no tenemos una idea clara de la información que buscamos, es decir, cuando buscamos cualquier recurso relacionado con un determinado tema. 8

9 Internet Las páginas de acceso a los índices suelen disponer también de la posibilidad de buscar determinadas palabras dentro de la base de datos, para localizar rápidamente las páginas en las que aparezcan dichas palabras. Los buscadores son grandes ordenadores dedicados exclusivamente a recopilar información, de forma automática, de las páginas web disponibles en Internet, almacenarla en sus bases de datos y permitirnos realizar búsquedas dentro de ellas. Generalmente, las bases de datos de estos buscadores contienen más información y está más actualizada que en el caso de los índices. Cuando buscamos algo muy concreto son, sin duda, la mejor opción. Actualmente, uno de los mejores buscadores es ( Para realizar una búsqueda con Google o con otros buscadores similares, basta con escribir en el campo de búsqueda la palabra (o palabras separadas por espacios) que deseamos buscar en las páginas web. El buscador nos devolverá una lista de páginas clasificada por las que muestren mayor coincidencia con el criterio de búsqueda (que contengan todas las palabras buscadas) y, a continuación, las páginas que coincidan con alguna de las palabras que formen parte de ese criterio. Si deseamos localizar algo como matemáticas en educación secundaria lo escribiremos así, es decir entrecomillado, y el buscador lo interpretará como si se tratara de una sola palabra. También podemos combinar un entrecomillado con otras palabras, separando con un espacio el entrecomillado y la otra palabra que deseamos buscar. Siempre es recomendable utilizar un criterio de búsqueda lo más estricto posible y, si no se producen resultados, eliminar alguna palabra del criterio de búsqueda y buscar de nuevo, pues de otra forma, obtendremos una lista de resultados demasiado grande. Además, después de las primeras dos o tres páginas de resultados, no suelen encontrarse páginas útiles. Los buscadores más actualizados admiten acentos, pero otros no, por lo que será bueno intentar la búsqueda introduciendo las palabras acentuadas y, si no se obtiene el resultado esperado, probar a continuación sin acentuar. 2.b.- Extracción de los recursos encontrados para usarlos de forma local. Una vez localizada la información en Internet, en el caso de querer copiar esa información para usarla de forma local (en ordenadores sin conexión a Internet), por ejemplo para confeccionar apuntes o para realizar alguna composición multimedia para el aula, procederemos así: Si es texto: Seleccionamos el texto que nos interese mediante el puntero del ratón. Pulsamos el botón derecho del ratón con el cursor sobre el texto seleccionado y elegimos copiar en el menú contextual. Abrimos Word o cualquier otro procesador de textos y pegamos el texto en una página en blanco o en el documento que nos interese. 9

10 Internet Si es una imagen (1): Situamos el puntero del ratón sobre la imagen y pulsamos el botón derecho del ratón. Elegimos copiar en el menú contextual. Abrimos Word o cualquier otro procesador de textos que admita imágenes o bien, un programa de tratamiento de gráficos y pegamos la imagen en él. Si es una imagen (2): Situamos el puntero del ratón sobre la imagen y pulsamos el botón derecho del ratón. Elegimos Guardar la imagen como en el menú contextual. Seleccionamos el destino, damos nombre a la imagen y pulsamos Guardar. Si es un archivo que no se abre en Internet (descargar un archivo): Pulsamos sobre el enlace de hipertexto que conduce al archivo. Seleccionamos el destino del archivo en nuestro ordenador y pulsamos Guardar. Si es un archivo que se abre desde Internet (.doc,.pdf,...) porque tenemos instalado en nuestro ordenador el programa con el que fue creado, pero, en vez de abrirlo, solo queremos guardarlo en el disco duro: Situamos el puntero del ratón sobre el enlace de hipertexto que conduce al archivo. Pulsamos el botón derecho del ratón y elegimos Guardar destino como Seleccionamos el destino del archivo en nuestro disco duro y pulsamos Guardar. Si es un programa Java que se ejecuta dentro de una página web (para usuarios avanzados): En el menú del navegador Internet Explorer elegimos Ver - Código fuente. Buscamos dentro del código el nombre del archivo Java (.class). Desde el Explorador de Windows abrimos la carpeta Archivos temporales de Internet de nuestro sistema y buscamos en ella el archivo Java del que ya sabemos el nombre. Una vez localizado lo copiamos a otra carpeta (si tiene un número entre corchetes en el nombre debemos borrarlo y dejar el nombre sin número ni corchetes). A continuación creamos una página web en la que deberá aparecer la o las líneas de código que ponen en marcha el programa Java y que copiaremos del código fuente de la página en la que hemos localizado el recurso Java. Guardamos nuestra página web en la misma carpeta donde está el programa Java y al abrir nuestra página con el navegador de Internet se pondrá en marcha el programa Java. En ocasiones el programa Java principal necesita llamar a otros programas para poder funcionar correctamente. En ese caso, cuando intentemos poner en marcha nuestra página web con el programa Java, debemos fijarnos en los mensajes de error que se muestren, pues ellos nos dirán los nombres de los archivos complementarios que deberemos buscar en la carpeta Archivos temporales de internet y copiar a la carpeta donde tenemos nuestra página web para que todo funcione correctamente. 10

11 Internet 3.- El correo electrónico. Descripción del correo electrónico. El correo electrónico, llamado también habitualmente , es la aplicación más extendida en Internet. Permite al usuario enviar y recibir mensajes escritos a otros usuarios de la red situados en cualquier lugar del mundo, siempre que dispongan de una dirección de correo electrónica ( address). Una característica importante del correo electrónico es, que no es necesario que el destinatario de un mensaje esté frente a la pantalla en el momento en que otro usuario se lo envía. Y tampoco es necesario que su ordenador esté conectado a la red o que esté encendido. Los mensajes que le llegan se almacenan en el ordenador servidor de correo en el que el destinatario está dado de alta. Después, cuando éste se conecta con su servidor utilizando su programa de correo electrónico, los mensajes se descargan en el ordenador del destinatario y, generalmente, se borran del servidor. El correo electrónico se está convirtiendo en un importante medio de comunicación porque, además de ser rápido y económico, ofrece muchas posibilidades: permite intercambiar información, comunicar ideas, debatir temas, compartir ficheros, editar y revisar documentos, etc. Dirección electrónica. Para hacer uso del correo electrónico es necesario contar con una dirección electrónica (o dirección ). La dirección de correo electrónico proporciona toda la información necesaria para que pueda enviarse un mensaje hasta cualquier parte del mundo. Aunque las direcciones de correo electrónico pueden parecer a primera vista algo extrañas y a veces incomprensibles, hay una lógica en su construcción que es importante conocer para aprender a descifrarlas. Las direcciones se componen siempre de tres partes: Ejemplo: Identificador del usuario el Dominio o dirección del servidor del usuario (donde tiene abierta su cuenta) Una dirección de un usuario del servidor de correo de Terra tiene la forma: identificador@terra.es Las direcciones de correo electrónico se construyen jerárquicamente. Así, la dirección anterior puede descifrarse del siguiente modo: identificador Login del usuario (nombre de usuario) Este signo que aparece en toda dirección se sitúa entre el nombre del usuario y dominio o la dirección del servidor donde está dado de alta terra Indica el dominio de Terra. es Dominio de España El CNICE facilita, gratuitamente, direcciones de correo electrónico a todos los profesores que lo soliciten, además de espacio para alojar páginas web. 11

12 Internet Al ser dado de alta en Internet a través del CNICE, el administrador del sistema enviará al usuario, además de un Identificador de usuario (login) y una password o palabra clave (contraseña) para que pueda acceder a la red, una dirección de correo electrónico que le permita utilizar esa aplicación. Actualmente, para conectarse a Internet a través del CNICE, debe utilizarse como nombre de usuario profesorado@mecd-cnice ó profesorado@mec_pntic y como contraseña docente. No debe confundirse la dirección de correo electrónico con el identificador de usuario (login) ni con la password. La dirección de correo, como la dirección postal, es pública, el usuario se la da a otros usuarios para que puedan enviarle mensajes. La password, sin embargo, es confidencial y no debe darse a nadie. Netiquette Como toda forma de comunicación, también Internet tiene su código de buena conducta o de buen uso. Es lo que se llama Netiquette. Existe en la red una gran documentación, fácil de conseguir, sobre este tema. A modo de ejemplo, se citan a continuación algunas de las normas más destacadas: No escribir en letras mayúsculas. Las letras mayúsculas en la Red se traducen como gritos o como opiniones fuertes. Por tanto, las mayúsculas se reservan sólo para enfatizar una palabra o una frase, aunque también puede hacerse escribiendo la frase o la palabra entre asteriscos, *tal que así*. No dejar nunca en blanco el título (Asunto) de un mensaje. Además es conveniente que el título resuma el contenido del mensaje. No escribir nada en la pantalla que no diríamos a alguien cara a cara. Cuando se responde a un mensaje previo, incluir la cita o el párrafo al que se replica, pero NO incluir entero el mensaje original al que se responde. Hay que tomarse la molestia de borrar, cortar y pegar de manera que sólo permanezcan las partes relevantes del original. Smileys El lenguaje escrito tiene la limitación, y más aún cuando se escribe con prisas, de que no siempre es fácil transmitir certeramente dobles sentidos, frases ingeniosas o comentarios humorísticos ya que el interlocutor ni ve nuestros gestos ni escucha nuestro tono de voz. Y esto sin contar con que en ocasiones nos dirigimos a personas que no conocemos, con las que estamos poco familiarizados o, sencillamente, que tienen un marco cultural diferente que les impide entender nuestro particular sentido del humor. Los smileys (representaciones gráficas de gestos) se utilizan en Internet precisamente para intentar salvar de alguna manera esta pequeña barrera que impone el lenguaje escrito. Cuando no se está seguro de que un comentario hecho con un cierto propósito va a ser bien entendido, puede incluirse un gesto ("smiley") que refuerce el sentido que quiere darse. Aunque existen muchos más, se ofrece a continuación un listado de los smileys más comunes: :-) Sonrisa genérica :"-( Llorando :-@ Gritando I-O Bostezo, aburrimiento :-# Censurado, secreto :-( Triste :-\ Indecisión :-C Increíble :-O Sorpresa %-} Comentario tonto ;-) Complicidad >- Soy mujer :- Disgustado :- Soy varón :-X Besos :-e No estoy de acuerdo 12

13 Internet 3.a.- Configurando el correo electrónico. Existen, básicamente, dos formas de usar el correo electrónico: desde un programa cliente de correo electrónico (POP) y desde una página web que nos permita acceder a nuestro servidor de correo electrónico (web mail). Algunos servidores de correo permiten el acceso a las cuentas de correo de sus usuarios de cualquiera de las dos formas citadas (CNICE, Terra, Yahoo...), pero otros solo permiten acceder mediante un cliente de correo electrónico (Jazzfree,...) y otros, como Hotmail, solo ofrecen el servicio web mail. Configurar un cliente de correo electrónico (POP). Hay en el mercado muchos programas creados para gestionar el correo electrónico, Outlook Express, Eudora, Netscape Messenguer, Pegasus, etc. Todos ellos permiten enviar y recibir mensajes de correo electrónico a través de Internet, si bien nos centraremos en Outlook Express por ser el programa que se suministra con Windows y, por lo tanto, está disponible en todos los ordenadores. Para poder configurar una cuenta de correo electrónico en uno de estos programas, es necesario disponer de los siguientes datos: Dirección de correo electrónico, por ejemplo: marialuz@mimosa.pntic.mec.es Nombre de cuenta, por ejemplo: marialuz Servidor de correo entrante (POP3), por ejemplo: mimosa.pntic.mec.es Servidor de correo saliente (SMTP), por ejemplo: hermes.pntic.mec.es Contraseña Estos datos deben ser suministrados por la empresa u organismo que nos da el servicio de correo electrónico. En el caso del MECD, puede solicitarse una cuenta de correo personal a través de la dirección de Internet del Centro Nacional de Información y Comunicación Educativa, y dentro de ella, en Servicios para usuarios. Veamos como configurar el programa cliente de correo Outlook Express. En el escritorio, y en Programas del menú Inicio, podemos localizar el icono que nos permitirá poner en marcha el programa. Cuando se arranca por primera vez, se activa automáticamente el asistente para configuración de cuentas de correo electrónico, y debemos configurar, al menos, una cuenta de correo electrónico para que el programa continúe funcionando. Este asistente nos guía como se muestra a continuación: En esta primera página del asistente nos pide que introduzcamos el nombre que deseamos que se muestre como nombre del remitente de nuestros mensajes. Este nombre será el que vean los destinatarios de nuestros mensajes de correo electrónico. Una vez introducido el nombre, pulsamos el botón Siguiente. 13

14 Internet En la nueva página introducimos nuestra dirección de correo electrónico, teniendo cuidado escribirla correctamente y de no dejar espacios en blanco en ningún sitio. Si nuestra dirección de correo electrónico tiene alguna letra mayúscula, debemos escribirla mayúscula, y el resto en minúscula. A continuación pulsamos el botón Siguiente. Ahora introducimos los datos de los servidores de correo entrante y saliente. El recuadro con una flechita, en el que aparece escrito POP3, no debe modificarse. Para continuar pulsamos el botón Siguiente. contraseña en el campo correspondiente. En esta página introducimos el nombre de cuenta, que no debe confundirse con la dirección de correo electrónico. En caso de querer que nuestra contraseña de correo electrónico quede almacenada con los datos de nuestra cuenta de correo, lo que evitará que tengamos que escribirla cada vez que comprobemos si tenemos mensajes de correo en el servidor, marcaremos la casilla Recordar contraseña y escribiremos la Pulsamos Siguiente y en la última página pulsamos Finalizar. Ya tenemos configurada la cuenta de correo electrónico. 14

15 Internet En función de la versión de Outlook Express, el asistente nos pedirá también los datos relativos a la conexión de internet que debe utilizar para conectarse con el servidor de correo. En ese caso se debe elegir la forma de conexión que utilice el ordenador donde estamos trabajando (a través de un módem, a través de una red de área local o conectarse manualmente). Si, posteriormente, queremos añadir una dirección de correo electrónico, debemos ir a Cuentas en el menú Herramientas, y allí, pulsamos en la pestaña Correo, para ver las cuentas de correo electrónico que ya están configuradas, y pulsamos en Agregar - Correo para poner en marcha el asistente descrito anteriormente. En ocasiones necesitaremos modificar los datos de alguna cuenta de correo ya configurada. Para hacerlo, en la ventana Cuentas de Internet que se muestra un poco más arriba, seleccionamos la cuenta de correo que vamos a modificar y pulsamos el botón Propiedades. Aparecerá un cuadro de diálogo con varias solapas y a través de ellas localizaremos todos los datos de configuración de la cuenta de correo y algunos datos más que no es recomendable modificar. Configuración de una cuenta de correo web (web mail). Para utilizar una cuenta de correo web solo necesitamos conectarnos, mediante un navegador de Internet, a la página web que nos permita el acceso a nuestra cuenta de correo, escribir allí nuestro nombre de usuario y nuestra contraseña y pulsar el botón para entrar en nuestra cuenta de correo. Esos dos datos son suministrados por la empresa u organismo que da el servicio de correo electrónico, en el momento de darnos de alta en el mismo. El funcionamiento del correo web se basa en el hipertexto, ya que utiliza una página web como medio de administración de la cuenta. 3.b.- Enviar correo electrónico. Para escribir un mensaje de correo electrónico pulsamos el botón Crear correo en la barra de herramientas y se abrirá la ventana en la que podremos hacerlo. Esta ventana tiene un aspecto similar al mostrado a continuación y, en el mismo gráfico se explica como utilizar las principales funciones. Cuando el mensaje deba ser enviado a varios destinatarios, escribiremos las direcciones de correo en el campo Para: separadas por un punto y coma (;). En el caso de que hayamos 15

16 Internet introducido en la libreta de direcciones aquellas que necesitamos habitualmente, en lugar de escribirlas en el campo Para:, pulsamos sobre la libreta que aparece dibujada al lado del nombre de ese campo y seleccionamos la dirección o direcciones de correo a las que va dirigido el mensaje. En este caso podemos elegir que las direcciones vayan a parar al campo Para:, al campo CC: o al campo CCO:. La diferencia entre los campos Para: y CC: no es apreciable, pues el destinatario del mensaje verá las direcciones de todos los destinatarios del mensaje, mientras que las direcciones incluidas en el campo CCO: no serán mostradas a ningún destinatario. Todas estas operaciones pueden realizarse sin conexión a Internet. Solo en el momento de enviar el mensaje es necesario estar conectado. Cuando utilizamos el correo web, el procedimiento para crear un mensaje de correo y enviarlo es similar, si bien algunos botones pueden no denominarse exactamente como se han descrito aquí. Para poder realizar cualquier operación con el correo web necesitamos estar conectados a Internet. 16

17 Internet 3.c.- Recibir correo electrónico. Antes de enviar o recibir mensajes con Outlook Express debemos habernos conectado a Internet. Esto no es necesario cuando creamos un mensaje o cuando leemos los mensajes recibidos. La forma más rápida y sencilla de recibir correo electrónico consiste en pulsar el botón Enviar y recibir en la barra de herramientas de Outlook Express. El resultado es que, si hay mensajes pendientes de enviar, serán enviados en ese momento y, a continuación, los mensajes que hayan llegado a nuestro servidor de correo serán descargados en nuestro ordenador, almacenándose en la Bandeja de entrada de Outlook Express. Una vez recibidos los mensajes, podemos abrirlos desde la Bandeja de entrada y leer su contenido. Para ello, en función de cómo esté configurada la visualización de Outlook Express, bastará con seleccionar un mensaje para ver su contenido en la ventana inferior de la pantalla o, por el contrario, habrá que hacer doble clic sobre el mensaje para poder abrirlo. Es recomendable tener desactivada la ventana de Vista Previa de los mensajes, pues algunos virus contenidos en mansajes de correo, pueden activarse con solo seleccionar el encabezado del mensaje. Cuando utilizamos el correo web, con solo acceder a la bandeja de entrada ya veremos la lista de mensajes que hemos recibido, pues, en este caso, la bandeja de entrada se encuentra en nuestro servidor de correo y cuando llegan los mensajes de correo van a parar a ella directamente. Mientras estamos viendo la Bandeja de entrada en el correo web, puede llegar algún mensaje nuevo a nuestro servidor, pero no será mostrado hasta que no salgamos de la Bandeja de entrada y entremos de nuevo o, en su caso, pulsemos el botón Actualizar ( Obtener en algunos casos). 4.- Los foros de discusión. Los foros de discusión son servicios de Internet que algunos portales ponen a nuestra disposición, y consisten en un espacio donde poner mensajes (como si fuera un tablón de anuncios) que cualquiera puede leer y a los que cualquiera puede responder. Las respuestas a los mensajes son nuevos mensajes que se publican en el espacio del foro, de manera que pasan a estar disponibles para su lectura por cualquier usuario. Los mensajes de respuesta suelen aparecer vinculados al mensaje al que responden, pudiendo crearse así, una cadena de mensajes que, por ejemplo, intentan dar solución a un problema. Algunos de estos foros disponen de moderador, es decir, que los mensajes enviados al foro son leídos primero por el moderador, quien decide si el contenido del mensaje es de interés para el foro o no y, en consecuencia, lo publica en el foro o no. Casi todos los foros en Internet se centran en un tema concreto, pudiendo encontrarse foros de matemáticas, de nuevas tecnologías, de libros, etc. En la mayoría de los portales de Internet podemos encontrar un enlace a los foros de que dispone. Basta con pulsar sobre él para acceder a la lista de foros que se hayan creado en ese portal. Será necesario registrarse en ese portal para poder participar en los foros, aunque no suele ser necesario el registro cuando solo queremos leer los mensajes publicados en los foros. El registro consiste en introducir una dirección de correo electrónico, que será a la que se dirijan los mensajes que se publiquen como respuesta a un mensaje nuestro, además de publicarse en el foro, y una contraseña. 17

18 Internet 5.- Las news. Existen en Internet servidores de News que son ordenadores dedicados a mantener foros de discusión accesibles a través de programas clientes de correo electrónico. Las news son foros de discusión a los que se accede mediante un programa de correo electrónico en el que se deben configurar las cuentas de news que deseemos utilizar. En Outlook Express se configuran las cuentas de news de forma similar a las de correo electrónico, es decir, en Cuentas del menú Herramientas. Aquí pulsamos la solapa Noticias para ver las cuentas de news que tenemos configuradas, y pulsamos en Agregar - Noticias para configurar una nueva cuenta de news. Los pasos siguientes son similares a los necesarios para agregar una cuenta de correo, debiendo introducir un nombre que nos identificará en los foros, la dirección de correo a la que llegarán los mensajes de los usuarios que respondan a nuestros mensajes y la dirección del servidor de news (el servidor de news del MECD es news.pntic.mec.es). Cuando agregamos una cuenta de news, ésta se añade al árbol de carpetas de Outlook Express y para acceder al servidor asociado a esa cuenta solo debemos seleccionarla en dicho árbol. A continuación se nos preguntará si deseamos conectarnos al servidor de noticias para ver los grupos de noticias existentes y suscribirnos a alguno de ellos. Para acceder a cualquiera de los grupos de noticias existentes en el servidor conectado debemos suscribirnos. Para ello basta marcar los grupos que nos interesan en la lista de grupos y, por cada selección, pulsar el botón Suscribir. Éstos se añadirán como subcarpetas en el árbol de carpetas de Outlook Express y seleccionando cualquiera de ellos veremos los encabezados de los mensajes publicados en él. Pulsando sobre cada encabezado vemos el contenido del mensaje en la ventana inferior de la pantalla y cuando al lado del encabezado aparece un signo + nos indica que hay mensajes de respuesta para el encabezado que vemos, que serán mostrados al pulsar sobre el signo +. 18

19 Internet Utilizando los botones de la barra de Herramientas podemos Exponer un mensaje en el foro, Responder al autor del mensaje que estamos viendo, Responder al grupo para que todos los usuarios del foro vean nuestra respuesta al mensaje que vemos o Reenviar el mensaje a un destinatario de correo. Algunos servidores de news requieren estar dados de alta en ese servicio, por lo que será necesario indicar un nombre de cuenta y una contraseña para poder conectarnos al servidor de news. En ese caso debemos configurar esos datos desde la opción Cuentas del menú Herramientas. Seleccionamos la cuenta de news que necesite los datos citados anteriormente y pulsamos el botón Propiedades. En la ficha Conexión introducimos el nombre de cuenta y la contraseña, pulsamos Aceptar y cerramos el cuadro de diálogo de Cuentas. Ahora ya podemos conectarnos al servidor de noticias. 5.a.- News de matemáticas. Algunos servidores de news en los que podemos encontrar grupos de matemáticas y muchos otros son: news.pntic.mec.es news.terra.es (requiere ser usuario de una cuenta de correo de Terra o Teleline) news.ya.com 19

20 Diseño de Páginas Web 20

21 Diseño de páginas web DISEÑO DE PÁGINAS WEB 1.- Estructura básica de una página web. Una página web, en su versión más elemental, es un archivo de texto que contiene el código necesario para que un navegador de Internet sea capaz de mostrar la información de cierta forma. Ese código es HTML (Hiper Text Markup Language) o lenguaje de marcas hipertextuales y se basa en la utilización de etiquetas o tags, que indican al navegador de Internet lo que debe hacer con la información a la que se refieran. Las etiquetas HTML pueden ser de dos tipos: con etiqueta de finalización o sin ella. Es decir, podemos encontrarnos con etiquetas como <img> que podrá contener varios atributos, pero que toda la información relativa a ella está contenida en la propia etiqueta, y podemos encontrarnos con etiquetas como <b>este texto se mostrará en negrilla</b>. En este último caso la etiqueta <b> indica que el texto que sigue debe aparecer en negrilla y se mostrará así todo el texto hasta que el navegador encuentre la etiqueta de cierre </b>. La estructura de una etiqueta con principio y fin es siempre la misma: se inicia con el nombre de la etiqueta entre los símbolos < y > y finaliza con la misma cadena de caracteres, excepto por la barra que se antepone al nombre de la etiqueta. El código contenido en el archivo de una página web debe mantener una estructura básica, que divide el código en dos partes: cabecera (head) y cuerpo (body). A continuación se muestra un ejemplo: <html> <head> Esta es la cabecera </head> <body> Este es el cuerpo </body> </html> El contenido de la cabecera no se muestra en el navegador. Las etiquetas de la cabecera contienen información que indica al navegador cómo tiene que tratar al documento, además del título de la página que se mostrará en la barra de título del navegador al visualizar la página. El código colocado en el cuerpo se interpreta para visualizar correctamente la información, es decir, es lo que se muestra en el navegador con el formato adecuado. Todo documento web debe comenzar con la etiqueta <html> y finalizar con la etiqueta </html>, que indican al navegador, respectivamente, el comienzo y el final del código HTML. Escribir el código de una página web en un editor de texto puede resultar laborioso, aunque no resulta demasiado complicado, por lo que, actualmente, se utilizan programas editores de páginas web, que permiten manejar la información de la página que estamos creando de forma parecida a como lo haríamos al crear un documento en un procesador de textos, pudiendo combinar texto, imágenes, tablas, etc. Nosotros aprenderemos a crear páginas web utilizando Microsoft FrontPage, el editor de páginas web de Microsoft. 21

22 Diseño de páginas web 2.- Organización previa de la información. Las archivos que contienen el código HTML de una página web solo contienen el código, y sin embargo, cuando visualizamos una página web, vemos imágenes fijas o en movimiento, a veces escuchamos música o determinados sonidos, etc. Esto es así porque el código de la página web indica al navegador de Internet que debe abrir determinados archivos gráficos o multimedia y presentarlos en determinado lugar y de determinada forma. Todos esos archivos (fotos, dibujos, vídeos, música,...) Deben acompañar al archivo que contiene el código HTML. Por otro lado, si colocamos en una misma carpeta todos los archivos que formen parte de nuestra página web, corremos el riesgo de liarnos si el contenido de nuestra página crece suficientemente. Así que será siempre recomendable organizar los archivos de nuestra página web de forma que en la carpeta principal sólo se encuentren los archivos que contienen el código HTML y en subcarpetas el resto de los archivos. 3.- El editor de páginas web Microsoft FrontPage. Microsoft FrontPage es un completo entorno de creación y publicación de páginas web que, por si mismo, es capaz de crear la estructura completa de carpetas para alojar separadamente los distintos archivos y, sobre ella, nos permite crear las páginas web a nuestra medida y publicarlas posteriormente en Internet, haciendo que, sobre todo, el mantenimiento y la actualización de un sitio web sea una tarea sencilla. Sin embargo, en nuestro caso y dada la extensión y complejidad del programa, nos limitaremos a utilizar el Editor de FrontPage, que es la parte que nos ayuda a crear nuestros archivos de código HTML de la manera más fácil: como si se tratara de un procesador de texto. En Programas de menú Inicio encontraremos el icono para abrir el Explorador de FrontPage, que una vez abierto se mostrará aproximadamente así: 22

23 Diseño de páginas web Ahora podemos lanzar el Editor de FrontPage pinchando el icono y, una vez abierto el Editor ya podemos cerrar en Explorador, pues no le utilizaremos. También podemos crear un icono de acceso directo al Editor de FrontPage. Para ello, en la carpeta C:\Archivos de programa\microsoft FrontPage\bin localizaremos el archivo y pulsando el botón derecho del ratón sobre él, elegiremos Enviar a y Escritorio (Crear acceso directo). De esta forma no necesitaremos abrir el Explorador de FrontPage para abrir el Editor. El aspecto del Editor de FrontPage es el siguiente: Enseguida nos damos cuenta del parecido con Word o con otros procesadores de texto. No obstante hay algunas diferencias. De entrada, en la parte inferior, tenemos tres solapas Normal, HTML y Vista previa que nos permiten editar la página web como si de un procesador de texto se tratara, ver el código HTML generado en función del contenido de la página y, por último, ver la página como se mostraría en un navegador de Internet. Aunque, aparentemente, la página web está en blanco, el editor ya ha generado las líneas de código HTML que definen la estructura general de la página. Podemos ver este código pulsando la solapa HTML de la parte inferior. Vemos que en la cabecera hay una linea de título <title>página nueva 1</title> y dos líneas más con etiquetas <meta> y que, en este caso, definen el contenido del documento, el juego de caracteres que deberá utilizar el navegador para representar correctamente la información de la página y el editor de páginas web utilizado para crear la página. 23

24 Diseño de páginas web 4.- Creando la página web con el editor. Estando situados en la solapa Normal, podemos escribir tel texto que deseemos directamente, haciendo que se ajuste a la izquierda, al centro o a la derecha, utilizando los botones disponibles en la barra de formato. También podemos elegir un estilo determinado para ese texto, el tipo de letra, el tamaño, el color,..., mediante los demás botones de esa barra. Sin embargo, es preferible siempre, hacer una maquetación de la página mediante tablas, con las líneas que delimitan las celdas ocultas, dividiendo el espacio de la página en zonas que dedicaremos a contener distintos elementos. A continuación se muestra una posible maquetación mediante una tabla con las líneas ocultas. Y el resultado que produciría en un navegador se ve más abajo. 4.a.- Definiendo las propiedades de la página. A través del menú Archivo o pulsando el botón derecho del ratón sobre el espacio de trabajo y eligiendo Propiedades de página accedemos al cuadro de diálogo donde podemos definir fácilmente el título de la página, el sonido que se escuchará al visualizarse la página, los colores por defecto de los elementos principales de la página, etc. Ficha General Sustituyendo el título por defecto por un nuevo texto, cambiaremos el título de la página. Recordemos que este texto se mostrará en la barra de título del navegador de Internet. 24

25 Diseño de páginas web En cuanto al sonido de fondo que se reproducirá en el navegador al visualizarse la página, podemos indicar aquí el nombre del archivo de sonido (mid ó.mp3) deseado, indicando también su ubicación con relación a la carpeta donde se guardará el archivo con el código HTML, y si se reproducirá indefinidamente o un número de veces específico. En el ejemplo de la derecha, el archivo de sonido xfiles.mid estaría almacenado en la carpeta sonidos dentro de la carpeta en la que se guardará el archivo HTML. A esta forma de indicar la localización de un archivo se le denomina direccionamiento relativo, y es la mejor forma de referirse a los archivos en una página web. Veamos como ha quedado el código HTML tras modificar el título y el sonido de fondo: Vemos una nueva etiqueta: <bgsound> que permite definir el archivo de sonido que se pondrá en marcha al visualizar la página. El atributo loop determina el número de veces que se reproducirá el archivo; el valor -1 en este atributo provoca la reproducción infinita. Ficha Fondo Desde esta ficha podemos definir si queremos que una imagen se muestre como fondo de la página, o en su lugar, definimos un color de fondo. Si elegimos una imagen, ésta aparecerá a partir de la esquina superior izquierda del área de visualización del navegador y se repetirá hacia la derecha y hacia abajo hasta llenar toda el área. También podemos definir el color por defecto del texto y de los enlaces de hipertexto, aunque, posteriormente desde la pantalla de edición, podemos asignar un nuevo color a cualquier texto o enlace. 25

26 Diseño de páginas web Por último, cuando disponemos de una página web ya creada y deseamos crear una nueva página en la que el fondo y los textos se muestren con las mismas características de la primera, podemos especificar el archivo HTML de esa página para que el editor le use como plantilla y tome de ella los valores de los parámetros del fondo y los textos. En este caso no podremos definir de forma manual los colores de los textos y el fondo por defecto. Ficha Márgenes Aquí podremos introducir el número de puntos que deseamos que se muestren, entre los límites izquierdo y superior del área de visualización y el contenido de la página. Generalmente, no es necesario utilizar márgenes en una página web. Ficha Personalizado Desde ella podemos introducir etiquetas <meta> y otras variables de forma más intuitiva que escribiéndolas directamente en código HTML. No obstante, para utilizar las etiquetas <meta> adecuadamente, es necesario consultar documentación exhaustiva sobre ellas, que podemos localizar en Internet. De cualquier modo, estas etiquetas no son imprescindibles ni suponen una merma en la funcionalidad de la página, excepto las que coloca por defecto el editor. Ficha Idioma En ella podemos elegir el juego de caracteres que utilizará el navegador para mostrar nuestra página. Estos valores se establecen por defecto en los adecuados a nuestro idioma. 4.b.- Maquetando la página con tablas. En el menú Tabla o desde el botón, podemos crear la tabla. En un primer momento podemos crear una tabla que se aproxime a nuestras necesidades y, posteriormente, combinar celdas o dividirlas para obtener las divisiones de la tabla que necesitamos. Para combinar celdas, seleccionamos las celdas que deseamos combinar y, en el menú Tabla o pulsando el botón derecho del ratón sobre ellas, eligiendo Combinar celdas. Para obtener una tabla como la que veíamos al comenzar el punto 4, podemos dibujarla desde el botón eligiendo dos filas y dos columnas arrastrando el puntero sobre la ventana de celdas que se despliega bajo el icono anterior. Posteriormente, seleccionamos las dos celdas superiores y, pulsando sobre ellas el botón derecho del ratón, elegimos Combinar celdas. 26

27 Diseño de páginas web La creación de esta tabla ha dado como resultado el código HTML que aparece a la derecha: Vemos la nueva etiqueta <table> en la que se define el borde y la anchura de la tabla, la etiqueta <tr> que define una nueva fila, y la etiqueta <td> que define una columna, dentro de la fila creada previamente, es decir una celda. El texto corresponde a un espacio en blanco codificado según el lenguaje HTML, que es el contenido actual de las celdas de la tabla. En la celda definida en la primera línea de la tabla, además de la anchura, aparece el atributo colspan que hace que esa celda ocupe el espacio de horizontal, en este caso, de dos columnas. Lo siguiente que debemos hacer es modificar las propiedades de la tabla y establecer el tamaño, la posición horizontal, y las líneas de la tabla (bordes). Para ello, pulsamos el botón derecho del ratón sobre la tabla y elegimos Propiedades de tabla. Una combinación normal sería la que se muestra a continuación: Como podemos observar en el cuadro de diálogo anterior, podemos definir la anchura y la altura de la tabla en píxeles o en porcentaje. El porcentaje se refiere al área de visualización en la ventana del navegador, mientras que los píxeles (puntos) se refieren a puntos de la pantalla, cuyo número y tamaño dependerá de la resolución de pantalla del ordenador donde se visualice la página. La resolución más habitual es de 800x600 puntos, por lo que, si deseamos que la información se muestre correctamente en la mayoría de los ordenadores, o bien introducimos un porcentaje o bien un número de puntos menor de 760 (se ha descontado lo que ocuparían los bordes de la ventana y la barra de desplazamiento vertical). La altura de la tabla no es necesario definirla, pues se alarga automáticamente en función del contenido, aún cuando hayamos definido ese parámetro, siendo el valor introducido, el mínimo valor de altura. 27