Tips tecnológicos 6°

6to grado

Tips Tecnológicos

Técnicas de control con un propósito

Animación en Scratch

5 5

1. Scratch

5

2. El escenario

7

3. Modo presentación

8

4. Tipos de bloques

8

5. Guardar un proyecto

10

6. Nuevos objetos

11

7. Pintar un objeto

12

8. Borrar un objeto

13

9. Importar un objeto

14

10. Crear un objeto sorpresa

15

11. Experimentar con bloques

16

12. Dar movimiento

17

13. Control del objeto

18

14. Apuntando

19

15. Mensajes

20

16. Hacer animaciones

22

17. Crear escenarios

24

18. Agregar audio

25

19. Insertar comentarios

29

20. “Tocando”

29

21. Compartir tus proyectos

30

1

6to grado

Tips Tecnológicos

Redes con un propósito

33

¿Qué es una red?

33

¿Cuáles son los elementos de una red?

34

¿Cuáles son los principales tipos de redes?

36

¿Qué tipo de servicios se pueden tener en una red?

37

Video con un propósito

40

Tomar o capturar un video

40

Programa para editar videos: movie maker

50

1. Crear un nuevo proyecto

51

2. Guardar el proyecto

52

3. Abrir un proyecto existente

53

4. Conocer los elementos y características

53

5. Importar clips de video

55

6. Importar recursos multimedia

57

7. Editar un video

61

8. Monitorear o revisar la edición

63

9. Insertar un clip de video, una imagen o un sonido en el área de edición

65

2

6to grado

Tips Tecnológicos

10. Recortar videoclips, imágenes y sonidos

66

11. Niveles de volumen para los sonidos

68

12. Quitar el audio de un videoclip

69

13. Capturar una imagen de un videoclip

70

14. Dividir un videoclip

72

15. Agregar efectos de video a un clip

74

16. Agregar transiciones en el clip de video

77

17. Seleccionar una transición

79

18. Borrar o cambiar una transición aplicada

80

19. Crear títulos o créditos

81

20. Publicar la película

89

Diseño de sitios web con un propósito

92

Etapa 1: Planificar la creación de la web

93

Etapa 2: recopilar y organizar la información

95

Etapa 3: Crear las páginas

117

Etapa 4: Comprobar que las páginas no tengan errores

141

Etapa 5: Enviar los archivos a un servidor de internet

142

Principales Etiquetas HTML

144

3

Explorar documentos

Recuerda‌

4

Técnicas de control con un propósito

ANIMACIÓN EN SCRATCH ¿Qué es una animación?

Es la secuencia de una imagen en diferentes posiciones que al unirse en un programa presenta a la vista una sensación de movimiento.

Para hacer una animación necesita…

 Tener un programa para hacer animaciones, por ejemplo Scratch.  Saber cómo funciona el programa.  Saber de qué objeto imagen o fotograma quieres hacer la animación.  Tener la imagen del objeto en al menos 5 diversas posiciones.

1. SCRATCH Scratch es un programa gratuito creado por el MIT para enseñar las bases de la animación y la programación. Tiene una interfaz muy simple e intuitiva, que inspira la creatividad mientras se enseñan los bloques básicos de construcción que tienen los lenguajes de programación.

El MIT es el Massachusetts Institute of Technology que significa en español (Instituto Tecnológico de Massachusetts).

5

Puedes consultar más información o bajar el programa en la computadora de tu casa accediendo a esta dirección http://scratch.mit.edu/ Las características más importantes de Scratch son: 1. Se programa a través de Objetos.

2. Un objeto puede adquirir diferentes formas, una persona, un tren, una mariposa entre otras cosas, utilizando lo que en Scratch se le conoce como Disfraces.

3. Para dar instrucciones al Objeto, se utilizan bloques.

4. Al unir varios bloques se forman pilas, que se les da el nombre de programas.

5. Los programas permiten que el objeto se pueda mover, tocar, música, reaccionar con otros objetos entre otras cosas.

Al hacer clic sobre un programa, Scratch ejecuta en orden los bloques desde la parte superior del programa hacia abajo.

6

La pantalla principal de Scratch tiene estos elementos:

2. EL ESCENARIO El Escenario es el espacio donde podemos ver de qué manera las historias, juegos y animaciones cobrarán vida.

Los objetos se mueven e interactúan unos con otros en el escenario.

7

El escenario tiene 480 unidades de ancho y 360 unidades de alto, dividido en un plano cartesiano x – y.

3. MODO PRESENTACIÓN

El botón del Modo Presentación sirve para ver los proyectos en “Pantalla Completa”.

Para salir del Modo Presentación, solamente presiona la tecla Escape (Esc).

4. TIPO DE BLOQUES Existen tres tipos principales de bloques en la Paleta de bloques: 1. Bloques para Apilar Estos bloques tienen cortes en la parte superior, para que puedan encajar unos con otros y de esta manera formar las Pilas a. Algunos tienen un área para escribir un número en su interior

8

b. Hay bloques en los que se puede seleccionar un elemento del menú desplegable c. Existen bloques de apilar que parecen una “boca” en forma de C en la que se pueden insertar otros bloques

2. Sombreros Estos bloques tienen redondeada la parte superior d. Se ubican en la parte superior de las pilas. e. Esperan a que suceda un evento Por ejemplo: que se presione una tecla para ejecutar los bloques que están debajo de ellos.

3. Reporteros Este tipo de bloques como o están diseñados para encajar en el área de ingreso de información de otros bloques. o , a. Reporteros con bordes redondeados como reportan números o cadenas de texto y encajan en bloques que tienen espacios redondeados o rectangulares como o

.

b. Reporteros con bordes en punta (como

)

reportan valores booleanos (verdadero o falso) y encajan dentro de bloques con espacios que terminan en punta o son rectangulares como

o

9

.

c. Algunos de estos bloques tienen una casilla a ellos

Al

dar clic en la casilla, aparece un monitor en el escenario, que muestra el valor actual del reportero. A medida que el valor del reportero cambia, el monitor lo actualiza autom谩ticamente. Un monitor puede mostrar el valor del reportero en formatos diferentes.

5. GUARDAR UN PROYECTO 1. Dar clic en el bot贸n Guardar que se encuentra en la parte superior:

10

2. Localizar el lugar donde deseas guardar el proyecto:

En Scratch dentro de la secci贸n de proyectos, en el lugar que consideres m谩s adecuado o en tu computadora.

3. Escribir el nombre a tu proyecto.

4. Dar clic en Aceptar.

6. NUEVOS OBJETOS Al comenzar un nuevo proyecto en Scratch, siempre se inicia con el Objeto Gato.

11

Para crear nuevos Objetos, debes dar clic en estos botones:

7. PINTAR UN OBJETO 1. Dar clic en el bot贸n Se presentar谩 una pantalla para dibujar el nuevo objeto:

12

Cuando termines de pintar el nuevo objeto.

2. Dar clic en Aceptar y aparecerá automáticamente el escenario.

3. Si deseas editar tu nuevo objeto, dar doble clic en el objeto e ir a la pestaña de Disfraces: 8. BORRAR UN OBJETO 1. Localizar la Barra de Herramientas.

2. Seleccionar las tijeras.

3. Dar clic sobre el Objeto.

Otra opción es: 1. Dar clic en el botón derecho del mouse sobre el Objeto.

2. Seleccionar borrar dentro de las opciones del menú desplegable.

Este proceso de borrado aplica también para los bloques de Programación.

13

9. IMPORTAR UN OBJETO 1. Dar clic en el botรณn 2. Seleccionar un objeto de los predeterminados de Scratch o buscar un objeto en la computadora

3. Seleccionar el objeto que mรกs te guste.

4. Dar clic en Aceptar, automรกticamente se mostrarรก en el escenario:

14

Si existe algo de la imagen que no te gusta o le deseas agregar algo, puedes hacerlo editando el Disfraz. a. Dar doble clic en el objeto. b. Ir a la pestaña de Disfraces.

10. CREAR UN OBJETO SORPRESA Si aún no decides cómo quieres que sea tu objeto, puedes crear un objeto sorpresa dando clic en el botón al azar en el escenario.

15

y esto colocará un objeto

Si aún no te convence, borra el objeto y vuelve a dar clic en crear objeto sorpresa hasta que encuentres una imagen que te guste.

11. EXPERIMENTAR CON BLOQUES Los bloques están divididos en las siguientes secciones según sus características:  Movimiento  Apariencia  Sonido  Lápiz  Control  Sensores  Números  Variables

Para visualizar los bloques de cada sección debes: 1. Dar clic en los botones y los podrás visualizar en la parte inferior.

2. Dar doble clic sobre los bloques, para observar cómo el objeto realiza la acción.

Prueba dando clic sobre todos los bloques. Cambia los valores y observa lo que sucede.

16

12. DAR MOVIMIENTO Para dar movimiento a un objeto, se utilizan los bloques de la sección de Movimiento.

Estos bloques permiten mover el objeto hacia adelante, hacia atrás, a la derecha, a la izquierda o hacia un punto específico.

