INSTITUTO TECNOLÓGICO DE SALTILLO

Transcripción

1 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 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 Como insertar texto Como insertar recursos (imágenes, botones, links, etc.) Como subir los recursos al servidor 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 Uso de Excel para las Calificaciones.

2 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 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 (

3 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.

4 Accesar al siguiente link 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.

5 2.1 Instalación del programa para accesar al servidor FTP. Descargar el Cliente FTP más Actual de la dirección: 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:

6 Después dar clic en I Agree Después dar Clic en Next

7 Dar Clic en Next Dar Clic en Next

8 Dar clic en Install Solo hay que esperar a que termine la instalación

9 Dar clic en Finish Y comprobamos que se haya instalado bien

10 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.).

11 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.

12 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.

13 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.

14 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 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 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:

15 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: Nota: sólo el index.html hay que dejarlo fuera de las subcarpetas del servidor.

16 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

17 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.

18 Y también aparecerá la siguiente ventana: Hasta que aparece la siguiente ventana, y lo siguiente es seleccionar Probar

19 Hay que dar clic en Aceptar Y en esta ventana dar clic en Instalar Solo Hay que esperar a que termine la instalación

20 Cuando termine la instalación aparecerá la siguiente pantalla

21 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:

22 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:

23 Y listo solo hay que ejecutar el programa para verificar que todo este Bien Inicio,Todos los Programas, Adobe DreamWeaver CS6

24 Si todo sale bien aparecerá lo siguiente: