64
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN UNIVERSITARIA INSTITUTO UNIVERSITARIO DE TECNOLOGÍA DE YARACUY INDEPENDENCIA - EDO. YARACUY Tutorial que muestra los pasos para: 1. Descargar e instalar FileZilla bajo el sistema operativo Canaima 3.0 2. Configurar un servidor web gratuito. 3. Desarrollar una web simple validada por el W3C Elaborado por: Luis Joaquín Gómez Calderón PNF Informática IUTY

Tutorial de electiva

Embed Size (px)

Citation preview

Page 1: Tutorial de electiva

REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN UNIVERSITARIA

INSTITUTO UNIVERSITARIO DE TECNOLOGÍA DE YARACUY

INDEPENDENCIA - EDO. YARACUY

Tutorial que muestra los pasos para:

1. Descargar e instalar FileZilla bajo el sistema operativo Canaima 3.0

2. Configurar un servidor web gratuito.

3. Desarrollar una web simple validada por el W3C

Elaborado por:

Luis Joaquín Gómez Calderón

PNF Informática IUTY

Page 2: Tutorial de electiva

FileZilla

FileZilla es un cliente FTP multiplataforma de código abierto y software libre,

licenciado bajo la Licencia Pública General de GNU. Soporta los protocolos FTP, SFTP y

FTP sobre SSL/TLS (FTPS). Las principales características de FileZilla son:

Administrador de sitios: permite a un usuario crear una lista de sitios FTP con sus

datos de conexión, como el número de puerto a usar, o si se utiliza inicio de sesión

normal o anónima. Para el inicio normal, se guarda el usuario y, opcionalmente, la

contraseña.

Registro de mensajes: se muestra en la parte superior de la ventana. Muestra en

forma de consola los comandos enviados por FileZilla y las respuestas del servidor

remoto.

Vista de archivo y carpeta: situada en la parte central de la ventana, proporciona una

interfaz gráfica para FTP. Los usuarios pueden navegar por las carpetas, ver y

alterar sus contenidos tanto en la máquina local como en la remota, utilizando una

interfaz de tipo árbol de exploración. Los usuarios pueden arrastrar y soltar archivos

entre los ordenadores local y remoto.

Cola de transferencia: situada en la parte inferior de la ventana, muestra en tiempo

real el estado de cada transferencia activa o en cola.

¿Como descargar FileZilla paso a paso bajo Canaima 3.0?

Paso 1: Encender el computador con sistema operativo Canaima 3.0. Una vez encendido

le mostrará la siguiente ventana del escritorio:

Page 3: Tutorial de electiva

Paso 2: Luego abrimos el navegador web que posea el equipo; por ejemplo el navegador

web “Cunaguaro” que es el navegador incluido en la versión 3.0 de Canaima; se encuentra

ubicado en la barra de herramienta superior de la pantalla; tal como se muestra en la

siguiente imágen:

Paso 3: Una vez que abrimos el navegador Cunaguaro, nos aparece la siguiente pantalla:

Page 4: Tutorial de electiva

Paso 4: Elegimos un buscador web; por ejemplo Google. Simplemente escribimos el

nombre google.co.ve en la barra de enlaces y presionamos enter:

Paso 5: Ir a la página de FileZilla. Simplemente escribimos la palabra filezilla en el

buscador y presionamos enter, para localizar el sitio web desde donde podamos descargar el

programa:

Page 5: Tutorial de electiva

Paso 6: Luego nos aparece la página de FileZilla-The free FTP solution (http://filezilla-

project.org/) como primera opción. Le damos clic directamente sobre el nombre, o

podemos hacer clic en traducir esta página, puesto que originalmente la página está en

inglés:

Paso 7: Una vez que entramos a la página de FileZilla, nos aparecerá así:

Page 6: Tutorial de electiva

Paso 8: Podemos observar que la página en el apartado de enlaces rápidos de descarga, nos

da la opción de descargar filezilla como cliente (para todas las plataformas) y como

servidor (solo para Windows):

Paso 9: En este caso, la opción a elegir será descargar filezilla como cliente:

Page 7: Tutorial de electiva

Paso 10: Al elegir “descargar filezilla como cliente” nos aparecerá las diversas opciones

de descargas dependiendo de la plataforma que posea:

Page 8: Tutorial de electiva

Paso 11: En este caso, por estar trabajando en Canaima (GNU/Linux), elegimos el archivo