Para que un objeto “sepa” cómo moverse, se tienen que agregar los bloques correspondientes a la pestaña de Programas.

Descripción de algunos bloques: Este bloque

permite mover al objeto 10 unidades

dentro del escenario.

Para hacer que el objeto retroceda o vaya hacia atrás coloca un signo negativo antes de escribir la cantidad de pasos El bloque esperar

hace que el software espere los

segundos indicados antes de ejecutar la siguiente instrucción.

El bloque esperar se ubica en la sección de Control y para configurarlo, sólo se introduce la cantidad de segundos que deseas que espere.

17

13. CONTROL DEL OBJETO Otra forma para hacer que un programa o subprograma inicie es utilizando los bloques de sombrero que se encuentran en la Sección de Control.

A estos bloques no se les puede colocar uno antes (arriba de ellos) ya que deben ser los primeros en un programa o subprograma.

Su función es definir la instrucción que se necesita para hacer que el programa inicie.

Las instrucciones pueden ser:  Presionar una tecla.  La bandera verde.  Recibir un mensaje.

Cuando queremos que una acción se repita, pero resulta complicado poner muchos bloques para lograrlo, podemos seleccionar los bloques que dicen repetir.

18

Cuando se quiere detener todo el programa:

14. APUNTANDO Todo objeto puede voltear a “ver” a una dirección determinada o hacia donde se encuentre un objeto o el puntero del ratón. Esto equivale a dar giros a la derecha o a la izquierda hasta alcanzar la dirección indicada, no importa hacia donde esté viendo.

Para determinar la dirección a la que el objeto debe dirigirse debes: 1. Utilizar el bloque.

2. Seleccionar una de las cuatro opciones o escribir una dirección que te agrade.

19

1. Elegir el bloque

si quieres que siga a un

objeto o al ratón.

2. Seleccionar a quién quieres que siga.

3. Utilizar el botón

para detectar

automáticamente la orilla o borde del escenario. En ese caso rebotará, es decir regresará al interior del escenario.

15. MENSAJES (SUB-PROGRAMAS Y COMUNICACIÓN ENTRE OBJETOS) Para enviar mensajes a otros programas del mismo objeto y que empiecen a ejecutarse necesitas los bloques:

El Bloque enviar a todos manda un mensaje a todos los objetos incluso al mismo objeto que envía el mensaje.

Para utilizar este bloque es necesario: 1. Definir el nombre el mensaje.

2. Dar clic para desplegar la lista de mensajes existente.

3. Dar clic en nuevo

20

a. Se abre una ventana para escribir el mensaje (puede ser una o varias palabras, 31 caracteres máximo).

El bloque

recibe todos los mensajes y cuando llega el mensaje que

espera, empieza a ejecutar la lista de instrucciones.

1. Dar clic en la lista desplegable de mensajes existentes.

2. Seleccionar el mensaje que queremos que espere.

Cuando llegue, entonces empezará a ejecutar la lista de bloques que tenga debajo de él.

El bloque , borra todo lo que se haya pintado con el lápiz en el escenario.

21

16. HACER ANIMACIONES Para hacer una animación necesitas tener una secuencia de imágenes del mismo personaje en varias posiciones y después cambiarlas a cierta velocidad para que parezca que tienen vida.

Si quieres puedes dibujar tu propia secuencia de imágenes.

Si deseas iniciar la animación con un disfraz en particular debes: 1. Utilizar un bloque 2. Seleccionar un disfraz

Para cambiar los disfraces debes: 1. Utilizar un bloque

. Te cambiará el disfraz en el orden que

aparece en la pestaña de Disfraces.

2. También te puedes apoyar en los bloques repetir

22

Para darles efectos divertidos a tus imรกgenes debes: 1. Utilizar el bloque 2. Seleccionar uno de los siete efectos:

Color

Ojo de pescado

Remolino

23

Pixelizar

Mosaico

Brillantes

Desvanecer

Para regresar el objeto a su apariencia original debes: 1. Utilizar el bloque

17. CREAR ESCENARIOS Existe una base de imĂĄgenes en Scratch que puedes usar para agregar un fondo a tu proyecto, tambiĂŠn puedes utilizar alguna imagen que tengas en tu computadora.

24

Para aplicar un escenario debes: 1. Abrir un nuevo proyecto de Scratch.

2. En la lista de objetos dar clic sobre Escenario.

3. Ir a la pestaña de Fondos.

4. Seleccionar el fondo (alguno de Scratch o de tu computadora) 5. Dar clic en Importar o si deseas pintar uno, después seleccionar Pintar.

18. AGREGAR AUDIO Si deseas agregar un poco de música o una grabación debes 1. Ir a la pestaña de Sonidos.

2. Dar clic en Importar, si tienes un archivo en tu computadora que desees agregar o en Grabar si quieres grabar tu voz o un sonido. a. Cuando des clic en Importar aparece una ventana del explorador.

3. Buscar en tu computadora o escoger uno de los sonidos de Scratch.

4. Dar clic en el archivo y después en Aceptar.

25

Automáticamente se agrega al proyecto y se guarda junto con él, puedes cambiarle el nombre, escucharlo de nuevo o eliminarlo.

1. Agregar más archivos si así lo deseas.

Para grabar un sonido debes: 1. Ir a la pantalla de Sonido.

2. Dar clic en Grabar.

3. Al terminar de grabar, dar clic en Aceptar para agregar el archivo.

Una vez grabado puedes: 1. Cambiarle el nombre.

2. Volverlo a escuchar.

3. Eliminarlo.

4. Guardarlo en tu computadora para usarlo en otro objeto.

26

Para guardar una grabaci贸n en tu computadora debes: 1. Dar clic derecho sobre la grabaci贸n y selecciona Exportar.

Aparece esta ventana:

1. Buscar el lugar donde quieres guardarlo.

2. Ponerle un nombre.

3. Dar clic en Aceptar.

27

Para reproducir tu sonido en un programa debes: 1. Utilizar el bloque 2. Dar clic en la pestaña para que se desplieguen los sonidos que se han cargado en el objeto.

3. Agregar un sonido a tu animación, anexando este bloque a la pestaña de Programas del objeto animado, puede ser junto con los otros bloques o separado.

Para reproducir tu sonido y que la siguiente instrucción se ejecute hasta que termine debes: 1. Utilizar el bloque 2. Dar clic en la pestaña que se desplieguen los sonidos que se han cargado en el objeto.

28

19. INSERTAR COMENTARIOS

Para hacer que tus objetos tengan un globo donde se ve lo que “piensan” o “dicen” debes:

1. Utilizar los bloques

y

2. Agregar en tu programación y cambiar el texto, (recuerda, si quieres probarlos antes, dar doble clic sobre ellos).

20. ¿TOCANDO? Un objeto puede ejecutar una serie de instrucciones (bloques) cuando “choca” con otro objeto, con un color o con el borde del escenario.

Para saber cuándo está tocando algo debes: 1. Utilizar los bloques de la sección Sensores.

2. Seleccionar los sensores en forma de a. Este tipo de sensores nos responden la pregunta que se formula por ejemplo: o ¿Ratón presionado? o ¿Tecla presionada?

29

3. Introducir éstos en algunos bloques de la Sección Control como:

21.

COMPARTIR TUS PROYECTOS

Para compartir tus proyectos con el resto del mundo es necesario que los publiques en internet. Para eso es necesario: 1. Crear una cuenta en la página web de Scratch.

2. Realizar tu proyecto.

3. Publicarlo.

Para crear una cuenta en la página de Scratch debes: 1. Ingresar a la página http://scratch.mit.edu/

30

2. Llenar el formulario:

Aparece la página de bienvenida: 3. Anotar tu usuario y contraseña, en un lugar seguro que puedas recordar ya que las utilizarás para publicar tus proyectos en internet.

Para publicar tú proyecto en internet debes:  Guardar tu proyecto en la ubicación que desees.  Localizar el botón Compartir.  Dar clic en él.  Seleccionar Compartir este proyecto en línea…

31

 Escribir: o El nombre de usuario (con el que te registraste en la página de Scratch) o Tu contraseña (de tu cuenta de Scratch) o El nombre de tu proyecto (puedes borrar el que aparece y escribir uno nuevo).  Clasificar tu proyecto (Animación, juego, arte, etc.) Para que en la página sea más fácil de buscar para los demás).  Si quieres agregar una descripción de lo que hace tu proyecto y cómo se utiliza.

32

Redes con un propósito

Para entender cómo funciona una red de computadoras debes saber:  ¿Qué es una red?  ¿Cuáles son sus elementos básicos?  ¿Cuáles son los tipos de redes?  ¿Para qué sirve una red? ¿QUÉ ES UNA RED? Es un sistema de comunicación que conecta a varias computadoras para intercambiar información.

Una red integra tanto hardware (equipo) como software (programas) y puede estar formada por sólo dos computadoras o por un número casi infinito.

Por ejemplo: un conjunto de múltiples redes interconectadas es lo que conocemos por Internet.

