A continuacin les muestro una serie de pasos detallados para crear desde cero una pgina web con

software libre y subido a un servidor gratuito, estos pasos son para empezar a comprender los aspectos bsicos y generales del Diseo y administracin Web, por lo tanto no es necesario gastar para tener una pgina web hecha 100% por uno mismo. Pasos: 1) Diseo de elementos grficos(baner, botones,etc.) a)Para empezar necesitamos el programa de grficos vectoriales Inkscape: que lo puedo descargar de ac: http://inkscape.org/download/?lang=es Como el programa es multiplataforma, no importa el sistema operativo tengas, en este caso yo lo hice en mi PC con Windows Seven, pero se puede hacer muy bien en Ubuntu o Mac. accedemos al programa:

b)A continuacin hacemos un baner o cabecera para la pgina, importando una imagen mediana que me va servir en este caso como baner y fondo. importo la imagen que debe estar guardado en mi computadora, en inkscape(archivo--> importar y busco la imagen).

c)Ahora escojo la herramienta rectngulo de color blanco para hacer una mscara (coger el sector de la imagen que queremos).

d)Seleccionamos los dos elementos (el rectngulo y la imgen), luego Objeto --> mscara ---> aplicar, para obtener un rectngulo rellenado con nuestra imagen incial.

e) En el siguiente grfico se muestra la herramienta texto, con ella nos valemos para agregar los textos necesarios en nuestros objetos grficos.

f) Ahora con la herramienta texto y la herramienta rectngulo antes visto comenzamos a hacer los botones(podemos modificar los colores con la paleta que se encuentra en la parte inferior del programa).

g) Como los botones se asemejan simplemente damos anticlic(clic derecho) y escojemos la opcin duplicar.

h) En este caso yo dupliqu tres veces luego modifique el texto con la

herramienta texto.

i) Ahora nos toca exportar las imgenes en mapa de bits, para esto primero seleccionamos separadamente los elementos (el baner y los botones), luego vamos al men archivo, exportar mapa de bits...

j) Examinamos(buscamos el directorio donde se va guardar la imagen), le colocamos un nombre y damos clic en exportar, repetir esta accin para cada uno de los botones.

k) Por ultimo guardamos el archivo del inkscape por siacaso nos sirve ms adelante, la extensin del archivo del inkscape debe ser SVG.

2) Empecemos a crear la pgina en Open Office: a) Para ello necesitamos el Open Office que es un paquete de oficina que tiene procesador de texto, presentacin de diapositivas, hoja de clculo, base de datos, etc, y que lo podemos descargar de ac: http://es.openoffice.org/

accedemos al programa Procesador de Open Office (Writer), que por cierto tambin es multiplataforma y compatible con el Office de Microsoft. b)Ahora creamos un nuevo archivo HTML como lo muestra en la imagen.

c) Para hacer una pgina en Html necesitamos un esqueleto que en este caso es una tabla que contenga todos los elementos de mi pgina, necesito una fila unida como cabecera, otras tres filas como cabecera, y una fila ms para un pie de pgina, tambien dos columnas:

d) Aqui es donde defino cuantas columnas en este caso dos y 5 filas, pueden ser ms de acuerdo a tu diseo, y acepto.

e)El ahora uno las filas superior e inferior, y las tres celdas del medio, de

la siguiente forma:

f) Quedndome el esqueleto de mi pgina de la siguiente forma:

g) Antes de continuar guardemos nuestro trabajo para que no se nos

pierda, vamos al men archivo y luego guardar. IMPORTANTE: la pgina principal debe llevar el nombre de "index" y debe estar guardado en el mismo directorio de las imagenes y elementos que tu pgina utiliza.

h) Ahora insertemos los elementos grficos diseados inicialmente, de la siguiente forma:

i) Para hacer encajar nuestra imagen en nuestras celdas, le damos a esta anticlic (clic derecho), anclaje y luego como caracter.

j) Ahora ubicamos el cursor dentro de la celda donde esta la imagen y en

los estilos, escogemos la opcin remitente, repetimos la accin para todas las imgenes que tengamos (ojo: no olvides ubicar el cursor antes en la celda donde deseas insertar la imagen).

k) Ahora vamos a darle una imagen de fondo a nuestra pgina Web, para esto necesitamos un fondo que puedes descargar de internet como este:

una vez que lo tenemos guardado (debe compartir el mismo directorio que las dems imgenes), ubicamos el cursor fuera de la tabla, anticlic y la opcin pgina.

l) En la pestaa fondo, en la opcion como: desplegamos de color a imagen, seleccionar, y buscamos la imagen de fondo.

m) Del paso anterior nos quedara como la imagen,

ahora para que se note el texto que va en la pgina principal le voy a colocar un color blanco, dando anticlic en la celda, pestaa fondo, color y escojo el blanco.

n) Ahora con esto me queda como la imagen, ahora voy a hacer tres pginas ms, para que se enlacen en los botones que tengo, para hacer estas tres repito algunos pasos desde el 2 b).