de descarga correspondiente a GNU/Linux:

Paso 12: Una vez elegida la opción, esperaremos que comience la descarga:

Page 9: Tutorial de electiva

Paso 13: Aparecerá una ventana para comenzar la descarga. Podemos elegir la opción

“Abrir con:” y a su vez la aplicación con que deseemos abrirlo; o simplemente elegir la

opción “Guardar archivo”, y a su vez la ubicación del archivo. Luego presionamos Aceptar:

Y comienza a descargarse:

Page 10: Tutorial de electiva

Una vez culminada la descarga:

Luego, en el escritorio podemos hacer clic en equipo y después buscar la ubicación del

archivo que descargamos. Normalmente queda almacenado en la carpeta “Descargas” del

escritorio. Esto dependiendo si no se le da una ubicación diferente a la hora de guardar el

archivo. Tal como lo vimos anteriormente. “Y ya, así se descarga el programa”.

Page 11: Tutorial de electiva

¿Como instalar FileZilla paso a paso bajo Canaima 3.0?

Paso 1: Nos ubicamos en el escritorio:

Paso 2: En la barra de herramientas superior de la pantalla, presionamos

Sistema>Administración>Gestor de Paquetes Synaptic:

Page 12: Tutorial de electiva

Paso 3: Nos aparecerá la ventana del Gestor de Paquetes Synaptic:

El Gestor de Paquetes Synaptic, es especialmente útil en la instalación y

desinstalación de programas cuando ocurren conflictos de dependencias que no se pueden

resolver automáticamente. Synaptic es una aplicación mucho más avanzada que el Centro

de software de Ubuntu, y es un gestor de paquetes muy potente.

Como pueden observar la ventana principal se encuentra dividida en varias áreas

diferenciadas:

En la parte izquierda tienes un listado de categorías de aplicaciones en las que se

clasifican los paquetes: administración del sistema, bibliotecas, comunicación; entre otros.

A la derecha, cuando seleccionas una categoría, obtienes la lista de aplicaciones de

dicha categoría. En esta ventana puedes ver el estado de cada paquete mediante una

leyenda de iconos característica (acude al menú Ayuda – Leyenda de Iconos para ampliar

esta información). El icono de color verde significa que el paquete está instalado; si es

blanco que no lo está, verde y con una flecha significa que el paquete tiene una versión

Page 13: Tutorial de electiva

actualizada... Si incluye un icono de Ubuntu indica que el paquete está soportado

oficialmente por la distribución.

Justo debajo, en la parte inferior derecha puedes ver la descripción del paquete

seleccionado y sus características. Un botón Obtener captura de pantalla te permitirá ver

una miniatura de la ventana principal de la aplicación (no siempre disponible).

Si tienes seleccionado un determinado paquete y, a continuación, pulsas sobre el botón

Propiedades de la barra de herramientas podrás ver sus características, como su nombre, la

versión instalada o la versión posible actualizada, las dependencias, las carpetas utilizadas

para copiar los archivos (muy útil, para localizar la documentación, los iconos o el archivo

que lanza la aplicación, entre otros).

Paso 4: Para instalar un paquete, se puede hacer ingresando primero el nombre del

paquete en la ventanita de buscar. En este caso escribiremos filezilla:

Page 14: Tutorial de electiva

Nos aparecerá luego una ventanita de Buscar (como superusuario); donde escribimos

nuevamente filezilla, y luego hacemos clic en Buscar:

Paso 5: Luego nos aparecerá una ventana indicando la descarga de información de

paquetes:

Page 15: Tutorial de electiva

Después de haberse descargado la información del paquete; nos aparece una ventana

preguntándonos si deseamos marcar los cambios adicionales requeridos? Y hacemos clic

luego en Marcar en la parte inferior.

Paso 6: Luego en la parte izquierda nos aparecerá el paquete filezilla.

Page 16: Tutorial de electiva

Si queremos obtener todas las actualizaciones del paquete, hacemos clic en la parte superior

donde dice Marcar todas las actualizaciones:

Y nos aparecerá luego una ventana para seleccionar los cambios adicionales requeridos; y

hacemos clic en Marcar en la parte inferior de la ventanita:

Page 17: Tutorial de electiva

Paso 7: Luego seleccionado el paquete, hacemos clic en el botón Aplicar de la barra de

herramientas para iniciar el proceso de instalación del paquete o paquetes necesarios.