Las redes de computadoras, consisten en “compartir recursos”, y uno de sus objetivos principales es hacer que todos los programas, datos y hasta los propios equipos estén disponibles para cualquier usuario que así lo solicite, sin importar el lugar físico.

33

¿CUÁLES SON LOS ELEMENTOS DE UNA RED? 1. Estaciones de trabajo A cada una de las computadoras conectadas a la red se les conoce con el nombre de estación de trabajo. Cada estación conserva la capacidad de funcionar de manera independiente, realizando sus propios procesos.

2. Servidores Son aquellas computadoras capaces de compartir sus recursos con otras.

Los recursos compartidos pueden ser impresoras, unidades de disco, CD­­ROM, archivos.

3. Tarjetas de Red Para comunicarse con el resto de la red, cada computadora debe tener instalada una tarjeta de red.

La tarjeta obtiene la información de la computadora, la convierte al formato adecuado y la envía a través del cable a otra tarjeta de red.

4. Cableado La red debe tener un sistema de cableado que conecte a las estaciones de trabajo individuales (PC) con los servidores.

34

5. Equipo de Conectividad

a. Puentes: Un puente es un dispositivo que conecta dos redes separadas para verse como una sola. b. Ruteadores: Son similares a los puentes, sólo que operan a un nivel diferente. Requieren por lo general que cada red tenga el mismo sistema operativo de red.

6. Un lenguaje común Los lenguajes de comunicaciones se llaman protocolos. Los protocolos de red son una o más normas estándar que especifican el método para enviar y recibir datos entre varias computadoras.

Protocolos más importantes: a. ATP (Apple Talk Transaction Protocol) Apple Talk es un protocolo que se utilizar para conectar computadoras Macintosh de Apple en redes locales. b. TCP (Transmission Control Protocol) Este protocolo fue diseñado a finales de los años 60, permite enlazar computadoras con diferentes sistemas operativos. Es el protocolo que utiliza la red de redes Internet.

35

Ejercicio: Escribe el nombre de cada uno de los elementos que se presentan en este diagrama de red:

¿CUÁLES SON LOS PRINCIPALES TIPOS DE REDES? La forma en la que se conectan las computadoras o estaciones de trabajo, define el tipo o topología de cada red.

36

Principales topologías:

¿QUÉ TIPO DE SERVICIOS SE PUEDEN TENER EN UNA RED? 1. Acceso: Para tener acceso es necesario que las personas o usuarios tengan una clave. Esta clave es la identidad del usuario y determina los recursos que puede utilizar.

2. Almacenamiento:

Consiste

en

ofrecer

espacio

para

descargar

información. Permite almacenar tanto aplicaciones como datos en el servidor, reduciendo los requerimientos de las estaciones.

3. Impresión: Este servicio permite compartir impresoras entre múltiples usuarios, reduciendo así el gasto.

37

4. Correo: El correo electrónico, es la aplicación de red más utilizada. Este servicio ha reducido los costos en la transmisión de información y la rapidez de entrega de la misma.

5. Distribución: Por medio de este servicio el servidor puede evaluar el tipo de usuario que ingresa así como el contenido o información que demanda y enviarlo al lugar que le corresponda con el fin de darle una salida o respuesta inmediata.

6. Seguridad: La información que se maneja, en toda red o computadora es vulnerable y puede sufrir un ataque, alteración o descompostura. Es por eso que uno de los primeros puntos a cubrir deben ser las claves de acceso, el segundo aspecto es asegurarse de que en cada estación de trabajo y en el servidor se utilice un antivirus, actualizarlo o configurarlo para que automáticamente integre las nuevas actualizaciones del propio software y de los virus registrados.

Conclusiones Una red de computadoras permite: 1. Mayor facilidad en la comunicación entre usuarios.

2. Reducción en el presupuesto para software y hardware.

3. Organización de los grupos de trabajo que la conforman.

4. Mejoras en la administración de los equipos y programas.

38

5. Mejoras en la integridad de los datos.

6. Mayor seguridad para acceder a la información.

Responde: ¿Cuáles de estos puntos consideras que pueden ser un ejemplo de redes?  Intercambiar y compartir información entre diferentes usuarios a través del correo electrónico.  Crear grupo de discusión a distancia sobre diversos temas.  Tener acceso a bibliotecas electrónicas en lugares distantes.  Utilizar facilidades de cómputo en áreas geográficas diferentes.  Crear sistemas de procesamiento de transacciones, como los cajeros de bancos.

39

Video con un propósito

Un video es la captura, procesamiento, transmisión y reconstrucción de una secuencia de imágenes y sonidos que representan escenas en movimiento.

Crear un video para un propósito significa editarlo tomando como base el tema y público a quién se va a dirigir.

Esta edición la puedes hacer: a. De un video que directamente tomes o capturas con una cámara digital. b. De un video que hayas seleccionado

y guardado en tu

computadora.

TOMAR O CAPTURAR UN VIDEO 1. Las cámaras fotográficas y de video, actualmente cuentan con tecnología digital, es decir, las fotografías y los clips de video se almacenan como archivos.

40

2. Los archivos son guardados en pequeñas tarjetas de memoria que se insertan en la cámara y se pueden sacar posteriormente para leerlas en algunas computadoras.

3. Para capturar clips de video y fotografías necesitas tener una cámara digital, que te permita transferir las fotos o clips que tomes a la computadora.

4. Los archivos se pueden copiar usando un cable USB o una tarjeta de memoria, estos accesorios generalmente vienen con el equipo de la cámara fotográfica.

41

5. Para transferir los archivos por medio de un cable USB, se conecta la terminal especial a la cĂĄmara y el otro extremo del cable USB a la computadora.

6. Las tarjetas de memoria se pueden insertar en ranuras de algunas computadoras, pero si el equipo no cuenta con ese tipo de entradas, entonces se conectan a travĂŠs de los cables USB. Existen diferentes tipos de tarjetas y de varias capacidades de almacenamiento.

42

Estas tarjetas de memoria se interpretan en la computadora como un disco externo, y se pueden leer como carpetas de archivos.

7. Al abrir el ícono del dispositivo de almacenamiento (disco externo), funciona exactamente igual que las demás carpetas con archivos.

8. Algunas de las cámaras fotográficas, también permiten grabar video además de las fotografías.

43

9. Los videos se almacenas como archivos de video clip en la tarjeta de memoria, pero ocupan mucho más espacio que una fotografía convencional, por este motivo tardan más tiempo en transferirse a la computadora.

Para tomar e importar imágenes fotográficas a una computadora debes: 1. Buscar una cámara fotográfica digital, prenderla y tomar las fotografías necesarias.

44

2. Si la computadora tiene una ranura de memoria compatible con la tarjeta de memoria de la cĂĄmara, sĂĄcala de la cĂĄmara e insĂŠrtala en la computadora.

Si la computadora no tiene ranuras para tarjetas de memoria, utilizar el cable USB y conectarla a la computadora.

45

3. Abrir el ícono del dispositivo de almacenamiento para desplegar las carpetas con los archivos fotográficos.

4. Abrir la carpeta de la tarjeta de memoria que contiene las fotografías.

5. Dar un clic con el botón derecho del mouse sobre el archivo fotográfico y seleccionar la opción Copiar.

46

6. Abrir la carpeta de Mi Portafolio, dar un clic con el botón derecho del mouse sobre el área blanca de la pantalla y seleccionar la opción Pegar.

7. Copiar el resto de los clips de video a la carpeta de Mi Portafolio

Para tomar e importar clips de video a una computadora debes: 1. Buscar una cámara fotográfica digital que tenga la opción de Grabar Video, prenderla y tomar los clips necesarios.

47

2. Si la computadora tiene una ranura de memoria compatible con la tarjeta de memoria de la cĂĄmara, sĂĄcala de la cĂĄmara e insĂŠrtala en la computadora.

Si la computadora no tiene ranuras para tarjetas de memoria, utilizar el cable USB y conectarla a la computadora

48

3. Abrir el 铆cono del dispositivo de almacenamiento para desplegar las carpetas con los Clips de video.

4. Abrir la carpeta de la tarjeta de memoria que contiene los clips.

5. Dar clic con el bot贸n derecho del mouse sobre el clip de video y seleccionar la opci贸n Copiar.

49

6. Abrir la carpeta Mi Portafolio, dar un clic con el botón derecho del mouse sobre el área blanca de la pantalla y seleccionar la opción Pegar.

7. Copiar el resto de los clips de video a la carpeta Mi Portafolio.

PROGRAMA PARA EDITAR VIDEOS: MOVIE MAKER Para editar videos se necesita:  Tener un video. Puede ser alguno que hayas tomado con tu cámara o que hayas guardado en tu computadora.  Tener un programa para editar videos.  Tener un guion en el que indiques los cambios a realizar.  Tener las imágenes y audio a incluir.  Saber como importar un video.

50

Programa para editar videos: Como ejemplo de programa se utilizará el Movie maker V.2.1, ya que es un programa incluido dentro del sistema operativo Windows y de fácil acceso.

