Instituto Técnico con Enseñanza Empresarial Redecomputo "Entidad de Educación para el Trabajo y Desarrollo Humano"
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 1. Ingresar al curso de tutor virtual, en la unidad 1 encontrarás un link para descargar el cogido HTML. Descargarlo.
Paso 2. Después de descargar el archivo, búsquelo en su carpeta de descargas y luego, copie y pegue el archivo comprimido en la carpeta donde usted descomprimirá la información. (Nota). Es importante crear una carpeta, en este caso la hemos llamado Codigos HTML.
Paso 3. Ingrese a la Carpeta donde copio el archivo (1), buscar y hacer clic derecho sobre el archivo (2), clic en extraer aquí (3).
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(2)
(1)
(3)
(1) (3)
(2)
(4)
Paso 4. Después de descomprimir el archivo hacer clic derecho sobre la carpeta que apareció (CursoBaseOriginal) (1), luego clic en copiar (2), posteriormente volver a hacer clic derecho sobre un área libre debajo del archivo y carpeta (3), clic en pegar (4).
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estándar
Paso 5. Procedemos a cambiar el nombre de la carpeta por el que deseamos utilizar. Recuerda que para cambiar el nombre hacemos clic derecho del mouse sobre la carpeta, clic en cambiar nombre.
Ahora ya estamos listos, podemos copiar nuestra guía de aprendizaje e ir al programa Dreamweaver para realizar los cambios deseados en HTML.
(1) (3) Paso 1. Ya te deben haber enviado a tu correo una o dos guías de aprendizaje, cada una de ellas es uno de los modulos que vas a diseñar. En este caso tengo la guía de clase 1 ofimatica (Ver (1)), ya esta convertida en PDF. Si no sabes como hacerlo por favor revisar el modulo que se esta anexando en esta unidad. Luego debes copiar este archivo y pegarlo dentro de la carpeta que contiene el paquete estandar (El que acabaste de descomprimir). Ir en este caso a Modulo 1. Como guardar Archivo (2), luego hacer clic en la carpeta PDF (3). Te aparecerán los dos archivos en la carpeta (Ver imagen inferior).
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(2)
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(1)
(3) (2) Paso 2. Clic derecho sobre el archivo guia.pdf (1), luego clic en eliminar (2), confirmar la eliminación (3)
(1)
(3)
(2)
Paso 3. ahora le daremos el nombre de guia.pdf al archivo que copiamos en la carpeta. Clic derecho del mouse sobre nuestro archivo (1), clic en cambiar nombre (2). Ahora tener especial cuidado de dar el mismo nombre del archivo que estaba aquí, sin tildes, en minúscula, igual (guia.pdf) (3). Listo ahora en nuestro paquete ya se esta visualizando nuestra guía.
(2)
(3)
Si buscamos en la carpeta modulo 1 (1), luego hacemos doble clic en inicio.html (2), aparecerá nuestro paquete estándar. Al hacer clic en Documento PDF ya debe aparecer nuestra guía.
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(1)
Guía de Aprendizaje Modificación de Código HTML Paquete Estándar
Paso 1. Ingresar al programa DreamWeaver. Si no lo tiene en su PC, por favor solicitar colaboración personalizada por el foro de dudas e inquietudes.
(2)
(1)
(3)
Paso 2. Seleccionar Dreamweaver Site (1), En el recuadro del Nombre, digitar el nombre del sitio. En este caso Modulo 1. Guardar Archivo (2), Clic en Next (3)
Paso 4.
Gu铆a de Aprendizaje Modificaci贸n de Codigo HTML Paquete Estandar
Paso 3. Estando en la opci贸n No (1), hacemos clic en siguiente (2). Estando en la opci贸n Edit local (3), hacemos clic en la carpeta(4).
(2) (3)
(4)
(1)
(2) «Pilas» Verificar
(3)
Paso 4. Debemos buscar la carpeta donde se encuentra la información. En este caso Modulo 1. Sin embargo el programa normalmente presenta el error que se debe ingresar una carpeta mas para que quede bien seleccionado. A mi me toco entrar hasta pdf (1) para que quedara Modulo 1.(2), luego guardar (3), clic en siguiente
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(1)
Paso 3. Estando en la opción No (1), hacemos clic en siguiente (2). Estando en la opción Edit local (3), hacemos clic en la carpeta(4).
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(1)
(2) Paso 1. xxxxxxxx
(3) «Pilas» Verificar
(4)
Paso 5. Hacemos clic en el icono de la carpeta (1), buscamos y seleccionamos la carpeta donde se encuentra la información, en este caso Modulo 1. (2), Verificamos que quede seleccionado (3), Clic en Guardar (4).
Paso 6. Seleccionar No, Do not y siguiente (Next).
(2)
Paso 6. Verificamos que las rutas correspondan al sitio donde se encuentra la informaci贸n (1) y (2). Clic en Done (3).
(3)
Ahora aparecer谩 en la parte derecha esta ventana donde se muestra el contenido de nuestro paquete estandar. Vamos a iniciar haciendo doble clic en inicio.html (4)
(4)
Gu铆a de Aprendizaje Modificaci贸n de Codigo HTML Paquete Estandar
(1)
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 7. Hacemos clic en Design y podremos cambiar el texto. Con los datos relacionados con la unidad. Por ejemplo de que se trata y que actividades vamos a desarrollar. Recuerda que esta debe ser una presentación muy breve de lo que contiene este módulo. Para nuestros compañeros expertos en diseño web que desean cambiar la presentación los invitamos a presentarnos diseños innovadores. Es importante recordar que esta formación esta diseñada para todo profesional que sin un conocimiento avanzado de diseño web pueda realizar los cambios requeridos. También los invito a profundizar consultando sobre el manejo de Dreamweaver.
Paso 8. Con anterioridad ya debes haber creado tu cuenta de issuu y cargado la guía de aprendizaje. Por ejemplo yo he ingresado a mi cuenta y de mi biblioteca estoy seleccionando una de de ellas. Hago clic en open. (Nota: Si no conoce el manejo de issuu por favor revisar el modulo de esta unidad). Paso 9. Al abrirse la guía interactiva hacemos clic en el icono <> Get embed code.
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(1)
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 9. Hacer clic en la parte superior derecha en The old Embed Page
(1)
(3)
(4)
(2)
Paso 10. Estando en la opcion HTML (1), buscar y hacer clic en el tamaño Size 420 px (2), luego clic derecho en el embed code (3), por ultimo clic en copiar (4).
(3)
(1)
Paso 11. Pasamos de nuevo al programa Dreamweaver, en la ventana de la derecha ahora hacemos doble clic en el archivo interactivo.html (1), luego estando en Design (2), hacemos un solo clic en el área gris (3) que representa el codigo de issuu.
(1)
(2) (3) Paso 12. Clic en code (1), como observarás ya esta seleccionado el codigo, simplemente hacemos clic derecho sobre él (2) y luego clic en pegar (paste) para pegar el codigo que traemos de issuu.
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
(2)
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 12. Como observarás aparece el nuevo codigo traido de issuu. Puedes ir comprobando de la misma forma que lo hiciste anteriormente pero ahora haciendo clic en interactivo, ya debe aparecer tu guía interactiva (Ver parte inferior). Hasta este momento ya tendríamos los primeros tres botones listos, ahora veremos para finalizar como insertar un video tutorial.
(1) (2)
(3)
Paso 14. Hacemos clic en insertar (1), seleccionamos tamaño personalizado y digitamos 373 de anchox210 (2), Seleccionar unicamente utilizar codigo antiguo. (3)
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 13. Ahora ingresaremos a youtube, vamos a buscar un video relacionado con el tema que tenemos en la guía, cuando ingresemos al video vamos a hacer clic en compartir. Nota: Posteriormente aprenderemos como crear los video tutoriales y como subirlos en youtube.
Guía de Aprendizaje Modificación de Codigo HTML Paquete Estandar
Paso 14. Clic derecho del mouse sobre el codigo, clic en copiar.
(2)
(1) (3) Paso 15. Ahora ingresamos a dreamweaver, doble clic en el archivo video.html (1), hacemos clic en Design (2), Hacemos un solo clic sobre el área gris (3) que representa el espacio del video.
(1)
(3)
(4) Paso 16. Ahota clic en la opcion code (1), como observamos el codigo del video queda seleccionado, hacer clic derecho del mouse sobre el (2), clic en pegar o paste (3). Nota: Cuando aparezca el nuevo codigo que trajimos de youtube debemos cambiar solo el numero del height por 280. (4) Esto para mantener la presentaci贸n.
Gu铆a de Aprendizaje Modificaci贸n de Codigo HTML Paquete Estandar
(2)
Gu铆a de Aprendizaje Modificaci贸n de Codigo HTML Paquete Estandar