Post on 23-Jul-2018
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:
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
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