Para editar un video necesitas saber: 1. Crear un nuevo proyecto.

2. Guardar el proyecto.

3. Abrir un proyecto existente para tener acceso al que ya elaboraste.

4. Conocer los elementos y características de un programa para editar videos.

5. Importar clips de video de una cámara o de tu disco duro.

6. Importar recursos multimedia (imágenes, audio) para incluir en el video.

7. Editar un video.

1. CREAR UN NUEVO PROYECTO a. Abrir el programa de edición de video. b. Dar clic el menú Archivo. c. Seleccionar Nuevo Proyecto.

51

Otra alternativa es a través de la Barra de Herramientas. d. Seleccionar el ícono de Nuevo Proyecto 2. GUARDAR EL PROYECTO a. Abrir el programa de edición de video. b. Dar clic el menú Archivo c. Seleccionar Guardar Proyecto como

d. Escribir el nombre del proyecto y Guardar el documento en la carpeta Mi Portafolio.

e. Dar clic en el botón o en el ícono de Guardar.

52

Es recomendable estar Guardando, los cambios de edición que se estén realizando cada cinco minutos.

3. ABRIR UN PROYECTO EXISTENTE a. Abrir el programa de edición de video. b. Dar clic el menú Archivo. c. Seleccionar Abrir proyecto.

Otra alternativa es a través de la Barra de Herramientas d. Seleccionar el ícono de Abrir Proyecto

4. CONOCER LOS ELEMENTOS Y CARACTERÍSTICAS DE UN PROGRAMA PARA EDITAR VIDEOS. Cuando abres un programa para editar videos se abre una ventana similar a esta:

53

Partes de la ventana de trabajo:

54

El 谩rea de Edici贸n tiene dos modalidades: a. Mostrar Guion Gr谩fico: Es recomendable usar esta vista para insertar los efectos especiales y transiciones en cada clip de video.

b. Mostrar Escala de Tiempo: Es recomendable usar esta vista cuando se vaya a editar los recortes de clips de video, inserci贸n de audio e imagen.

5. IMPORTAR CLIPS DE VIDEO 1. Localizar la Barra de Herramientas.

2. Abrir el Panel de tareas.

55

Otra opci贸n es en el men煤 Ver, seleccionar Panel de tareas.

3. Desplegar el panel de Capturar video.

4. Seleccionar la opci贸n de Importar video.

5. Seleccionar el videoclip de la carpeta donde est茅 guardado.

56

6. Dar doble clic sobre el archivo del videoclip, o seleccionarlo y dar clic en el botรณn Importar.

7. Esperar a que el archivo se importe.

8. Los videoclips aparecen en el รกrea de colecciones, si el archivo tiene un tiempo de duraciรณn largo, se irรก fraccionando automรกticamente.

6. IMPORTAR RECURSOS MULTIMEDIA Archivos de imagen 1. En la Barra de Herramientas.

2. Abrir el Panel de tareas.

57

3. Desplegar el panel de Capturar video.

4. Seleccionar la opción de Importar Imágenes.

5. Seleccionar el archivo de imagen de la carpeta donde esté guardado.

58

6. Dar doble clic sobre el archivo del videoclip, o seleccionarlo y dar clic en el botรณn Importar.

Esperar a que el archivo se importe.

7. Las imรกgenes importadas aparecen en el รกrea de colecciones.

Importar archivo de sonido: 1. En la Barra de Herramientas.

2. Abrir el Panel de tareas.

59

3. Desplegar el panel de Capturar video.

4. Seleccionar la opci贸n de Importar im谩genes.

5. Seleccionar el archivo de imagen o de sonido de la carpeta donde est茅 guardado:

6. Dar doble clic sobre el archivo de sonido, o seleccionarlo y dar clic en el bot贸n Importar Esperar a que el archivo se importe.

60

Los archivos de sonido aparecerán en el área de colecciones.

7.

EDITAR UN VIDEO. Para editar un video es necesario tener importados los archivos que se van a necesitar para la edición:

Para insertar clips de video o imágenes necesitas: 1. Dar clic sobre el archivo dentro del área de colecciones.

2. Arrastrar, sin soltar el botón, hasta el área de edición, en el canal que dice video:

61

3. Si el archivo insertado es un videoclip y tiene sonido, se llenará también el canal de audio automáticamente.

Para insertar una imagen, se realiza de la misma forma hacia el canal de video.

Para insertar sonido: 1. Dar un clic sobre el archivo dentro del área de colecciones.

2. Arrastrar, sin soltar el botón, hasta el área de edición, en el canal que dice Audio/Música.

62

8.

MONITOREAR O REVISAR LA EDICIÓN.

Cuando se tienen insertados los clips de audio, imagen o video, es necesario revisar cómo se está armando la película en el Monitor.

El Monitor estará controlado por el cursor de la película, este se encuentra en el área de edición y está representado por un recuadro azul, con el que se visualiza el tiempo de la película.

La función del cursor de la película es marcar el tiempo de la secuencia de imágenes o fotogramas de las que se compone la película que se está editando. Una película es una secuencia de imágenes.

63

Los controles del Monitor son muy similares a cualquier aparato reproductor de sonido o video, y dependen de la posici贸n del cursor de la pel铆cula:

64

9. INSERTAR UN CLIP DE VIDEO, UNA IMAGEN O UN SONIDO EN EL ÁREA DE EDICIÓN.

1. Dar clic en el botón de Reproducir clip en el Monitor y ver la película.

2. Observar que el botón se cambia automáticamente al de Pausa

Mientras se esté reproduciendo el clip: 3. Dar clic en el botón de Pausa, y explorar lo que ocurre al oprimir los demás botones del control del Monitor.

65

10.

RECORTAR VIDEOCLIPS, IMÁGENES Y SONIDOS

1. Seleccionar un clip dentro del área de edición en el modo de escala de tiempo.

2. Colocar el cursor al inicio del clip, el cursor se convertirá en una doble flecha roja.

El recuadro negro completo del cursor, indica cuál será el clip al que se recortará o agrandará, el otro cuadro punteado sólo indica que está junto a otro clip que no será modificado su tamaño.

66

3. Dar clic cuando aparezca la doble flecha roja.

4. Arrastrar, sin soltar el botón, hacia la derecha para recortar el clip.

5. Para agrandar el clip, se da un clic sobre la flecha roja y sin soltar el botón, se arrastra al lado contrario, para este casi hacia la izquierda.

6. Para recortar al final de un clip, se realiza de la misma forma sólo que el cursor de recorte estará al lado contrario, indicando que lo que se recortará será del lado izquierdo dentro del clip.

En las imágenes y los sonidos se recorta de la misma forma que los clips, ya que para el editor de video las imágenes y sonidos son considerados como clips secuenciados.

67

11. NIVELES DE VOLUMEN PARA LOS SONIDOS 1. Seleccionar un clip de sonido dentro del área de edición en el modo de escala de tiempo

2. Dar clic con el botón derecho del Mouse, sobre el clip de sonido.

3. Seleccionar la opción de Volumen…

4. Mover la barra para ajustar el nivel de volumen.

68

5. Dar clic en el bot贸n Aceptar y escuchar los cambios con el Monitor.

12. QUITAR EL AUDIO A UN VIDEOCLIP 1. Seleccionar un clip de video dentro del 谩rea de edici贸n en el modo de escala de tiempo

2. Dar clic con el bot贸n derecho del mouse sobre el canal de audio que le corresponden al clip de video que se le quiere quitar el sonido.

69

3. Seleccionar la opción de Silenciar, esto hará que no se reproduzca el sonido del videoclip y se logre escuchar el sonido de fondo.

4. Si lo que se quiere es sólo bajar el volumen y que se alcance a escuchar algo, entonces se selecciona la opción de volumen, funciona de la misma forma para los archivos de sonido.

13.

CAPTURAR UNA IMAGEN DE UN VIDEOCLIP 1. Seleccionar un clip de video dentro del área de edición en el modo de escala de tiempo

70

1. Reproducir el videoclip en el Monitor.

2. Buscar la imagen que se desea dentro del videoclip, dar un clic en el bot贸n de reproducir otra vez para dejarlo en modo Pausa.

3. Dar clic sobre el bot贸n Tomar Imagen representado por una c谩mara fotogr谩fica.

4. Escribir el nombre del archivo y Guardar el archivo de imagen en tu carpeta Mi Portafolio

71

5. Dar clic en bot贸n Guardar.

14.

DIVIDIR UN VIDEOCLIP 1. Seleccionar un clip de video dentro del 谩rea de edici贸n en el modo de escala de tiempo

72

2. Colocar el cursor de la película en el lugar donde se desea dividir el clip en dos partes.

3. Dar clic en el botón de dividir el clip en dos partes, se cortará en dos a partir del fotograma o imagen que esté mostrándose en el Monitor.

4. El corte se verá en el área de edición, como dos clips de video independientes.

73

15.

AGREGAR EFECTOS DE VIDEO A UN CLIP 1. Desplegar el papel de Editar película

2. Seleccionar la segunda opción de Ver efectos de Video.

Se mostrará en el Panel de Efectos, más de 50 opciones que se pueden disponer para aplicar a cada clip de video:

74

3. Usar la barra de desplazamiento vertical para explorar todas las opciones de efecto que se tienen disponibles.

Por ejemplo: para seleccionar el efecto de Acuarela.

Dar clic sobre el efecto y sin solar el botón, arrastrar hacia el clip de video, soltarlo encima de él Se iluminará una estrella de color azul en el clip de video, indicando que se tiene aplicado un efecto de video.

El efecto de acuarela se aplicará en todo el clip seleccionado:

75

Un clip de video puede tener varios efectos aplicados Para ver la lista de efectos: 1. Dar clic con el bot贸n derecho sobre el clip de video 2. Seleccionar la opci贸n Efectos de Video:

3. Seleccionar los efectos deseados.

4. Dar clic en el bot贸n Agregar. i. Si no se desea alguno, seleccionar el efecto no deseado de la lista de Efectos mostrados.

5. Oprimir el bot贸n Quitar.

76

6. Dar clic en el bot贸n Aceptar y revisar los efectos aplicados con el Monitor.

16.

AGREGAR TRANSICIONES EN EL CLIP DE VIDEO

1. Desplegar el panel de Editar Pel铆cula

2. Seleccionar la tercera opci贸n de Ver transiciones de video.

Se mostrar谩n en el Panel de transiciones las 85 opciones disponibles para aplicar entre los clips de video.

77

3. Usar la barra de desplazamiento vertical para explorar todas las opciones que se tienen:

4. Dar clic en la opción de Mostrar guion gráfico.

Se desplegará el primer fotograma o imagen de cada clip.

Los clips con algún efecto se identificar porque tienen iluminada la estrella azul de efectos de video.

78

17.

SELECCIONAR UNA TRANSICIร N.

1. Dar clic en el tipo de transiciรณn que se desea.

2. Arrastrarla sin soltar el botรณn, hacia el recuadro que estรก entre dos clips de video.

3. Soltarla encima del recuadro.

4. Ver la transiciรณn aplicada con el Monitor.

79

18. Borrar o cambiar una Transici贸n aplicada 1. Dar un clic sobre la transici贸n aplicada y oprimir la tecla Delete o Suprimir

2. Para reemplazar la transici贸n aplicada y cambiarla, se debe seleccionar otra transici贸n y colocarla encima del recuadro entre clips de video.

80

19. CREAR TÍTULOS O CRÉDITOS 1. Desplegar el panel de Editar película.

2. Seleccionar la cuarta opción de Crear títulos o créditos.

Se mostrará en el Panel de título superpuesto, cinco opciones o formas de agregar texto:

81

3. Dar clic en la opción que necesites.

La opción de título al principio te puede servir para colocar el título de la película

4. Escribir en el recuadro el texto necesario.

82

5. El Monitor mostrará el ejemplo de cómo se vería el texto.

Puedes agregar color al fondo y cambiar el color al texto con las opciones que vienen debajo de esa pantalla

Al seleccionar la primera (Cambiar la animación del título) aparecen una serie de opciones.

Seleccionar alguna y observar la animación en el Monitor.

83

1. Dar clic en Listo.

2. Para cambiar el Tipo y Color de letra, dar clic en la otra opci贸n.

Se presentar谩n las opciones de tipograf铆a:

Herramienta

Funci贸n Tipo de letra

Estilo de letra

Color de letra

Nivel de transparencia

84

Tamaño de la letra

Alineación del texto

3. Al finalizar de dar Formato al texto, dar clic en Listo.

4. Dar clic en Listo, añadir título a la película y revisar con el Monitor.

Para Añadir el título antes del clip seleccionado en la escala de tiempo:

85

1. Se presentan las mismas opciones (la animación de título y formato de texto). La diferencia está en que se colocarán las letras sobre el videoclip de fondo:

2. Observar en el canal de Título superpuesto.

Aparece el texto insertado como un clip, el cual se puede recortar o alargar al tamaño que se desea:

86

Para añadir el título después del clip seleccionado en la escala de tiempo:

1. Se presentan las mismas opciones (la animación de título y formato de texto). La principal diferencia es que se aplicará al acabar el clip del video seleccionado y con varias líneas de texto desplegables.

87

2. Escribir en los recuadros, los datos que van a aparecer al final de la película, por ejemplo:

3. Observar el ejemplo que se despliega en el Monitor.

4. Dar clic en Listo, añadir título a la película y revisar con el Monitor.

88

20. PUBLICAR LA PELÍCULA Una vez terminada la edición de la película, es necesario juntar todos los clips en uno.

1. Dar clic en el menú Archivo.

2. Seleccionar la opción de Guardar archivo de película…

Aparecerá una ventana con las opciones para guardar en un tipo de medio electrónico.

3. Dar clic en Mi PC y un clic en el botón Siguiente.

89

4. Escribir el nombre en el primer campo, y después seleccionar la carpeta donde será guardado:

5. Dar clic en el botón Siguiente.

Se presenta otra pantalla con las opciones de espacio en disco.

6. Seleccionar la de mejor calidad (recomendado).

7. Verificar el espacio que ocupará la película.

8. Dar clic en Siguiente.

90

9. La computadora comenzará a generar el nuevo clip de película, esperar hasta que termine y aparezca la siguiente pantalla:

10.Se termina el proceso y se da la opción de reproducir al presionar el botón Finalizar, seleccionar la casilla:

11.Dar clic en el botón Finalizar y revisar el producto terminado.

91

Diseño de sitios web con un propósito

¿Qué necesitas saber para crear una página de Internet o página Web?  Qué es una página Web.  Cómo se hace una página Web. o Planear el diseño de la página o Escribir las instrucciones para programar.

Una página Web es un documento que puede contener información de texto, imágenes, animaciones, fotografías, videos, etcétera, que están relacionadas a través de enlaces dentro de la misma página o hacia otras páginas.

A estos enlaces se les conoce comúnmente como ligas o vínculos de hipertexto o hiperenlaces.

Esta característica proporciona la facilidad de consultar diferentes partes de una misma página, o bien una página distinta. Muchos usuarios describen este proceso como navegar en un espacio sin límites. Estas páginas que existen en la www son creadas, utilizando el lenguaje de programación conocido como HTML. Una página Web se hace en varias etapas:

92

1. Planificar la creación de la Web. La primera etapa es pensar por anticipado y realizar un diseño preliminar.

2. Recopilar y organizar la información. Crear una nueva carpeta para guardar los archivos de la página Web de forma ordenada en el disco duro de nuestra computadora.

3. Crear las páginas. Hacer la programación incorporando el texto, las imágenes y los demás accesorios.

4. Comprobar que las páginas no tengan errores. Ver las páginas con los navegadores para comprobar que se ven como esperamos.

5. Enviar los archivos a un servidor de Internet.

ETAPA 1. PLANIFICAR LA CREACIÓN DE LA WEB Analizar y decidir por anticipado una serie de cuestiones fundamentales:

93

94

Una página o sitio Web está formada por las siguientes partes: Header o Encabezado: Es la parte superior del sitio, la que se mantiene igual a través de todas las secciones. En ella aparecen el logo, el nombre del sitio, a veces los botones, una fotografía, etc.

Botones: Sirven para transportar al visitante de una sección a otra.

Secciones: Son las partes en las que se divide el sitio. Generalmente, se utilizan entre 5 y 9 secciones en un sitio estándar (aunque pueden ser más o menos).

Cada sección deberá tratar un tema específico y no confundir su contenido o su título con el de otras secciones. El objetivo es que el visitante encuentre una distribución de secciones tal que le permita encontrar la información que busca sin problema alguno y sin confusiones.

Fotografías: Debe ser de buena calidad para que no devalúen el diseño Web. Pueden ser fotos propias o sacadas de un stock.

Footer o pie de página: Es la parte inferior del sitio, en ella generalmente aparecen los créditos del sitio, y vínculos o secciones de información legal.

ETAPA 2. RECOPILAR Y ORGANIZAR LA INFORMACIÓN Es necesario crear una carpeta exclusiva para guardar de forma ordenada los archivos de la página Web en el disco duro de nuestra computadora.

95

Incluir los archivos de texto, directorio de ligas o enlaces, imágenes o fotos que se van a incluir, otros recursos multimedia y referencias bibliográficas o de Internet.

Para evitar algunos de los problemas más usuales cuando hacemos una página web es preciso organizarse desde el principio.

Además cuidar estas reglas: 1. No poner en los nombres de las carpetas Ñ, espacios y algunos caracteres especiales 2. Esta regla aplica para los nombres de los archivos. Por lo tanto escribir nombres sin espacios, sin acento, sin espacios raros y sin ñ.

3. Utilizar nombres que nos resulten fáciles de reconocer.

4. Utilizar la misma estructura del sitio en el disco duro de la computadora y en el servidor de Internet. Ésta es una cuestión fundamental y una de las causas principales de problemas cuando se comienza a crear páginas Web. Por tanto, utilizaremos el mismo esquema de directorios en el disco duro y en el servidor de Internet.

Una página Web está formada por una serie de archivos. Los archivos más usuales son: 1. Los de programación con las instrucciones en .html que permanecen ocultas y que hacen, por ejemplo, que el texto del título aparezca en azul.

96

2. Los que guardan las imágenes. Las páginas Web suelen tener imágenes que se guardan en archivos independientes.

3. Otros que incorporan multimedia y complementos dinámicos. Archivos que contienen los sonidos, video u otros accesorios multimedia.

La publicación de archivos multimedia favorece y enriquece los proyectos publicados en una página Web, sin embargo, se puede convertir en un dolor de cabeza si estos recursos tardan mucho en desplegarse en pantalla o en bajarlos desde el sitio de origen.

Cuando se intenta ver una imagen que es muy grande, además de tardar mucho tiempo, es muy probable que el usuario que quiera verla se impaciente y cancele el proceso, esto causará que la página no sea visitada.

Lo mismo ocurrirá al insertar sonidos y videos que ocupan demasiado espacio en disco, será casi imposible transferirlos por la red de internet.

Por lo tanto se deben de considerar dos puntos muy importantes para la elaboración de recursos multimedia: 1. El menor espacio posible del archivo.

2. La mejor calidad del recurso.

Para poder lograr estos dos puntos, es necesario encontrar un balance entre ellos, ya que la mejor calidad implica mayor espacio y con el menor espacio en ocasiones implica una mala calidad.

97

Los recursos multimedia más comunes se pueden agrupar en tres categorías: 1. Audio: archivos de voz, música y efectos especiales 2. Imagen: dibujos, esquemas y fotografías.

3. Video: animaciones y clips de video.

Los formatos más comunes para el trabajo en línea son:

1. Archivos de Audio Los tipos de archivo que podemos generar pueden contener voz, música y efectos especiales.

Los formatos más comunes para trabajar este tipo de archivo son los WAV y MP3

98

 Aunque los archivos WAV son de mejor calidad, los MP3 se han convertido en la moda por la facilidad de almacenamiento y tienen una buena calidad.  Existen varios programas para convertir entre formatos, uno de ellos es el Switch (fabricado por NCH Swift Sound), se puede encontrar en su versión gratuita en la red de Internet.

99

Para convertir un audio: 1. Abrir el programa de Switch que se encuentra en tu Carpeta Recursos multimedia:

2. Agregar los archivos de sonido que se quieren convertir al recuadro blanco.

3. Dar clic en el bot贸n Add File(s).

4. Seleccionar los archivos desde la carpeta que los contiene.

100

5. Dar clic en el bot贸n Abrir

Aparece el listado de los archivos seleccionados.

6. Desplegar la lista de opciones de formatos disponibles.

7. Seleccionar el formato de salida o conversi贸n a MP3

101

8. Seleccionar el botón de Encoder Options… (opciones de conversión):

9. Seleccionar el número de canales a modo Estéreo. Dar clic en el botón OK.

10.Verificar que esté activa la casilla de la opción de guardado, si es que se desean guardar los archivos en la misma carpeta de los audios de origen.

102

11.Dar clic en el botón Convert para ejecutar los cambios de formato.

Al terminar se mostrarán

los archivos convertidos

en la lista

acompañados con un signo de acierto color verde

12.Para realizar una nueva conversión, primero se deben quitar los archivos convertidos de la lista y realizar una nueva selección. Para quitarlos de la lista, dar un clic en el botón Remove o Remove All. 2. Archivos de imagen Formatos de imagen: los navegadores de internet recomiendan 3 formatos de imágenes y cada uno con sus diferentes características: a. Join Photographic Experts Group

JPEG o JPG

b. Graphis Interchange Format

GIF

c. Portable Network Graphics

PNG 103

¿Por qué sólo tres? son los que manejan la mayor comprensión en imágenes y son universales, es decir, pueden ser vistos fácilmente en cualquier plataforma de computadoras.

La calidad está definida por el tamaño de imagen y el número de colores que contiene, con estos parámetros se determinar el espacio que ocupará en un disco duro.

El siguiente esquema presenta los resultados del guardado de una fotografía almacenada con las mismas características de imagen en los 3 tipos de formato:

Comparación de las propiedades de archivo de cada imagen:

104

Los formatos GIF, no llegan a tener la cantidad de colores como una imagen JPG. Este formato puede manejar millones de colores, además de que ocupa menor cantidad de espacio.

Pixeles: Son los pequeños cuadrados o rectángulos en color, en blanco o en negro o en matices de gris que podemos ver en una imagen.

Las imágenes se forman como una matriz rectangular de pixeles, donde cada pixel forma un área relativamente pequeña respecto a la imagen total.

105

Para convertir las imĂĄgenes a otros formatos y para reducirlas de tamaĂąo, utilizaremos un programa gratuito de internet denominado IrFan View.

106

1. Localizar en tu carpeta de Recursos Multimedia el programa IrFan View.

2. Abrir un archivo de imagen.

3. Dar clic en el menú File.

4. Seleccionar la opción Open, o buscar directamente el ícono de Abrir.

Se mostrará la imagen en la ventana.

Lo primero será conocer las propiedades de la imagen que se está mostrando.

107

5. Dar clic en el menú Image.

6. Seleccionar la opción Information, o bien, dar clic en el botón de información en la barra de herramientas.

Se desplegará una ventana con las característica de la imagen, observar los 5 puntos principales marcados por las flechas rojas:

108

7. Dar un clic en el botón OK para cerrar la ventana de propiedades.

8. Para reducir el tamaño de la imagen a la mitad y que ocupe menos espacio, dar clic en el menú Image y seleccionar la opción Resize/Resample…

9. Dar clic en el botón de Half (a la mitad), automáticamente se reducirán los números que indican el tamaño, dar clic en el botón OK.

109

10.Con este proceso, se espera que el espacio en disco duro también se reduzca aproximadamente a la mitad.

11.Verificar con el botón de Information.

12. Guardar el archivo, con otro nombre para no perder el original.

13. Dar clic en el menú File y seleccionar la opción Save as…

14. Escribir el nuevo nombre del archivo.

15.Verificar que el tipo de archivo sea con formato JPG 16.Dar clic en el botón Guardar.

110

17.Abrir la carpeta Mi Portafolio, para revisar las propiedades de la imagen, dar clic con el botón derecho sobre la imagen y seleccionar la opción de Propiedades.

18.Verificar el tamaño de la imagen en la pestaña General.

19.Dar clic en la pestaña de Resumen para ver las otras características importantes de la imagen.

111

3.

Archivos de video Formatos de video: Los navegadores de internet recomiendan 3 formatos de video y cada uno con sus diferentes características: a. Windows Media Video

WMV

b. Moving Pictures Experts o Group

MPEG o MPG

c. Audio Video Interleave

AVI

¿Por qué sólo tres? son los que manejan la mayor comprensión en imágenes y son universales, es decir, pueden ser vistos fácilmente en cualquier plataforma de computadoras.

Para convertir los clips de video a otros formatos y para reducirlos de tamaño, utilizaremos un programa gratuito en el sistema operativo denominado Movie Maker.

112

1. Importar el clip de video 2. Colocar los clips en el área de edición hasta completar la película:

3. Dar clic en el menú Archivo.

4. Seleccionar la opción de Guardar archivo de película.

Aparecerá una ventana con varias opciones para poder guardarlo 5. Seleccionar la primera opción que dice Mi PC. 6. Dar un clic en el botón Siguiente.

113

7. Escribir el nombre del archivo con el que guardará la película en el campo N°1, y en el segundo campo indicar la carpeta donde se guardará el archivo dando un clic en el botón Examinar.

8. Al terminar dar clic en el botón Siguiente.

114

9. Aparecerá otra ventana con la opciones de configuración de la película, si se desea la mejor calidad de imagen seleccionar la primera opción y verificar el espacio que ocupará en el disco duro.

10.Si el espacio requerido para la nueva película es muy grande todavía, entonces seleccionar la tercera opción que se refiere a Otras opciones y buscar alguna de ellas que represente menor espacio con la óptima calidad, verificando el espacio requerido que se indica, al terminar dar un clic en Siguiente.

115

11.Esperar a que la pelĂ­cula se genere.

116

12.Aparecerá una nueva ventana de finalizar con la opción de Reproducir.

13.Dar clic en el botón Finalizar y revisar el producto terminado.

14.Verificar que la calidad sea buena o entendible, de lo contrario habrá que repetir los pasos desde configuración de película para mejorar el producto terminado.

ETAPA 3. CREAR LAS PÁGINAS Existen dos formas para crear páginas Web: 1. Utilizar plantillas.

2. Programar la página en HTML. 1. Utilizar Plantillas Una plantilla es un formato que tiene definidas ciertas secciones para que escribas, copies o pegues información, fotos o recursos multimedia sin necesidad de programar.

117

Puedes crear tu propia plantilla o utilizar las que te ofrecen algunas aplicaciones como Word, FrontPage o DreamWeaver así como algunos sitios en Internet y elegir la que más te guste o vaya de acuerdo al tema que quieras publicar.

Para crear tus propias plantillas puedes utilizar un Procesador de textos y guardarlo como página Web.

2. Programar tu Página Para crear las páginas necesitamos utilizar un lenguaje de programación.

Esto es una serie de instrucciones acomodadas o estructuradas en base a ciertas reglas que dan por resultado una acción determinada de la computadora. Existen diferentes tipos de lenguajes para diversos tipos de aplicaciones. El lenguaje que usaremos es el HTML.

118

El HTML (Hyper Text Markup Language. Lenguaje de Marcas de HiperTexto) es comúnmente utilizado para la publicación de páginas en la Internet, ya que es el soporte esencial de todos los demás lenguajes de programación utilizados para ese o objetivo.

Básicamente el HTML está conformado por una serie de instrucciones que le indican al explorador que estemos utilizando, la forma de presentar los elementos del documento.

Para escribir estas instrucciones podemos utilizar un editor de texto simple como el Bloc de notas que está incluido en todas las versiones del sistema Windows. Existen otras aplicaciones similares que funcionan para otros sistemas operativos.

En el Bloc de notas se graban los archivos en formato “.txt”, un formato que no tiene etiquetas ni estilos.

Además del Bloc de notas, existen varios editores de HTML que facilitan la creación del código. Uno de ellos es el HTML-­­Kit, éste es un software gratuito que puedes instalar utilizando la aplicación HKSetup.exe guardada en la carpeta Instaladores.

Primero vamos a trabajar con el Bloc de notas.

119

Para programar en HTML debes saber:  Algunas consideraciones generales.  Cuál es la estructura básica de una página HTML.  La función de las principales etiquetas de programación.

Consideraciones generals 1. El HTML es un lenguaje diseñado para publicar documentos hipertexto en Internet.

2. Tiene todas las herramientas para definir el formato de las páginas y el texto.

3. Permite incluir imágenes así como enlaces (comúnmente conocidas como “ligas”) a otros documentos.

4. Los enlaces o ligas, que pueden o no ser de texto, pueden ser entre dos ubicaciones físicamente alejadas.

5. Para visualizar un documento en HTML se usan los programas llamados exploradores, existen muchos de ellos, entre los más comunes están el Internet Explorar, Mozilla Fire Fox y Safari.

6. Las instrucciones del HTML se definen como etiquetas (“tags” en inglés) y se identificar porque se escriben entre los caracteres (menor que) y (mayor que).

120

Pueden clasificarse en dos tipos, abiertas y cerradas. 

Las etiquetas abiertas son instrucciones que se ejecutan una sola

vez como el insertar una imagen o una línea y sólo hace falta indicar el nombre de la etiqueta. 

Las cerradas indican una función que se aplica o una parte del

documento, puede ser una palabra, un párrafo o una sección completa, por lo que es importante indicar el inicio y el fin de la misma. Se inicia con el nombre de la etiqueta y se cierra con una /antes del mismo nombre.

Por ejemplo:

A las etiquetas cerradas también se les pueden agregar parámetros, que son cualidades o propiedades que se aplican de forma específica a un objeto o texto.

121

Ejemplo:

a. Una etiqueta puede contener atributos o propiedades que afectan la forma en que se muestra la información. Los atributos se escriben en minúsculas y sus valores deben estar enmarcados por doble comillas (“”). b. Para que una página esté bien programada, las etiquetas deben de estar propiamente acomodadas; se deben de ordenar la primera y última etiqueta en la secuencia correcta.

122

Por ejemplo: Si quieres escribir “Esta es una frase con negritas” Necesitamos las siguientes etiquetas:

La forma correcta de hacerlo es: PEsta es una frase con Bnegritas BP El atributo Bse abre y cierra dentro del atributo P Una forma incorrecta sería: PEsta es una frase con Bnegritas PB Explica

123

La estructura básica de una página en HTML es: HTMLIndica el inicio del documento. HEADDefine el inicio de la cabecera. /HEADDefine el fin de la cabecera. BODYInicio del cuerpo del documento. /BODYFin del cuerpo del documento. /HTMLIndica el fin del documento.

FUNCIÓN DE LAS PRINCIPALES ETIQUETAS DE PROGRAMACIÓN 1. ENCABEZADO DEL DOCUMENTO (HEAD) a. El encabezado se define por las etiquetas HEAD…/HEAD. b. Dentro de las etiquetas se colocan las características generales que afectarán a todo el documento. c. En el encabezado aparecen por ejemplo: el título de la página, la versión del HTML en que fue escrita, algunos comentarios del autor.

2. CUERPO DEL DOCUMENTO (BODY) a. El cuerpo es la segunda sección de la estructura del HTML y está definida por las etiquetas BODY…/BODY. b. Dentro de las etiquetas del cuerpo se localiza toda la información que será desplegada en los exploradores. Por ejemplo, podemos encontrar: encabezados, textos, tablas, imágenes, animaciones, etcétera, que contienen sus propios atributos y que repasaremos en los siguientes temas:

124

c. La etiqueta del cuerpo BODY…/BODY, contiene atributos que controlan la parte visible del documento. Estos atributos o propiedades son generalmente usados para agregar color y diseño a la página.

Los atributos más utilizados dentro de la etiqueta BODYson:

125

Ejemplo:

Este es el cuerpo de mi página /BODY

 Describe como se vería el resultado de esta programación:

3. TRABAJAR CON TEXTO a. El texto puede insertarse libremente dentro de la etiqueta del cuerpo (BODY), sin embargo existen algunas opciones para darle formato de manera más sencilla. b. Una de las opciones más usadas son los párrafos. c. Los párrafos dentro del código sirven para asignar líneas de texto con la misma alineación y propiedades.

126

d. Para definir un párrafo usamos la etiqueta P_/P, la P significa Párrafo o Paragraph en inglés. e. Las propiedades que se pueden controlar a través de los atributos de la etiqueta de P_/P son la alineación, tipo de letra, color y tamaño. f. Es importante hacer notar que los saltos de línea dentro de un texto no se definen dando Enter. En realidad el código del HTML define automáticamente que las líneas continúen en el siguiente renglón, a esta propiedad se le llama en inglés Word wrap.

Ejemplo: PEl Maravilloso Traje del Emperador./P Se visualiza de la siguiente forma:

g. Para indicar un salto de línea se utiliza la etiqueta abierta BR (Break, que significa rompimiento en inglés).

El Maravilloso BRTraje BRdel Emperador.

127

4. ALINEACIÓN a. Para cambiar la alineación del texto incluye el atributo align (alinear) a la etiqueta de iniciar acción del párrafo P. b. El atributo de align acepta tres diferentes elementos: left (izquierda), center (centrado) o right (derecha).

Ejemplo: P align=”center”El Maravilloso Traje del Emperador. /P Resultado

c. Es preciso considerar que el atributo de alineación (align) no necesita cerrarse, ya que es parte de la etiqueta de párrafo que se cierra con /P d. Este mismo atributo de alineación puede utilizarse de muchas formas, incluyendo la alineación de imágenes.

128

5. FORMATO DE TEXTO a. El texto es el elemento principal de un documento en HTML, y puede ser formateado por medio de algunas etiquetas y atributos bรกsicos:

b. En cuanto al color del texto, los navegadores tienen colores predefinidos: el color negro para el texto, el azul para los enlaces y el morado para los enlaces visitados. c. Gracias a los atributos de la etiqueta BODY es posible asignar colores distintos a los predeterminados.

129

Para todos los colores existen dos códigos principales:  Los 16 colores sólidos con nombre (aqua, gray, navy, silver, black, Green, olive, real, blue, lime, purple, White, fucsia, maroon, red y yellow)  Los colores hexadecimales. Este código tiene dos grandes ventajas: o Lo entienden todos los navegadores. o Puedes indicar más de 16 millones de colores.

Un código hexadecimal está basado en una numeración que está compuesta por 16 símbolos en lugar de 10 como el sistema decimal. Estos 16 símbolos son 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14) Y F(15).

Con el código hexadecimal podemos indicar la cantidad de color del 0 al 255 con sólo dos dígitos (del 0 al FF), y una vez que nos hemos acostumbrado no resulta tan complicado.

130

Como vemos todos empiezan con el símbolo ‘#’. Posteriormente siguen 6 números (siempre deben ser seis) en hexadecimal.

Ejemplo: BODY

bgcolor=”#003399”

text=”#333333”

link=”#FF6600”

vlink=”#FF9900” alink=”#ff6600”

En el ejemplo anterior, el fondo aparecerá de color azul marino debido a que 003399 es el código de color hexadecimal para ese tono.

Para conocer el código hexadecimal de cualquier color, puedes consultar la página http://www.ficml.org/jemimap/style/color/wheel.html

