En mi máquina del tiempo

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 dirección web de nuestra página, por ejemplo: mipagina.algo.net, ahora si queremos un www.mipagina.com alli sí tenemos que gastar, así solo rellamos en la dirección gratuita, luego damos nuestro correo, una contraseña, aceptar los terminos... mejor dicho: llenas el formulario de registro, una vez que llenamos correctamente el formulario nos llevará a esta página.
ahora entramos en el panel de control.
Account Information, tiene toda la información que te puede servir para trabajar con un FTP cliente, pero eso es otra historia...

c) Colocamos nuevamente nuestra contraseña con la que nos registramos, continue...

d) Entramos en la opción File Manager.

e) Damos clic en public_html

f) En este punto nos disponemos a usar todo los elementos de nuestra página, así que clic en el botón Upload...

g) Clic en el botón examinar y luego vamos cargando uno a uno todas las imágenes 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 verás todos tus archivos cargados en la carpeta public_html:

k) En este punto ya deberías tener tu página web con solo escribir tu dirección en el navegador, dale tiempo al google para que lo encuentre y aparecerá en el. ENJOY.

Gracias...

Hoy en día no hay que ser un experto para utilizar algunas herramientas que se encuentran en la web y que puedes integrar fácilmente en tu Página como álbumes, vídeos, encuestas, contadores, juegos, relojes, etc, etc...

A continuación les muestro una serie de pasos detallados para crear desde cero una página web con software libre y subido a un servidor gratuito, estos pasos son para empezar a comprender los aspectos básicos y generales del Diseño y administración Web, por lo tanto no es necesario gastar para tener una página web hecha 100% por uno mismo.

Pasos:
1) Diseño de elementos gráficos(baner, botones,etc.)

a)Para empezar necesitamos el programa de gráficos 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 continuación hacemos un baner o cabecera para la página, 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 rectángulo de color blanco para hacer una máscara (coger el sector de la imagen que queremos).

d)Seleccionamos los dos elementos (el rectángulo y la imágen), luego Objeto --> máscara ---> aplicar, para obtener un rectángulo rellenado con nuestra imagen incial.

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

f) Ahora con la herramienta texto y la herramienta rectángulo 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 opción duplicar.

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

i) Ahora nos toca exportar las imágenes 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 acción para cada uno de los botones.

k) Por ultimo guardamos el archivo del inkscape por siacaso nos sirve más adelante, la extensión del archivo del inkscape debe ser SVG.

2) Empecemos a crear la página en Open Office:

a) Para ello necesitamos el Open Office que es un paquete de oficina que tiene procesador de texto, presentación de diapositivas, hoja de cálculo, 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 también 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 página en Html necesitamos un esqueleto que en este caso es una tabla que contenga todos los elementos de mi página, necesito una fila unida como cabecera, otras tres filas como cabecera, y una fila más para un pie de página, tambien dos columnas:

d) Aqui es donde defino cuantas columnas en este caso dos y 5 filas, pueden ser más de acuerdo a tu diseño, y acepto.

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

f) Quedándome el esqueleto de mi página 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 página principal debe llevar el nombre de "index" y debe estar guardado en el mismo directorio de las imagenes y elementos que tu página utiliza.

h) Ahora insertemos los elementos gráficos diseñados 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 opción remitente, repetimos la acción para todas las imágenes 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 página 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 demás imágenes), ubicamos el cursor fuera de la tabla, anticlic y la opción página.

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

m) Del paso anterior nos quedaría como la imagen,

ahora para que se note el texto que va en la página principal le voy a colocar un color blanco, dando anticlic en la celda, pestaña fondo, color y escojo el blanco.

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

m) Hice una página de video con una tabla y un fondo, aquí tambien les enseñaré 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 página 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 códigos), en la barra estándar econtrarás este boton que se encuentra en círculo rojo, y como verán ubique los asteriscos de la celda donde debe ir el video.

p) cambiemos de ventana y busquemos con el navegador en la página de Youtube(puede ser otra página 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 opción insertar, copiamos el codigo que aparece, no sin antes personalizar el tamaño, 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 símbolo ">" .

r) Listo, volvemos a modo de diseño presionando el mismo botón que nos llevo a modo de códigos, nos queda de la siguiente forma, no se ve inmediatamente por que aun la página no esta en un navegador.

s) Hice una página 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 códigos del album mediante HTML, de la siguiente forma:

t) Una vez que acabemos de hacer nuestras páginas secundarias y guardarlas todos en el mismo directorio, abrimos nuevamente nuestra página principal (index), a continuación vamos a colocar los hipervínculo, 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 página a enlazar.

v) En este caso como el primer botón era de objetivo debe ir hacia la página objetivo.html, lo buscamos en el directorio y aceptamos.

w) Nos aseguramos que la ruta solo tenga el nombre del archivo, no debe ir ningún 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 acción para los otros botones: fotos debe estar enlazado con fotos.html y videos con videos.html

x) En las otras páginas para volver descargue una imagen de una casita y lo inserte como imagen, este botón me permitirá volver a mi página principal, esta imagen es la pagina objetivo:

y) Para que al dar clic en esta casa vuelva a la página principal, voy a enlazarlo con la página 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 página en el navegador, los botones deben llevarte a las otras páginas y éstas deben hacerte volver a la página 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!

c) Colocamos nuevamente nuestra contraseña con la que nos registramos, continue...

d) Entramos en la opción File Manager.

e) Damos clic en public_html

f) En este punto nos disponemos a usar todo los elementos de nuestra página, así que clic en el botón Upload...

g) Clic en el botón examinar y luego vamos cargando uno a uno todas las imágenes 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 verás todos tus archivos cargados en la carpeta public_html:

k) En este punto ya deberías tener tu página web con solo escribir tu dirección en el navegador, dale tiempo al google para que lo encuentre y aparecerá en el. ENJOY.

miércoles, 2 de noviembre de 2011

Módulo 1 – “Aprender por proyectos”: Reflexión

lunes, 3 de octubre de 2011

Servidor Gratuito

martes, 31 de mayo de 2011

¿Cómo matricular en el SIAGIE?

lunes, 6 de diciembre de 2010

Crear una pagina con software Libre...