m) Hice una pgina de video con una tabla y un fondo, aqu tambien les ensear como agregar una video de Youtube, le puse asteriscos para que cuando pases a modo de codigos puedas ubicar la celda donde vas a insertar el video.

) Antes de continuar guardamos esta pgina como videos.

o) Ahora si pasamos a modo de codigos(no es necesario ser expertos en HTML ya que solo vamos a pegar y reemplazar unos cdigos), en la

barra estndar econtrars este boton que se encuentra en crculo rojo, y como vern ubique los asteriscos de la celda donde debe ir el video.

p) cambiemos de ventana y busquemos con el navegador en la pgina de Youtube(puede ser otra pgina de video, los procedimiento son iguales) En este paso debemos tener un video subido en el youtube o podemos usar uno prestadito, una vez que abrimos el video en la parte inferior hay un boton con la opcin insertar, copiamos el codigo que aparece, no sin antes personalizar el tamao, color del marco, etc.

q) Volvemos a nuestro editor HTML OpenOffice Y seleccionamos en el area donde vamos a pegar el codigo antes copiado, en esta imagen me equivoqu por un caracter, copien despues del smbolo ">" .

r) Listo, volvemos a modo de diseo presionando el mismo botn que nos llevo a modo de cdigos, nos queda de la siguiente forma, no se ve inmediatamente por que aun la pgina no esta en un navegador.

s) Hice una pgina de foto y lo guarde tambien como fotos.html, parecido a los videos, para poner un album utilizo Picasa que tengo la posibilidad de insertar los cdigos del album mediante HTML, de la siguiente forma:

t) Una vez que acabemos de hacer nuestras pginas secundarias y guardarlas todos en el mismo directorio, abrimos nuevamente nuestra pgina principal (index), a continuacin vamos a colocar los hipervnculo, links o hiperenlaces que vienen a ser lo mismo, para esto seleccionamos el primer boton dandole clic, luego vamos al men Insertar, Hiperenlace:

u) En la ventana de dialogo que aparece, nos aseguramos que estamos en documento, y a la altura de ruta le damos clic en la carpetita para ubicar nuestra pgina a enlazar.

v) En este caso como el primer botn era de objetivo debe ir hacia la pgina objetivo.html, lo buscamos en el directorio y aceptamos.

w) Nos aseguramos que la ruta solo tenga el nombre del archivo, no debe ir ningn directorio antes, como por ejemplo: c:/usuarios/jm/escritorio/mipagina, o algo parecido, si aparece esto borrenlo, debe quedarles como en la imagen, aplicamos y cerramos. La misma accin para los otros botones: fotos debe estar enlazado con fotos.html y videos con videos.html

x) En las otras pginas para volver descargue una imagen de una casita y lo inserte como imagen, este botn me permitir volver a mi pgina principal, esta imagen es la pagina objetivo:

y) Para que al dar clic en esta casa vuelva a la pgina principal, voy a enlazarlo con la pgina index.html, como en la imagen.

z) Ahora si ubicados en el archivo index.html vamos a darle una chequeada por el navegador, para esto vamos al men archivo, vista previa en el navegador.

En este punto debe verse bien tu pgina en el navegador, los botones deben llevarte a las otras pginas y stas deben hacerte volver a la pgina principal.

3) Servidor Web Gratuito: a) Existen en la web muchos que brindan servicios gratuitos pero el mejor que encontrado es este: 000webhost.com, debemos registrarnos, asi que le damos clic en el boton Sign UP!

b) Una vez que nos registramos colocando la direccin web de nuestra pgina, por ejemplo: mipagina.algo.net, ahora si queremos un www.mipagina.com alli s tenemos que gastar, as solo rellamos en la direccin gratuita, luego damos nuestro correo, una contrasea, aceptar los terminos... mejor dicho: llenas el formulario de registro, una vez que llenamos correctamente el formulario nos llevar a esta pgina. ahora entramos en el panel de control. Account Information, tiene toda la informacin que te puede servir para trabajar con un FTP cliente, pero eso es otra historia...

c) Colocamos nuevamente nuestra contrasea con la que nos registramos, continue...

d) Entramos en la opcin File Manager.

e) Damos clic en public_html

f) En este punto nos disponemos a usar todo los elementos de nuestra pgina, as que clic en el botn Upload...

g) Clic en el botn examinar y luego vamos cargando uno a uno todas las imgenes que hemos usado: el baner, los botones, los dos fondos, la casita, y los archivos Html.

h) Una vez que tengamos todo le damos clic en el check verde, para cargar los archivos.

i) Si carga todo correctamente debe salirte la siguiente pantalla:

j) Ahora damos clic en el check verde y listo vers todos tus archivos cargados en la carpeta public_html:

k) En este punto ya deberas tener tu pgina web con solo escribir tu direccin en el navegador, dale tiempo al google para que lo encuentre y

aparecer en el. ENJOY.