Nos aparece una ventana donde presionaremos la opción Para ser instalado; y después

hacemos clic en “Aplicar” en la parte inferior de la ventanita:

Page 18: Tutorial de electiva

Paso 8: Posteriormente nos muestra los paquetes de filezilla con su última versión:

Presionamos en “Paquete” en la barra de herramienta, y luego marcar para instalar.

Page 19: Tutorial de electiva

Seguidamente nos muestra una ventana para marcar los cambios adicionales requeridos;

donde haremos clic en “Marcar”, en la parte inferior de la ventana:

Paso 9: Una vez seleccionado:

Page 20: Tutorial de electiva

Presionamos Aplicar en la parte superior:

Paso 10: Nos pregunta si queremos aplicar los cambios siguientes? Y seleccionamos

donde dice Para ser instalado, y por último Aplicar:

Page 21: Tutorial de electiva

Y comenzará a descargar los paquetes para la instalación:

Luego de descargar los paquetes para la instalación; comienza a instalar el software:

Page 22: Tutorial de electiva

Paso 11: Una vez instalado, podemos acceder al programa desde el escritorio, haciendo

clic en Aplicaciones>Internet>Filezilla; tal como se muestra a continuación:

Page 23: Tutorial de electiva

Una vez que hacemos clic para abrir el programa filezilla nos aparecerá la ventana:

Page 24: Tutorial de electiva

A continuación veremos:

¿Cómo configurar un servidor web gratuito?

Específicamente www.000webhost.com

NOTA:

Antes de comenzar a detallar los pasos para configurar el servidor web gratuito

www.000webhost.com, es importante señalar que a la hora de crear la cuenta en el servidor,

necesitaremos una cuenta de correo electrónico preferiblemente Gmail. En caso de ya

poseerla no hay ningún problema; pero en el caso de que no se posea dicha cuenta, será

necesario crear una cuenta. Es por ello que a continuación les presento los pasos que deben

seguir para crear una cuenta Gmail:

¿Como crear una cuenta Gmail?

Paso 1: Una vez en la pagina de inicio del buscador Google, en la barra de herramientas

superior, donde dice Gmail hacemos clic:

Page 25: Tutorial de electiva

Paso 2: Luego nos aparece la ventana, donde haremos clic en “CREAR UNA

CUENTA”

:

Paso 3: Comenzamos a llenar el formulario:

Page 26: Tutorial de electiva

Primero Nombre y Apellido:

Luego el nombre de usuario, contraseña y confirmación de contraseña:

Page 27: Tutorial de electiva

Posteriormente la fecha de nacimiento, sexo

“El teléfono móvil no es obligatorio”

Luego el correo electrónico actual:

Page 28: Tutorial de electiva

Después escribimos las dos palabras que aparecen en el recuadro:

Luego aceptamos las condiciones del servicio y la política de privacidad:

Page 29: Tutorial de electiva

Y por último hacemos clic en siguiente paso:

Paso 4: Nos aparece creación del perfil. Si queremos podemos añadir una foto a nuestro

perfil; o sino posteriormente hacemos clic en Paso siguiente:

Page 30: Tutorial de electiva

Y eso es todo; ya está creada nuestra cuenta de Gmail. Hacemos clic en Ir a Gmail:

Comenzará a cargar nuestra dirección de gmail:

Page 31: Tutorial de electiva

Luego nos aparece una ventana donde podremos ver los correos que recibiremos:

Page 32: Tutorial de electiva

Ahora SI………..

Veamos ¿Cómo configurar el servidor web gratuito

www.000webhost.com?

Paso 1: Ir al buscador y teclear el nombre 000webhost

Page 33: Tutorial de electiva

Paso 2: Nos aparece en primera opción la página del servidor: 000webhost

(www.000webhost.com/). Hacemos clic directamente en ella; o si queremos podemos hacer

clic en “Traducir esta página”, ya que la página originalmente está en inglés.

Page 34: Tutorial de electiva

Paso 3: Una vez dentro de la página:

Bajamos, y hacemos clic en Order Now de la sección “Free Hosting”; esto es para crear

una cuenta en el servidor:

Page 35: Tutorial de electiva

Paso 4: Luego nos aparecen una especie de formulario que debemos llenar para poder crear

la cuenta en el servidor. Llenamos casilla por casilla:

Paso 5: Primero escribimos el nombre que queremos darle al subdominio gratis que

usaremos:

