Creación de una web

1.      Creación de un sitio ftp

Un sitio ftp es un espacio físico dentro de un ordenador remoto donde podremos publicar nuestra web. Un sitio ftp tendrá un espacio determinado medido en MB, y una tasa de transferencia mensual, medida en MB o GB por mes, superada la misma nuestra web no funcionará. Los hay de dos tipos:

-  De pago: van asociados a la compra de un dominio y un hosting.

-  Gratuitos: no tienen dominio y tienen un espacio y transferencia reducidos.

  Vamos a crear un sitio ftp gratuito en yahoo. Para ello primero creamos una cuenta en yahoo en el siguiente apartado: 

Introduciremos nombre, datos personales y contraseña, y una vez lo tengamos activado, hacemos en la opción “geocities” abajo, a la izquierda, dentro de “Servicios Prácticos”. Seguimos los pasos que nos indique el programa, y tomamos nota de los datos de configuración que nos da, pinchando en la opción “FTP & Carga fácil” 

Los datos que tendremos que utilizar sólo la primera vez al acceder a nuestro sitio web son los que nos da la aplicación al pinchar en esta opción

Normalmente hay que dejar pasar unas pocas horas para que nuestra cuenta se active y por tanto funcione nuestro sitio ftp. Una vez hecho esto, vamos al segundo paso.

2.      Introducción de nuestros datos en el programa WS_FTP LE

El WS FTP es un sencillo programa que nos va a permitir publicar nuestra web. Ahora debemos introducir los datos en el programa. Esta operación sólo es necesario hacerlo una vez, pues una vez hecho, el programa lo memorizará.

 Abrimos el programa , y nos aparecerá la siguiente pantalla:

Pulsamos en “New”

E introducimos nuestros datos en las casillas correspondientes:

Pulsamos en Aceptar y a partir de este momento ya tenemos creado nuestro sitio ftp gratuito. Cerramos nuestro programa y vamos al tercer paso.

Creación de una carpeta en el escritorio para guardar y gestionar la web.

Creamos una carpeta con el nombre que queramos, por ejemplo “colegio”, donde guardaremos las webs, y dentro una subcarpeta “img”, para guardar las imágenes por separado.

Creación de una web con marcos utilizando FrontPage

Una web con marcos facilita muchísimo la navegación dentro de nuestra web. Su creación es muy sencilla.

Primero abrimos FrontPage. Y posteriormente pulsamos en Nuevo... Página:

A continuación pulsamos en la opción “Páginas de marcos”:

Y escogemos el tipo de división que deseamos, por ejemplo “Jerarquía anidada”

En "Vista previa" podemos ver cómo quedará nuestra página de marcos.

Pulsamos aceptar, y ahora la pantalla nos mostrará lo siguiente:

Esta va a ser la página principal de nuestra web, que siempre debe llamarse “index”. La guardamos en la carpeta “colegio”.

Además en esta opción ponemos el Título de la página.

Esto es muy útil pues por medio de este título los buscadores tipo Google realizan sus búsquedas, y nuestra página podrá estar localizable.

Le hemos puesto en este caso el título “Tecnología en el Colegio Ejemplo”.

 Nuestra página va a tener dos zonas fijas que van a estar permanentemente visibles en todas las páginas de nuestra web:

     -  El marco superior, donde podemos poner el título general de la web, una imagen representativa, un logo,...

     - El marzo izquierdo, donde pondremos el menú de navegación.

 Tendrá una tercera zona, (la parte central) que es la que va a cambiar según naveguemos.

 Así que ahora vamos a crear los marcos de la página principal, index.

 Para ello cerramos la página index, y pulsamos en “Nueva página”: 

Esta página que vamos a crear va a ser el marco izquierdo. Pinchamos en la zona blanca central con el botón derecho del ratón para abrir el menú contextual: 

Y pulsamos la opción “Propiedades de página”

Esta opción nos va a servir para definir las características de nuestra página y deberemos hacer este paso en cada página que creemos. La pestaña que nos va a interesar es “Fondo”, pinchamos y elegimos características:

Podemos poner una imagen o un color de fondo, definir un color para el texto, y para los hipervínculos que va a tener nuestra web. En este caso, vamos a definir un color de fondo azul claro, pinchando en la opción “Fondo”

Y vamos a poner las opciones que va a tener nuestro menú, que las situaremos en una tabla. Para ello pinchamos en tabla, y escogemos las filas y columnas que deseamos. Como es un menú vertical, tendrá una sola columna y tantas filas como opciones queremos que tenga nuestro menú. (1 columna y 5 filas, en nuestro ejemplo).

