INSTITUTO TECNOLÓGICO DE SALTILLO

Departamento de Ciencias Básicas

Curso:

“Diseño de Paginas Web para el Docente”.

Temario del Curso: 1 Introducción.

1.1 Objetivo del curso.

1.2 Alcances del curso.

1.3 Ejemplo práctico.

2 Acceso al Servidor Vía FTP.

2.1 Instalación del programa para accesar al servidor FTP.

2.1.1 Manejo y configuración del cliente FTP.

3 Acceso a Programa para Crear y Diseñar Páginas Web (Dreamweaver).

3.1 Instalación del programa Dreamweaver.

3.2 Diseño y creación de una página web.

3.2.1 Como insertar texto.

3.2.2 Como insertar recursos (imágenes, botones, links,

etc.).

3.2.3 Como subir los recursos al servidor.

3.2.4 Como subir archivos .html o .php al servidor.

3.3 Convertir archivos a formato PDF.

3.4 Proteger archivos con WINRAR.

4 Hojas de Estilos (Darle Formato a las Paginas Web)

5 Encriptación de Páginas Web (Password a Páginas Web)

6 Manejo de Otros Gestores de Páginas Web

7 Manejo de Base de Datos MYSQL MYPHPMYADMIN

7.1 Instalar Script BLOG

7.2 Instalar Sistema de Registro de Alumnos

7.3 Instalar Sistema de Calificaciones en PHP y MySql.

7.3.1 Uso de Excel para las Calificaciones.

1. Introducción.

A continuación se presentan los objetivos, alcances y utilidad del curso

“Desarrollo de Páginas Web como Herramienta de Apoyo Para el

Docente”. El cual tiene como finalidad prestar una herramienta tanto al

maestro como al propio alumno.

1.1 Objetivo del curso.

El objetivo del curso es proporcionar una herramienta de utilidad basada

en el diseño y creación de una página web para el maestro, en la cual se

pretende que al finalizar el curso el maestro cuente con su propia página

web lista para trabajar durante el próximo ciclo escolar.

1.2 Alcances del curso.

El maestro tendrá la capacidad de crear y desarrollar su propia plataforma

de trabajo basada en la creación de una página web personal, de la cual se

podrá hacer uso desde cualquier red con acceso a internet, incluyendo

nuestra red Institucional.

1.3 Ejemplo práctico.

A continuación se presenta un ejemplo práctico. Accesar a la página

www.itsbasicas.com

Este link nos muestra la página principal en la cual está basada nuestra

plataforma de trabajo, dentro de nuestro departamento. Esta plataforma es

independiente de la página Oficial del Tecnológico de Saltillo

(www.its.mx).

¿Dónde se encuentra nuestro servidor?

¿Qué podemos observar en nuestra página principal?

En los botones del lado izquierdo podemos accesar a la lista de maestros

que forman parte de nuestra plataforma de trabajo, accesar a un correo

electrónico con dominio itsbasicas.com previamente proporcionado por el

administrador, se proporciona una galería de imágenes y el contacto de

nuestro departamento de ciencias básicas.

Así como también esta plataforma pretende apoyar a diversos cursos tales

como los proporcionados en verano o propedéuticos (Cursos de

Nivelación y/o Semestre cero), en la cual se pueden descargar los

cuadernillos de trabajo, instrumentación didáctica y temarios de las

correspondientes materias impartidas en dicho curso.

A continuación se muestra un ejemplo de un maestro utilizando esta

plataforma.

Accesar al siguiente link www.itsbasicas.com/davila

2. Acceso al servidor vía FTP

En este apartado aprenderemos como instalar el programa que nos servirá

como medio para subir toda nuestra información al servidor vía FTP y el cual

lleva por nombre “FileZilla”, así como el uso básico de este programa para

accesar al mismo y poder manipularlo.

2.1 Instalación del programa para accesar al servidor FTP.

Descargar el Cliente FTP más Actual de la dirección:

http://filezilla-project.org/download.php?type=client

Versión más actual: FileZilla_3.5.3_win32-setup.exe (recommended)

Dar Clic en el Ejecutable aparecerá lo siguiente:

Dar Clic en Ejecutar y Aparecerá la siguiente pantalla:

Después dar clic en I Agree

Después dar Clic en Next

Dar Clic en Next

Dar Clic en Next

Dar clic en Install

Solo hay que esperar a que termine la instalación

Dar clic en Finish

Y comprobamos que se haya instalado bien

2.1.1 Manejo y configuración del cliente FTP.

Desde el escritorio o programas arrancar el programa FileZilla tal como se

muestra a continuación:

Una vez que se cargue el programa, nos mostrará una ventana muy parecida a

las que utilizamos en un programa de Office (Word, Excel, Power Point, etc.).

Es aquí donde se va a manipular toda la información que nosotros queramos

subir a nuestra página web, que de aquí en adelante lo vamos a llamar

recursos, como una imagen, un botón, un documento o archivo en formato

pdf, Word, Excel, etc., esto tomando en cuenta que es aquí donde también se