Page 36: Tutorial de electiva

Paso 6: Luego escriben su nombre, email (dirección de correo Gmail) y contraseña:

Es en este paso donde les comentaba que necesitaríamos la dirección de correo gmail.

Paso 7: Luego hacemos clic en la casilla Estoy de acuerdo con Términos de Servicio:

Page 37: Tutorial de electiva

Paso 8: Y por último hacemos clic en Crear mi cuenta:

Y ya tendremos creada nuestra cuenta en el servidor web gratuito www.000webhost.com

Page 38: Tutorial de electiva

Luego nos aparecerá una ventana donde se mostrará información acerca de nuestro dominio

creado, el status y la action:

Paso 9: Luego hacemos clic en Resend Email, de la columna Action, para que nos envíe a

la cuenta gmail creada, un correo de confirmación de nuestra cuenta en el servidor.

Page 39: Tutorial de electiva

Al hacer clic, nos aparece una ventana indicando que el correo con el link de confirmación

fue enviado a nuestra cuenta de correo gmail:

Paso 10: Para ver el correo con el enlace de confirmación, simplemente presionamos el

botón “Iniciar sesión” en la parte superior derecha de la página:

Page 40: Tutorial de electiva

Nos aparecerá la ventana de iniciar sesión, donde colocaremos nuestra dirección de correo

gmail y nuestra contraseña. Y posteriormente presionaremos iniciar sesión:

Comenzará a cargar la cuenta:

Page 41: Tutorial de electiva

Una vez en el buzón de entrada de correos, abrimos el correo enviado por el servidor

000webhost.com, para confirmar la cuenta creada:

Al abrirlo podemos ver el enlace que nos permitirá confirmar la creación de la cuenta en el

servidor, y hacemos clic en él:

Page 42: Tutorial de electiva

Paso 11: Luego, ese enlace nos direcciona nuevamente a la página del servidor donde

aparece la descripción de nuestro dominio:

Luego hacemos clic en la dirección del dominio:

Page 43: Tutorial de electiva

Nos aparece una ventana, donde se muestra un mensaje indicando que el sitio web está en

funcionamiento:

Si regresamos a la ventana que muestra la información de nuestra cuenta creada en el

servidor, podemos observar que ya el Status de la cuenta habrá cambiado a Active (Activo)

Page 44: Tutorial de electiva

Paso 12: Posteriormente haremos clic en Go to CPanel, que es una herramienta de

administración basado en tecnologías web para administrar sitios de manera fácil:

Al hacer clic en CPanel, nos mostrará una ventana donde podemos notar al lado derecho

una columna donde se presenta toda la información de nuestra cuenta; como dirección de

dominio, nombre de usuario, contraseña, nombre de servidor; entre otros:

Y ya tenemos configurado nuestro servidor web.

Page 45: Tutorial de electiva

Ahora veamos……. ¿Como configurar filezilla para subir archivos FTP al servidor

www.000webhost.com?

Paso 1: Abrimos filezilla; para ello nos ubicamos en el escritorio haciendo clic en

Aplicaciones>Internet>Filezilla; tal como se muestra a continuación:

Page 46: Tutorial de electiva

Paso 2: Al abrir nos mostrará la ventana:

Paso 3: Hacemos clic en Gestor de Sitios, ubicado en la barra de herramientas en la parte

superior de la ventana:

Page 47: Tutorial de electiva

Paso 4: Luego de hacer clic en Gestor de Sitios, nos aparecerá la siguiente ventana:

Donde iremos llenando el formulario que se nos presenta: Servidor, tipo de servidor,

nombre de usuario, y contraseña. Datos que obtendremos de la información de nuestra

cuenta del servidor www.000webhost.com:

Page 48: Tutorial de electiva

Paso 5: En la parte de Selección de sitio al lado izquierdo de la ventana, podemos elegir un

nuevo sitio al que le daremos el nombre del nuestro nombre de usuario asignado cuando

creamos nuestra cuenta en el servidor. Mismo nombre que colocaremos en la sección de

Servidor del lado derecho de la ventana del gestor de sitios:

Page 49: Tutorial de electiva

Paso 6: Luego en la sección de puerto colocamos 21 y la sección de Server Type la

colocamos en FTP, que es el tipo de archivo que vamos a subir:

Page 50: Tutorial de electiva

Paso 7: Después en la sección Logon Type, seleccionamos normal; seguidamente