Para que nos quede nuestra tabla “curiosa”, podemos escoger en el menú tabla>>propiedades>> tabla:

Podremos escoger el tamaño y el color de los bordes, la alineación de la tabla, y otras opciones. En nuestro caso nos interesa tener un tamaño 0 para el borde, que es lo más habitual para un menú, pero sobre gustos no hay nada escrito.

Y ahora escribimos las opciones que tendrá nuestro menú, con el tipo de letra que deseamos, como si escribiéramos en un Word normal y corriente. En el menú siempre tendremos una opción “Inicio”, que es la que nos permitirá volver a la página principal siempre que deseemos

Una vez hecho esto, guardamos la página con el nombre “menuizqdo”, por ejemplo. (Siempre que guardemos, pondremos nombres sin espacios, ni acentos, ni eñes).

A continuación cerramos la página, y abrimos una nueva, como hicimos antes, escogemos las características que deseamos con el menú contextual del ratón (botón derecho), y esta vez, definimos un azul un poco diferente, por ejemplo. Estamos creando el marco superior.

Aquí, si queremos tener una web maja, debemos ser un poco cuidadosos, pondremos una imagen y un título que nos defina. Para ello debemos utilizar 3 programas: Google, PowerPoint, y Paint. Así que vamos a abrir un subapartado en este momento.

Trabajo con imágenes

Estamos haciendo una web sobre la asignatura de Tecnología en el colegio Ejemplo, vamos a buscar en Google una imagen de un colegio y la guardamos en nuestra carpeta:

Debemos fijarnos en el formato en que la imagen es guardada, en este caso bmp, si es así, con Paint deberemos modificarla a jpg.

Y ahora en PowerPoint vamos a hacer un texto con el título de nuestra web, utilizando el tipo de letra que más nos guste. ¿Porque hacerlo en PowerPoint y no escribir el título en FrontPage directamente?, muy sencillo, porque no todos los ordenadores de nuestros futuros visitantes van a tener instaladas las mismas fuentes que nosotros, y por tanto no lo podrán ver como nosotros deseamos. Cuando Internet Explorer no reconoce una fuente (es decir, el usuario no la tiene instalada), utiliza por defecto la fuente predeterminada, que suele ser Times o Arial.

Así que lo que haremos nosotros es guardar nuestro texto como imagen, y además le vamos a situar sobre la imagen del colegio que encontramos en Internet.

Hemos escrito ya el texto “Web de tecnología”, y a continuación insertamos la imagen que guardamos en la carpeta colegio\img, con la opción Insertar imagen desde archivo.

