Instituto Técnico con Enseñanza Empresarial

Redecomputo

"Entidad de Educación para el Trabajo y Desarrollo

Humano"

Gu

ía d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

r

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.

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

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

(3) (1)

(2)

(1)

(2)

(3)

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

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tán

da

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

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(1)

(3)

(2)

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 d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

r

(1)

(2)

(3)

Paso 2. Clic derecho sobre el archivo guia.pdf (1), luego clic en eliminar (2), confirmar la eliminación (3)

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.

(1)

(2)

(3)

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(2)

(1)

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

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

ód

igo

HT

ML

Pa

qu

ete

Es

tán

da

r

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.

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)

(1) (3)

(2)

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

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

Paso 4.

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

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

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

(1)

(2)

(3) (2) «Pilas» Verificar

(4)

(3)

(1)

Gu

ía d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

r

Paso 1. xxxxxxxx

(3) «Pilas» Verificar

(2)

(1)

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

(4)

Paso 6. Seleccionar No, Do not y siguiente (Next).

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(1)

(2)

(3) Paso 6. Verificamos que las rutas correspondan al sitio donde se encuentra la información (1) y (2). Clic en Done (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 d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

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

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(2)

(1) 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 d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

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

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(1)

(1)

(2)

(3)

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.

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.

(1)

(2)

(3)

Gu

ía d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

r

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.

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

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.

Paso 14. Hacemos clic en insertar (1), seleccionamos tamaño personalizado y digitamos 373 de anchox210 (2), Seleccionar unicamente utilizar codigo antiguo. (3)

(3)

(2)

(1)

Gu

ía d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

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

Gu

ía d

e A

pre

nd

iza

je M

od

ifica

ció

n d

e

Co

dig

o H

TM

L P

aq

ue

te E

sta

nd

ar

(4)

(3)

(2)

(1)

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 d

e A

pre

nd

iza

je M

od

ific

ac

ión

de

C

od

igo

HT

ML

Pa

qu

ete

Es

tan

da

r