colocamos el nombre de usuario, también ubicado en la información de la cuenta que

creamos en el servidor, y la contraseña:

Page 51: Tutorial de electiva

Paso 8: Una vez hecho esto, hacemos clic en el botón conectar, ubicado en la parte inferior

de la ventana:

Paso 9: Luego comenzará a cargar la conexión al servidor web, para generar un sitio

remoto donde se almacenaran todos los archivos que deseemos subir a nuestro servidor. En

este caso nos generará un sitio remoto denominado public_html/. Igualmente nos mostrará

el estado de la conexión:

Page 52: Tutorial de electiva

Ahora a nuestro servidor podemos agregar una página web simple:

¿Cómo creamos una página web?

Paso 1: Abrimos el editor de texto gedit, desde el escritorio, hacemos clic en

Aplicaciones>Accesorios>Editor de texto gedit:

Page 53: Tutorial de electiva

Paso 2: Elaboramos el código fuente de nuestra página, agregando cierto contenido; por

ejemplo: ¿Qué es accesibilidad web?, ¿Cuáles son los estándares para accesibilidad web?.

Todo esto tomando en cuenta las etiquetas html:

Page 54: Tutorial de electiva

Paso 3: Una vez listo el código, procedemos a guardarlo. Seleccionamos guardar en la

barra de herramientas ubicado en la parte superior de la ventana:

Paso 4: Le damos un nombre .html y elegimos la ubicación donde lo queremos guardar, y

le damos guardar:

Page 55: Tutorial de electiva

Paso 5: Luego podemos buscar nuestro archivo, dependiendo la ubicación que le dimos.

Por ejemplo: en el escritorio:

Page 56: Tutorial de electiva

Luego nos tocaría validar la página:

¿Cómo validar la página web?

Paso 1: Vamos al buscador, y tecleamos: validator w3c

Paso 2: Al igual que en los procesos realizados anteriormente, podemos hacer clic

directamente sobre el nombre The W3C Markup Validation Service; o hacer clic en

Traducir página, ya que la página viene originalmente en inglés:

Page 57: Tutorial de electiva

Paso3: Luego nos aparece la página donde podremos ingresar la ubicación del archivo

.html para hacer el debido proceso de validación:

Paso 4: Elegimos Validar mediante Carga de archivos:

Page 58: Tutorial de electiva

Paso 5: Luego hacemos clic en examinar para buscar la ubicación del archivo:

Paso 6: Localizamos el archivo, hacemos clic sobre él, y luego presionamos abrir en la

parte inferior de la ventanita:

Page 59: Tutorial de electiva

Paso 7: Una vez cargado el archivo al validador:

Paso 8: Presionamos Check para verificar que no existan errores en el archivo, y lo valide:

Page 60: Tutorial de electiva

Paso 9: De estar correcto, sin ningún tipo de errores, nos mostrará una ventana indicando

que la página está correctamente validada, tal como se muestra en la siguiente imagen:

Page 61: Tutorial de electiva

Y ahora, una vez validada nuestra página web, procederemos a integrarla en nuestro

servidor creado, mediante filezilla:

Paso 1: Ya que nuestro archivo .html (página) lo tenemos en el escritorio, se nos haría fácil

arrastrarla hacia la sección de filezilla de tipo de archivo que queremos subir a nuestro

servidor:

Archivo .html

Tipo de

archivo

a subir

Page 62: Tutorial de electiva

Paso 2: Una vez que el archivo .html este dentro de la sección de los archivos a subir para

el servidor web, comenzará una comprobación y nos mostrará el estado de la transferencia

del archivo al servidor:

Arrastramos el archivo

.html hasta la sección de

tipo de archivo a subir al

servidor

Page 63: Tutorial de electiva

Una vez que el archivo este transferido correctamente al servidor; sólo nos quedará integrar

el nombre .html del archivo, al dominio creado en el servidor web 000webhost:

Dominio creado en el

servidor 000webhost

Nombre del archivo

.html seguido de /

Page 64: Tutorial de electiva

Luego al hacer clic en ese enlace nos debe aparecer el contenido de nuestra página web, el

cuál se encuentra ubicado en nuestro servidor web.

De ser así, cumplimos con el objetivo del tutorial:

Como pueden observar si nos muestra el contenido que agregamos en nuestro archivo .html

(página) creado.

Lo que quiere decir que se cumplió exitosamente con el tutorial…

“ÉXITOS”