A continuación damos formato a nuestras imágenes (cambiando tamaño, color y sombreados, y vamos a guardara como imagen jpg, en la opción “Guardar como”:

Para ello, como puede verse en la imagen de arriba:

-   Hemos escogido la carpeta (escritorio\colegio\img)

-   Le hemos puesto un nombre a la imagen (Logo)

-   Y hemos escogido el tipo de archivo (Formato de intercambio de archivos JPEG).

Guardamos, y respondemos “no” a la pregunta que inmediatamente nos hará.

Ahora debemos utilizar Paint para borrar el espacio en blanco que PowerPoint nos ha regalado alrededor de nuestra imagen.

Ejecutamos Paint, y abrimos nuestra imagen Logo en la carpeta donde la guardamos.

Con la opción “Selección”, seleccionamos sólo nuestra imagen, poniendo cuidado en no seleccionar ninguna zona en blanco.

Cuando hayamos seleccionado, cortamos, y abrimos un archivo nuevo, no guardando los cambios. En el nuevo, pegamos la selección. A continuación pinchamos con el ratón en la zona blanca que aún queda por eliminar, y seguidamente en cada uno de los pequeños cuadritos azules que aparecen abajo y a la derecha del espacio en blanco. Pinchamos en esos cuadritos y arrastramos hasta el comienzo de la imagen. Una vez hecho esto, guardamos en nuestra carpeta como Logo.

Ahora podemos regresar a FrontPage, donde estábamos comenzado a crear nuestro marco superior.

--- --- --- --- --- ---

Insertamos Imagen Desde Archivo, Logo, y a continuación pinchamos sobre ella y le damos una alineación central.

Hecho esto, no nos queda otra opción más que guardar la página, con el nombre “superior”, tal y como hicimos anteriormente.

Ahora vamos a crear la zona central de nuestra página principal, para lo que pulsamos en nuevo, y escogemos las características de nuestra página con el menú contextual del ratón, como hicimos antes. Esta vez vamos a poner un color azul más claro.

Escribimos el texto e imágenes que deseemos. Aquí se suele poner un correo de contacto, que es un hipervínculo especial, de la siguiente manera:

Seleccionamos el texto o imagen donde queremos que esté el hipervínculo, y con el botón derecho del ratón seleccionamos “Hipervínculo”:

En este caso hemos insertado una tabla con una foto del profesor, y un texto E-mail, que al pincharlo nuestro visitante se abrirá Outlook Express y nos podrá enviar un mensaje. Para ello debemos hacer lo siguiente. Una vez abierta la opción “Hipervículo”:

Escribimos en “Dirección URL” el texto “mailto:ejemplo.ejemplo@yahoo.es”, (o el correo que deseemos),

Si queremos especificar un asunto del mensaje, escribiremos entonces en esa casilla el texto: mailto:ejemplo.ejemplo@yahoo.es?subject=alumno (todo esto sin entrecomillado), y nos llegará un mensaje con el asunto “alumno”.

Si ya tenemos nuestra web terminada, la guardamos con el nombre “principal” como hemos hecho anteriormente.

Ahora que ya hemos creado los tres marcos de nuestra página inicial, vamos a definirlos en la página index, para lo que abrimos esa página con FrontPage. Tendremos los tres marcos vacíos, únicamente nos queda establecerlos, pulsando en cada uno de ellos en la opción “Establecer página inicial”

Al pinchar ahí se nos abrirá un cuadro de diálogo para buscar la página deseada, la seleccionamos y aceptamos. A continuación guardamos los cambios realizados. Y cerramos la página index (muy importante).

Nuestra página, como hemos visto, tiene 5 opciones. 1 correspondiente al inicio, y otras cuatro correspondientes a diversos programas que se ven en la clase de Tecnología. Ahora sería el momento de crearlas, de la misma manera que hemos hecho anteriormente. Según vayamos haciéndolas, las guardaremos con los nombres: “word”, “powerpoint”, “excel” y “access”.

Una vez hayamos terminado vamos poner los hipervínculos (también llamados links) en las opciones del menú.

Para ello cerramos todas las páginas que tenemos abiertas (muy importante), y abrimos de nuevo la página index.htm.

A la hora de establecer hipervínculos:

1.      Seleccionamos el texto donde queremos introducirlo.

2.      Pulsamos botón derecho del ratón o en el menú Insertar.

3.      Pulsamos en la opción hipervínculo.

 Nos aparecerá el siguiente cuadro, donde deberemos efectuar dos operaciones:

Primero pulsamos en “Marco de destino”. Y se nos abrirá un nuevo cuadro de diálogo: 

Donde escogeremos dónde, de entre los tres marcos que tiene nuestra página, queremos que se abra la página que estamos “hipervinculando”. Como el marco superior y el marco izquierdo van a ser siempre fijos, escogeremos con el ratón la zona central de la página, pinchando en el cuadro correspondiente (el que aparece en la imagen de color azul). Pulsamos Aceptar.

A continuación establecemos el vínculo pinchando en el botón de la carpeta con la lupa, a la derecha abajo.

Se abrirá otro cuadro de diálogo, y escogemos el archivo. (NOTA, cuando sea el vínculo a la página inicial, no escogemos el archivo “index”, sino “principal”, o el nombre que hayamos escogido para la zona central de la página. Esto es así para que se cargue sólo la zona central, no toda la index, duplicándose todos los marcos).

Aceptamos, y efectuamos el mismo proceso con cada una de las páginas.

Una vez que hayamos dado estos pasos, ya tendremos lista nuestra web.

Ahora nos queda dar el último paso, y es publicarla en la red.

Publicar la web

Abrimos WS FTP.

El programa automáticamente selecciona nuestro sitio ftp. Introducimos la contraseña si no la tenemos guardada, y entramos. Nos aparecerá la siguiente pantalla:

Al lado derecho tenemos el sitio remoto, o ftp, o host. Al lado izquierdo tenemos nuestro C, donde deberemos seleccionar la carpeta “colegio”. Conviene comprobar en la carpeta de las imágenes, que no se nos haya escapado ninguna .bmp. Si es así la borramos.

A continuación Seleccionamos desde img hasta word, y pulsamos en la flecha de dirección a la derecha:

Y en este punto, ya tenemos nuestra web, en este caso en:

http://es.geocities.com/ejemplo.ejemplo