131

6. FORMATO DE TEXTO: APRENDAMOS A USAR CADA ATRIBUTO a. El tipo de letra se define utilizando el atributo de face y se escribe así:

Resultado:

b. Para definir el tamaño del texto se utiliza el atributo de size y se escribe así:

Resultado:

c. En caso de que quieras colorear un texto utiliza el atributo de color. d. Recuerda que dentro de las propiedades del documento puedes definir un color para todo el texto, pero si deseas cambiar solamente una frase o palabra, puedes usar este atributo:

132

e. Para aprender a usar los atributos del texto, practica con el párrafo de ejemplo. f. Define la alineación, color, tamaño de texto y tipo de letra. g. En el editor que estamos usando, da un clic sobre cada atributo de etiqueta en el panel de propiedades, ahí se desplegarán las distintas opciones que puedes aplicar.

Cuando creamos un sitio nuevo o una página en HTML, hay que tener en mente que no todas las computadoras tienen los mismos tipos de letras o fuentes, por lo tanto se deben utilizar las fuentes más comunes o al menos aquellas que están instaladas en la mayoría de las computadoras: Arial, Arial Black, Arial Narrow, ArialRounded MT Bold, MS Sans Serif, Times New Roman y Verdana.

133

7. ENCABEZADOS a. Puedes definir títulos y subtítulos dentro de tu documento con una etiqueta muy sencilla HX_/HX(La H es por Headline, “Encabezado” en inglés). b. H1 define el tamaño más grande para los títulos, H6 el más pequeño.

Ejemplo: H2El Maravilloso Traje del Emperador. /H2

8. SEPARADORES a. Los separadores o líneas horizontales, son un elemento de organización y ayudan a que el texto y los gráficos aparezcan mejor ordenados.

No toda la gente usa esta opción ya que prefieren organizar sus contenidos con tablas. b. Para definir un separador, debes usar la etiqueta abierta HR (Horizontal Rule). c. El elemento que aparece tiene un grosor (2 pixeles), alineación centrada y anchura del 100% de la ventana, sin embargo puede ser configurado a tu gusto o necesidad.

134

d. Para ajustar los separadores utiliza los siguientes atributos:

Ejemplo:

135

9. HIPERVÍNCULO (LIGAS) a. Un hipervínculo es un enlace entre documentos (páginas) o sitios; puede ser activado al hacer clic en textos, en imágenes o animaciones. b. El nombre de HTML considera esta característica: Hyper Text Markup Language – Lenguaje de Marcas de Hiper Texto. c. Hay distintas formas de llamar a un hipervínculo ligas, enlaces, vínculos o links en inglés. i. Pero… ¿Qué es una liga? Una liga es activar un enlace entre dos puntos. ii. El efecto es ir a un punto determinado del mismo documento, cambiar de página o activar algún elemento como video o sonido.

Los enlaces, vínculos o ligas, son la parte más importante del HTML. d. La etiqueta general para definir las ligas A_/A e. Cuando se trata de ligas hacia alguna página se usa el parámetro href (referencia a): A href=”URL o dirección o ruta al documento”…/A

136

Ejemplo: A href=” http://www.fansdelplaneta.gob.mx/”Da clic aquí para ir al sitio de Fans del Planeta/A

Si damos clic sobre la frase, el navegador nos llevará a la página Web indicada en el parámetro href, el cual indica la ruta o referencia hacia el punto a enlazar.

Tipos de Hipervínculos a. Vínculos externos. Son enlaces entre distintos sitios y se indican colocando el URL de la página a dónde queremos enviar al usuario.

Los URL, generalmente son expresados de esta manera: href=http://www.fansdelplaneta.gob.mx URL (Universal Ressource Locator o en español, Localizador Universal de Recursos). b. Vínculo local. Un sitio es básicamente un conjunto de páginas ligadas entre sí. Sin embargo los sitios también contienen archivos, sonidos, imágenes, etc.

Los enlaces hechos entre estos elementos y páginas, se les conoce como locales, por ubicarse dentro de la misma agrupación (dentro de una misma computadora o servidor).

137

Los vínculos locales se indican señalando directamente al archivo dentro de la organización del sitio: href=”archivo.html” c. Vínculo a archivos. De la misma forma en la que se puede hacer una liga a una página de HTML, se puede poner como valor del atributo un archivo.

Cuando el navegador trata de leer un archivo que no tiene una extensión reconocida (como .htm, .html ó .jpg), en lugar de desplegar esa información, ésta se baja al disco duro.

Por ejemplo para poner una liga a un documento de Power Point, se hace igual que si fuera una liga a cualquier otra página: A href.=”Presentacion.ppt”Una presentación de Power Point /A d. Anclas o Marcadores. Hemos visto los vínculos o ligas hacia otros documentos, de forma local o externa, sin embargo también existen ligas que apuntan hacia lugares precisos dentro del mismo documento.

A esto se le conoce comúnmente como anclas (anchor), marcadores o apuntadores.

10.

INSERTAR IMÁGENES

Para insertar imágenes utilizamos la etiqueta abierta img seguida del atributo src. a. Colocar el cursos sobre la imagen. b. Dar clic derecho. c. Seleccionar la opción de Guardar imagen como…

138

d. Ponerle un nombre al archivo.

Si lo guardamos en el mismo directorio que el archivo HTML que estamos creando la instrucción para insertar la imagen debe ser: img src=”alce.gif”

Es muy importante tener cuidado con las direcciones de las imágenes. Si las imágenes están en un directorio y el archivo HTML que estamos creando en otro directorio, la dirección de la imagen debe indicar su localización en el otro directorio.

139

Para insertar imágenes animadas se hace el mismo procedimiento.

11.

ATRIBUTOS RELACIONADOS CON INSERTAR IMÁGENES Para ver las imágenes correctamente en los distintos navegadores es necesario definir el largo y alto de la imagen que se inserta. a. Largo y alto: Para definir el largo y el algo de una imagen utilizamos los atributos WIDT y HEIGHT. Por ejemplo: La imagen Triceratops.gif tiene 166 pixeles de largo por 100 pixeles de alto.

Esta información la obtienes al dar clic derecho sobre la imagen en la carpeta donde está guardada y seleccionar Propiedades.

Para la imagen Triceratops.gif la instrucción quedaría: img src=”triceratops.gif” WIDTH=”166”HEIGHT=”100”

 12.PONER UN BOTÓN O PONER UN ENLACE EN UNA IMAGEN Si queremos poner un botón o una imagen que al hacer clic el usuario vaya a otra página, utilizamos la etiqueta para poner enlaces combinada con la etiqueta para insertar imágenes.

140

a href=”dirección del enlace a otra página” img src=”imagen” /a Para poner la imagen del triceratops y que al hacer clic lleve al usuario a información de este animal en la página http://icarito.tercera.cl/especiales/dinosaurios/fichas/trice.htm La instrucción nos quedaría: a href=” http://icarito.tercera.cl/especiales/dinosaurios/fichas/trice.htm” img src=”triceratops.gift” /a Esto nos permite poner botones y flechas que al hacer clic nos llevan a otras páginas de nuestro sitio Web o externas.

ETAPA 4. COMPROBAR QUE LAS PÁGINAS NO TENGAN ERRORES 1. Visualizar tu archivo HTML desde el navegador o explorador de internet que tengas instalado.

2. Si el resultado no es como lo esperas, revisa las etiquetas de tu programa. Corrige los errores, guárdalo y vuelve a visualizarlo.

Posibles errores: a. Las imágenes no aparecen al enviarlo a un servidor de Internet.

141

Este problema puede ser por dos motivos: 1. Se envió el archivo HTML pero no los archivos con las imágenes.

2. Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta a donde realmente está la imagen.

Lo recomendable es mantener la misma estructura de directorios en el disco duro de nuestra computadora y en el servidor de Internet. Al mover los archivos puede ser que la dirección no coincida con la localización de la imagen.

ETAPA 5. ENVIAR LOS ARCHIVOS A UN SERVIDOR Para publicar una página Web debes:

 Tener tu página probada.  Registrar un dominio o nombre único para tu página.  Contratar el alojamiento o hosting.

Una vez terminada y probada la página Web en nuestra computadora, es necesario buscar un medio para que se vea en Internet.

Para esto es necesario registrarlo y ponerle un nombre único o dominio.

Por ejemplo: www.fansdelplaneta.gob.mx Este nombre es la URL que identifica el sitio y está formado por las siguientes partes:

142

Hay diversas empresas dedicadas al registro de dominios. Algunas de ellas incluso ofrecen el registro del dominio gratis si alojas tu sitio web con ellos.

Cuando la registras, debes hospedarla. Esto consiste en poner tu pรกgina en un servidor o computadora especial que se encargarรก de almacenarlo y manejarlo. Desde este lugar tu pรกgina serรก descargada por los visitantes que la quieren ver.

143

PRINCIPALES ETIQUETAS HTML En la tabla siguiente se enlistan algunas etiquetas y su funci贸n:

144

145