alojaran las diferentes páginas con extensión .htm y .html, más adelante se

mostrará a detalle que se podrá almacenar en este servidor.

Para empezar a trabajar en este servidor es necesario contar con nuestra cuenta

personal que consta de un servidor, un nombre de usuario, una contraseña y un

puerto que serán proporcionados por el Administrador de cuentas. Estos datos

se introducen en la parte superior de esta ventana tal como se muestra a

continuación.

Una vez que se introducen los datos de usuario, debe de mostrarse en la

primera ventana Estado: Directorio listado correctamente, si deseas guardar

tus datos para que no los tengas que introducir de nuevo la próxima vez que

entres a este programa, puedes configurarlo desde Archivo, Gestor de sitios y

aquí se abrirá una pantalla donde te pedirá que creas un nuevo sitio tal como

se muestra en la siguiente figura.

Para empezar a trabajar con este servidor es necesario crear una carpeta de

trabajo, la cual constará de varias subcarpetas donde se almacenarán los

recursos necesarios para crear nuestra página web, copiar la carpeta llamada

“Curso Paginas Web” en mis documentos (se recomienda nombrar

subcarpetas y archivos posteriores con minúsculas), en esta carpeta ya se

encuentran algunas subcarpetas que se utilizarán para la creación de la página

web.

¿Cómo mostrar un recurso en la red sin necesidad de crear una página web?

En FileZilla ubicar la ventana de Sitio local: en esta ventana abrir la carpeta

“Curso Paginas Web” y abrir la subcarpeta de imágenes, al abrir esta

subcarpeta se desplegarán en la ventana inferior todas las imágenes guardadas

en esta carpeta, para mostrarla en la red (es decir, en el explorador de internet)

sólo basta con arrastrar la imagen a la ventana del lado derecho donde se

muestra “Nombre de archivo” justo debajo de la ventana llamada “Sitio

remoto”.

Una vez que el archivo ya se encuentra en el servidor y se ha actualizado, para

poder observar esta imagen en la red es necesario abrir una ventana de

explorador de internet y en el URL escribir la dirección donde se encuentra

localizada la imagen que subimos, empezaremos por introducir nuestra página

que es http://www.itsbasicas.com seguida por una diagonal y el nombre de

usuario correspondiente (cursoweb) y por último seguida por otra diagonal y

el nombre de la imagen con todo y su extensión tal como se muestra a

continuación http://www.itsbasicas.com/cursoweb/3erpiso.jpg ver figura.

Realiza un ejercicio similar en tu PC.

El siguiente ejercicio es agregar las subcarpetas en el servidor tal como se

realizó con los archivos anteriores, ver la siguiente figura:

Ahora si quiero ver un archivo desde el explorador hay que agregar en la

dirección la carpeta desde donde está guardada en el servidor, separada del

nombre del archivo por una diagonal, tal como se ve a continuación:

http://www.itsbasicas.com/cursoweb/imagenes/3erpiso.jpg

Nota: sólo el index.html hay que dejarlo fuera de las subcarpetas del servidor.

3. Acceso a Programa para Crear y Diseñar Páginas Web (Dreamweaver).

3.1 Instalación del programa Dreamweaver.

Comenzamos la Instalación del DreamWeaver CS6 dando doble Clic en el ejecutable

Dreamweaver_12_LS4

Aparecerá la siguiente pantalla

Menciona que los archivos de la instalación se descargaran de la dirección por defaul

C:\Users\chalgo\Desktop\Adobe Dreamweaver CS6 , si se desea se puede cambiar de directorio.

El siguiente paso es dar doble click en siguiente y aparecerá la barra cargando y hay que esperar a

que termine.

Y también aparecerá la siguiente ventana:

Hasta que aparece la siguiente ventana, y lo siguiente es seleccionar Probar

Hay que dar clic en Aceptar

Y en esta ventana dar clic en Instalar

Solo Hay que esperar a que termine la instalación

Cuando termine la instalación aparecerá la siguiente pantalla

Solo hay que darle clic a Cerrar

Después hay que regresar a la carpeta en donde esta el ejecutable del Dreamweaver

Hay que copiar el archivo amtlib.dll a la carpeta en donde se instalo el programa Dreamweaver, y

seleccionar el archivo amtlib según el sistema operativo que tenga instalado ya sea de 32bits o de

64bits.

Para definir si es de 32 o de 64 bits entrar a Inicio, Panel de Control, Sistema de Seguridad, Sistema

Y aparecerá algo como esto:

En este caso en Tipo de Sistema aparece 32

por lo que copiamos el que este en la carpeta de 32 bits

Después nos dirigimos a la ruta en donde se instalo nuestro programa Dreamweaver

Inicio,Equipo,Disco local(C:)),Archivos de Programas,Adobe, Adobe Dreamweaver CS6

Y en esta última carpeta con el Mouse ponemos con el clic derecho Pegar:

Y listo solo hay que ejecutar el programa para verificar que todo este Bien

Inicio,Todos los Programas, Adobe DreamWeaver CS6

Si todo sale bien aparecerá lo siguiente: