• Author / Uploaded
• idahozgg25

• Categories
• Hojas de estilo en cascada
• Mp3
• HTML
• Software libre
• Archivo de computadora

Citation preview

---

0 0 0 1 0 1 1 1 0 1 0 0 0 0 0 0 1 0 1 1 1 0 1 0 0 0

0 1 0 1 1 0 0 1 0 1 0 1 0 0 1 0 1 1 0 0 1 0 1 0 1 0

0 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0

1 0 0 1 1 0 1 0 0 1 1 0 0 1 0 0 1 1 0 1 0 0 1 1 0 0

1 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0

Habilidades

1 0 0 0 1 0 0 0 0 1 1 1 1

Me integro y comunico

1 1 1 1 1 1 1 1 0 1 0

digitales

0 0 1 0 1 1 1 1 0 1 1 0 1 0 0 1 0 1 1 1 1 0 1 1 0

0 0 0 1 1 1 1 1 0 0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 0 0

0 1 1 0 0 1 1 1 1 1 0 1 1 0 1 1 0 0 1 1 1 1 1 0 1 1

0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 1 0

0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 1

0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1

1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1

1 0 0 1 1 0 1 0 0 1 1 0 0

1 0 1 1 0 1 1 0 1 0 1 0 0

3

Mi desarrollo profesional

5 Bloque

/// PROYECTO /// ››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? Este proyecto lo desarrollarán en equipo y cada uno elegirá alguno de los siguientes temas: carreras del futuro, cuya finalidad es dar a conocer las nuevas opciones en el futuro profesional, o reciclaje tecnológico, cuyo objetivo es presentar y aplicar las medidas para el manejo de residuos tecnológicos. El proyecto consistirá en la investigación y el desarrollo de los temas. Al final, elaborarán un pequeño sitio web utilizando HTML con toda la información recopilada, para compartirla con su profesor y sus compañeros.

En este bloque desarrollarás las siguientes habilidades digitales. ››› Usarán un software de tipo libre y con código abierto. ››› Grabarán clips de sonido. ››› Harán edición de sonido, como recorte, reajuste, acomodo y mezcla de clips, además de limpieza del audio terminado y la exportación a archivos de audio conocidos. ››› Conocerán la compresión de archivos de audio. ››› Conocerán más elementos para hacer páginas de Internet con HTML. ››› Elaborarán un pequeño sitio web.

Lección

1 Audacity, descarga e instalación Audacity® es una aplicación informática libre multiplataforma, desarrollada por un grupo de voluntarios, que se usa para grabación y edición de audio. Además de su uso, también brinda la oportunidad de estudiar cómo funciona, hacer mejoras y compartirlas con otros. Al utilizarlo estás convirtiéndote en un colaborador activo del proyecto Audacity, ya que puedes reportar cualquier bug (error en el programa) para su pronta reparación. Es el editor de audio más difundido en los sistemas GNU/Linux.

1. Reúnete con un compañero y con ayuda de un buscador lleven a cabo la siguiente búsqueda.

a) Seleccionen el primer resultado, que corresponderá a la dirección http://audacity.sourceforge. net/. Éste es el sitio del software libre y de código abierto que utilizarán en las siguientes lecciones. Diríjanse a la zona de descargas y elijan la versión 1.3 para Windows y después den clic en Descargar para obtener el programa.

b) ¿Qué características consideras que definen a un programa libre y de código abierto?   2. Hagan la descarga del codificador LAME (por sus siglas en inglés LAME Ain’t an Mp3 Encoder). Elijan la versión For Audacity on Windows y guárdenlo en su equipo, posteriormente lo necesitarán.

LAME es un codificador de MPEG Audio Layer III (MP3) que puede ser usado con la mayoría de programas que convierten archivos wav en archivos mp3. Por una cuestión de patentes Audacity no puede ser distribuido con un software de codificación de mp3. Por ello, es necesario utilizar el codificador gratuito LAME para exportar archivos mp3.

116

3. Efectúen la instalación de Audacity; su instalación no es muy diferente de las que han hecho hasta ahora. Al final, ejecuten el programa seleccionando la opción Launch Audacity y presionen Finalizar.

4. Hagan la instalación de LAME. Es muy importante no modificar la carpeta de instalación sugerida C:\Archivos de programa\Lame for Audacity, ya que posteriormente será necesario saber dónde se encuentra instalado. El codificador MP3 se halla dentro de dicha carpeta.

5. Coloquen el cursor arriba de cada elemento señalado en la imagen, observen la etiqueta que aparece y completen la información que se pide.

a

b

e

f

g

c

d

h

a)



b)

c)



d

e)



f)

g)



h) 117

/// PRoYeCTo /// Antecedentes

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él?

Entra a www.habilidadesdigitales-sm.com.mx Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 1.

De acuerdo con el proyecto elegido, lleven a cabo lo siguiente. Carreras del futuro a) Exploren en Internet y busquen información relacionada con nuevas carreras o profesiones del futuro (creadas a partir de 5 años a la fecha). b) Elaboren una lista de por lo menos 10 profesiones y escriban en su cuaderno una breve descripción de cada una.

118

Reciclaje tecnológico a) Busquen en Internet el concepto “reciclaje tecnológico”, consulten al menos tres sitios y, con base en su información, escriban una defi nición en su cuaderno. b) Enlisten en su cuaderno los objetos que se consideran desechos tecnológicos.

/// BITÁCoRA /// CIeRRe De leCCIÓN Escribe en tu cuaderno lo que has aprendido en esta lección. PARA lA SeMANA 1. Con ayuda del sitio Free Software Foundation www.e-sm.com.mx/ hdsm3-118 responde las siguientes preguntas. a) ¿Qué es el software libre? b) ¿De qué manera se sustenta el desarrollo de software libre? c) ¿Qué es la licencia copyleft? 2. Windows 7 cuenta con un programa de grabación de audio. Escribe en tu cuaderno la ruta para acceder a él. 3. Consigue un micrófono, conéctalo a tu computadora y revisa que funcione correctamente. 4. Inicia Word y transcribe tus apuntes y las respuestas de esta lección. Guarda tu documento con el número de bloque, número de la lección, tu nombre de usuario y la fecha.

Lección

2 Audacity, uso y manejo El procesamiento de audio es la alteración intencional de señales auditivas o del sonido. Las señales de sonido pueden ser electrónicamente representadas de manera analógica, como en las cintas magnéticas, o de modo digital, como en los CD. El proceso mediante el cual se modifican, mezclan, limpian, reajustan o combinan elementos auditivos se conoce como Edición de sonido.

1. Reúnete con un compañero y creen en el Escritorio una carpeta llamada EdiciónSonido. a) Descarguen el paquete PaqueteAudios.zip del CD Habilidades Digitales SM 3 y descomprímanlo en la carpeta EdiciónSonido. b) Ejecuten Audacity, abran el archivo 321.mp3. Observen la siguiente imagen e identifiquen los elementos principales en pantalla

Control de audio y herramientas de edición

Vista del proyecto

Herramientas de selección

De igual manera que en el programa de edición de video Windows Live Movie Maker, Audacity utiliza recursos y guarda sus archivos como proyectos que usan los recursos sin modificarlos. El audio producido debe exportarse y será un archivo independiente de los recursos.

c) Presionen el botón Reproducir y observen qué sucede en pantalla. Escriban a continuación su interpretación de la gráfica en color azul en la Vista de proyecto.       119

d) Existe alguna relación entre la gráfica y el medido de nivel de salida. Explícala.   sirve para cambiar la velocidad con la e) La herramienta Reproducir a velocidad que se recorre la grabación. Cambien la velocidad utilizando el botón deslizable, presionen el botón Reproducir a velocidad y escriban lo que sucede en cada uno de los siguientes casos. Velocidad

Cambio en el audio

0.5 1.0 2.0

Todos los sonidos que escuchamos son ondas de presión en el aire. Thomas Edison demostró que era posible capturarlas dentro de un medio físico para después reproducirlas generando las mismas ondas de presión. Las ondas de presión o formas de onda se representan así.

2. Explora las herramientas de zoom , escribe el nombre de cada herramienta y de qué manera afecta a la Vista del proyecto.

a) Dentro de la Vista de proyecto se encuentran las pistas; en la pantalla de la imagen se observa una sola pista, llamada 321. Puede agregarse más de una pista en un proyecto de Audacity. En el menú Pista elijan la opción Añadir nueva>Pista de audio. ¿Para qué suponen que sea útil tener más de una pista de audio?      120

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? Carreras del futuro a) Busquen instituciones nacionales e internacionales que impartan esas profesiones. Anoten en su cuaderno tanto el nombre de la profesión como el de las instituciones en cuestión; por ejemplo: Universidad Nacional Autónoma de México (UNAM) • Ciencias genómicas • Ingeniería geomática • Manejo sustentable de zonas costeras Reciclaje tecnológico a) Averigüen en Internet el nombre de tres instituciones o asociaciones que promuevan el reciclaje tecnológico. Escriban en el cuaderno el nombre de la institución y su página electrónica, sus objetivos principales y el país de referencia. b) Hagan un compendio de 10 estrategias para reciclar de acuerdo con la información de las páginas consultadas.

/// BITÁCoRA /// CIeRRe De leCCIÓN Escribe en tu cuaderno lo que has aprendido en la lección; agrega lo que consideres necesario para sustentar lo aprendido. Guarda tu proyecto como miProyectoAudio.aup. Lee la advertencia que indica que para crear un archivo de audio deberás exportar después de guardar tu proyecto. De momento no sigas ese paso. PARA lA SeMANA 1. Conecta el micrófono a tu equipo y verifi ca su correcto funcionamiento. a) Si aún no has instalado Audacity, hazlo siguiendo las instrucciones de la lección 1. b) Ejecuta Audacity, coloca tu micrófono frente a ti y haz lo siguiente. • Presiona el botón Grabar y di: “Ésta es la primera parte de la pista uno”, presiona el botón Pausa al terminar y observa qué sucede en la Vista de proyecto. • Presiona de nuevo Pausa para continuar la grabación y di: “Ésta es la segunda parte de la pista uno”, presiona Detener. • Una vez más presiona Grabar y di: “Ésta es la segunda pista”, al terminar presiona Detener. ¿Qué sucedió? ¿Qué diferencias notaste entre las acciones grabar-pausa-grabar y grabar-detenergrabar? Anótalo en tu cuaderno c) Guarda tu proyecto como MisPistas.aup.

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 2.

/// PRoYeCTo /// Planeación

121

Lección

3 Audacity, edición de sonido 1

Un micrófono está constituido por una pequeña membrana que vibra de manera libre sobre un mecanismo que convierte el movimiento vibratorio en señales eléctricas. Las ondas acústicas son traducidas a ondas eléctricas. Típicamente, a altas presiones en el aire (volumen alto) le corresponden altos voltajes. Cuando se reproduce el sonido, el reproductor procede a la inversa, esto es, los impulsos eléctricos de la forma de onda hacen vibrar las bocinas, equipadas con un electromagneto.

1. En las grabaciones de video, es común el uso de claquetas, que básicamente sirven para sincronizar ambas tomas, las visuales con las sonoras, a la hora de editar. Cuando se hace una grabación de audio se utilizan métodos similares. ¿Cómo te imaginas estos métodos?   2. Cuando abres un archivo de sonido en Audacity, además de escuchar, puedes observar la forma de onda que representa el audio. Fíjate en la siguiente imagen, ¿puedes saber qué se escucha en el audio con sólo verla?

a) Es poco probable que sepas cómo es el sonido representado por la gráfica anterior. El sonido de dicha gráfica es la frase “tres, dos, uno…” en voz de una mujer de 29 años. Ahora ve la siguiente imagen que representa la misma frase, pero en voz de un hombre de 30 años. Si comparas las dos gráficas, ¿qué similitudes y diferencias observas?

    3. Conecten su micrófono y sus audífonos a la computadora. Verifiquen su funcionamiento. Cuando grabas una narración es de gran ayuda utilizar una frase que servirá de patrón visual a la hora de hacer la edición; empieza siempre diciéndola. En caso de equivocarte, no grabes todo desde el inicio, repite la frase, pero sólo el párrafo en que te hayas equivocado. Como ejemplo, puedes abrir el archivo Patron.mp3.

122

4. Reúnete con tu equipo y ejecuten Audacity. Abran el archivo 321.mp3 contenido en la carpeta EdiciónSonido, creada en la lección anterior. Reproduzcan el sonido y comprueben que la gráfica de la actividad 2 corresponda a este sonido. a) Dentro de Audacity, presionen el botón Grabar y repitan la frase “tres, dos, uno…”; al terminar, presionen Detener . Reproduzcan el audio; en caso de tener un nivel de volumen bajo, revisen e incrementen el nivel de entrada y vuelvan a grabar hasta escuchar su voz a un volumen razonable. ¿Cuántas pistas hay después de las grabaciones? b) Muevan la grabación en la pista de tal forma que las voces se escuchen al unísono, es decir, la voz de la locutora al decir “tres” debe coincidir con su voz; para ello, utilicen la herramienta desplazamiento en el tiempo y arrastren el contenido del clip hacia la posición deseada.

5. Eliminen las pistas que no sean de utilidad presionando el botón con forma de tache, en la parte superior izquierda de la pista. a) Exploren en las pistas restantes cada botón, reproduzcan el sonido y escriban para qué sirve cada uno de ellos. Recuerden que para deshacer los cambios pueden presionar Ctrl + Z. Botón

Función

123

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 3.

/// PRoYeCTo /// Desarrollo

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? Para esta fase del proyecto hagan lo siguiente, aplicable en ambos temas. a) Busquen imágenes para ilustrar sus investigaciones de acuerdo con el tema que eligieron. b) Defi nan los objetivos generales del proyecto. c) Refl exionen en equipo y redacten en su cuaderno un texto acerca de la importancia del tema.

/// BITÁCoRA /// CIeRRe De leCCIÓN Guarda tu proyecto como miGrabacion.aup y escribe en tu cuaderno lo que has aprendido en la lección. Destaca lo que consideres más interesante. PARA lA SeMANA 1. Haz lo siguiente en casa. a) Conecta el micrófono a tu equipo y verifi ca su correcto funcionamiento. b) Si aún no has instalado Audacity, hazlo según las instrucciones de la lección 1. c) Ejecuta Audacity, coloca tu micrófono frente a ti y graba las siguientes frases célebres en un proyecto diferente. 2. Utiliza algún patrón al iniciar la grabación y recuerda que, si te equivocas, puedes repetir la frase y empezar de nuevo. Guarda los archivos con un nombre que haga referencia al autor de la frase. “La poesía es un misterio porque recrea el mundo; no tiene límites para el asombro. Cada lector encontrará signifi cados o sentidos distintos en la conjunción de las palabras que forman una línea, un verso o un fragmento.” Rodolfo Fonseca

“Cuando las leyes de la matemática se refi eren a la realidad, no son ciertas; cuando son ciertas, no se refi eren a la realidad.” Albert Einstein

“No hay nada repartido de modo más equitativo que la razón: todo el mundo está convencido de tener sufi ciente.” René Descartes

124

Lección

4 Audacity, edición de sonido 2 Para reproducir el archivo editado es necesario exportar nuestro proyecto a un formato de audio. Exportar es el proceso básico de convertir tus archivos fuentes del proyecto o recursos en el formato de audio deseado, generando un archivo nuevo; así los recursos no se ven afectados. El proceso de exportar no es privativo de programas de edición de audio, también lo encontramos en la edición de video y en la programación.

1. Reúnete con un compañero y ejecuten Audacity. a) Abran el archivo Inicio.mp3, contenido dentro de la carpeta EdiciónSonido. Reprodúzcanlo y escriban lo que escuchan.   b) Usen la herramienta de Selección para seleccionar el patrón “tres, dos, uno…” y posteriormente elimínenlo con la tecla Supr.

c) Comprueben que su proyecto sólo contiene el audio “Receta para hacer arroz con leche” y guárdenlo como MiRecetaCocina.aup. d) Dentro del menú Archivo elijan la opción Importar > Audio… y seleccionen el archivo Ingredientes.mp3, dentro de la misma carpeta. Reproduzcan el sonido. ¿Qué sucede? ¿Cuántas pistas hay en el proyecto y cuál es el nombre de cada una?    e) Con la herramienta Desplazamiento , muevan la pista Ingredientes, de tal modo que obtengan el mismo resultado que la imagen.

125

f) Repitan los incisos d y e con los archivos PasoUno.mp3 a PasoCinco.mp3, de tal forma que obtengan lo que se muestra en la imagen. Guarden su proyecto constantemente.

g) En las pistas PasoUno a PasoSeis, eliminen las frases correspondientes a los pasos. Reconozcan algún patrón visual para eliminar las frases de manera sencilla. ¿Cómo lo hicieron?   

Un proyecto de Audacity no es el producto final o el archivo de salida del programa. Es más bien un borrador de trabajo en que se han hecho todos los cambios en la colección de archivos de sonido que se ha importado y usado en la creación de un archivo final.

2. En cada una de las pistas de la siguiente imagen dibujen un rectángulo alrededor del patrón que se eliminará.

3. Exporten su proyecto a un archivo con formato mp3. Para hacerlo, vayan al menú Archivo>Exportar. Guárdenlo con el nombre RecetaArrozLeche de tipo mp3. Aparecerá una ventana de Metadatos; escriban su nombre en el campo Artista y presionen Aceptar. Esperen que concluya el proceso de Exportación y escuchen su archivo terminado. 126

/// PROYECTO /// Planeación

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? a) Elaboren una carpeta con el nombre miSitioWeb y dentro de ella creen una subcarpeta con el nombre imgs. b) Muevan todas las imágenes recopiladas dentro de imgs. c) Investiguen qué son los metadatos.

CIERRE DE LECCIÓN Guarda tu proyecto y llévate una copia a casa; recuerda incluir todos los audios. Escribe en tu cuaderno lo más interesante que hayas aprendido en la lección. PARA LA SEMANA 1. Haz lo siguiente en casa. a) Ejecuta Audacity. b) Abre el proyecto que utilizaste en clase. c) Busca sonidos gratuitos en Internet, con ayuda de Google o Bing, específicamente aquellos que se puedan generar en la cocina. Prueba con algo parecido a “Kitchen Free Sounds”. d) Descarga los sonidos que se producirían durante la elaboración del arroz con leche que la locutora narró en su receta; por ejemplo, agua corriente, agua en ebullición, fuego en la estufa, etcétera. e) Guarda los sonidos que descargaste en la misma carpeta del proyecto y haz lo siguiente. • Renombra el proyecto, usa RecetaConSonidos.aup. • Importa todos los sonidos necesarios. • Mueve las pistas de tal modo que el sonido aparezca cuando la locutora haga referencia al mismo. • Elimina, si es necesario, parte de los sonidos para ajustar el tiempo. • Guarda el proyecto y expórtalo en formato WAV; elige el nombre. f) Busca el archivo RecetaConEfectos.mp3 en el CD. Escúchalo y compáralo con el tuyo, ¿qué diferencias encuentras? Escribe en el cuaderno tus conclusiones.

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 4.

/// BITÁCORA ///

127

Lección

5 HTML, CSS HTML te permite describir la estructura del contenido en tus archivos. Cuando abres una página HTML en un explorador, éste utiliza un estilo predeterminado para presentar la estructura. Las hojas de estilo en cascada o CSS, por sus siglas en inglés, son un lenguaje para describir cómo se debe presentar el contenido de las páginas. El propósito principal del desarrollo de CSS fue separar la estructura y la presentación de los documentos.

1. Escribe en las líneas anaranjadas la información que falta, guíate por la imagen de la derecha. Dibuja un círculo alrededor de lo que desconozcas.

___________________________

_______________________ Etiqueta style

La etiqueta style requiere un atributo, llamado __________ , el cual le dice al explorador el tipo de estilo que está usando.

En este caso, por ser CSS, es necesario especificar que es de tipo "text/css"

a) Abre el Bloc de notas y escribe el texto anterior completo; guárdalo con el nombre estilos.html utilizando la codificación UTF-8. Posteriormente ábrelo y observa si se ve igual que la imagen anterior. b) Observa el texto siguiente y agrega al archivo la información que aparece en color anaranjado. Guarda la página y recárgala en el explorador, ¿qué observas?

body { background-color: #F9DF91; margin-left: 20%; margin-right: 20%; border: 1px dotted gray; font-family: sans-serif;

La sintaxis de CSS es diferente a HTML: primero se define el elemento HTML al que se quiere aplicar un estilo y entre “llaves” se escriben todas las propiedades, seguidas de dos puntos, el valor y se finaliza con un punto y coma.

128

2. Reúnete con un compañero para completar la información en la siguiente imagen.

margin-right ______________ margin-left ____________ border ____ dotted ____

_____________

background-color ______________

3. Los elementos en HTML tienen una relación anidada; es decir, algunos elementos contienen otros. Se puede representar dicha relación con un diagrama de árbol. Observa el correspondiente al archivo estilos.html html head title

body style

h1

h2

p strong

em

br

a) El diagrama anterior ayuda a entender por qué todos los elementos de cambian al aplicarle estilos; el término cascada en CSS se refiere precisamente a ello. Según esta lógica, agrega el texto en color anaranjado a la etiqueta en el archivo estilos.html, guárdalo y recárgalo en el explorador. ¿Qué cambios ocurrieron y por qué? p { color:#7D0000; font-family:Verdana, Geneva, sans-serif; }

    129

/// PROYECTO /// Desarrollo

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? a) Abran el Bloc de notas y transcriban toda la información obtenida hasta este momento. No se preocupen por el formato. b) Guarden su documento con el nombre miProyectoCarrera.txt o miProyectoReciclaje.txt, dependiendo del tema seleccionado, en una carpeta llamada Misitioweb.

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 5.

/// BITÁCORA /// CIERRE DE LECCIÓN Resume la lección en tu cuaderno. Destaca lo más interesante y justifica tu punto de vista. PARA LA SEMANA 1. Investiga en Internet qué propiedades se pueden cambiar con CSS. 2. En tu archivo estilos.html modifi ca, por medio de CSS, los elementos H1 y H2. a) Cambia el color del texto de todo el archivo estilos.html y guárdalo con el nombre estilosv1.html b) Resuelve el crucigrama. Horizontales 2. Este diagrama permite representar la relación anidada entre elementos HTML. 4. Un explorador utiliza un _____ predeterminado para presentar esta estructura de la página web. 5. Siglas en inglés de “hojas de estilo en cascada”. 6. Permite describir la estructura del contenido de las páginas web. 7. CSS otorga la ___________ a tus páginas web. 8. Tipo de relación que guardan los elementos HTML. Verticales 1. Características de los elementos HTML. 3. Está compuesto de Etiqueta inicialContenido afectado por las etiquetasEtiqueta final. 4. El principal propósito de CSS es separar la presentación de la ___________.

130

Lección

6 CSS, importar estilos El uso de hojas de estilo externas es, sin duda, el mejor método para desarrollar un sitio web cuando se tiene más de una página. Cada página llamará y aplicará la hoja de estilo, con lo cual los estilos serán consistentes en todas las páginas del sitio web. Cuando se requiera cambiar el estilo del sitio, basta con hacer el cambio una vez en la hoja de estilo para que todo el sitio cambie.

1. Reúnete con un compañero y creen una carpeta en su directorio de usuario, nómbrenla SitioConEstilo. Dentro de ella agreguen dos carpetas más: imgs y estilo. La estructura debe quedar como en la imagen.

SitioConEstilo

a) Copien en la carpeta SitioConEstilo todas las páginas que elaboraron hasta la lección 5; también las del bloque 4. b) Copien en la carpeta imgs algunas imágenes; si es necesario, descarguen otras. Para recordar algo o simplemente para guardar orden, es recomendable hacer anotaciones en el código. Éstas se denominan comentarios y se pueden utilizar tanto en HTML como CSS. En HTML la sintaxis consiste simplemente en colocar el comentario dentro de la etiqueta . En CSS, el procedimiento es similar: sólo se asienta el comentario dentro de /* */.

Imgs

estilo

c) Con ayuda del Bloc de notas escriban lo siguiente y guárdenlo con el nombre miEstilo.css dentro de la carpeta estilo. @charset “utf-8”; body { background-color: #bcd4ef; font: 70%/1.5em Verdana, Tahoma, arial, sans-serif; color: #666666; text-align: center; margin: 15px 0; } /* Vínculos */ a, a:visited { color: #5A93C9; background: inherit; text-decoration: none; } a:hover { color: #4393d9; background: inherit; text-decoration: underline; } /* Encabezados */ h1, h2, h3 { font-family: ‘Trebuchet MS’, Tahoma, Sans-serif; font-weight: Bold; } h1 { font-size: 190%; font-weight: normal; color: #555; text-transform:uppercase; text-decoration:underline; } h2 { font-size: 130%; text-transform: uppercase; color: #88ac0b; }

131

2. Creen un archivo llamado index.html y guárdenlo dentro de SitioConEstilo. El documento de HTML deberá incluir la referencia a las páginas contenidas en la misma carpeta; para esto hagan una lista no ordenada usando la etiqueta

. Cada elemento de la lista deberá ser un hipervínculo a la página que le corresponde, de tal modo que se cumpla lo mostrado en la imagen.

SitioConEstilo

Imgs

Img Img Img

estilo miEstilo.csc index.html pagina1.html

pagina2.html pagina3.html

a) Agreguen a todos los archivos HTML el texto siguiente en color anaranjado. Debe quedar dentro de la etiqueta . Dicho texto es la manera de importar el archivo CSS. Eliminen la etiquetas y su contenido, serán reemplazadas por los estilos contenidos en miEstilo.css.

Usando estilos

b) Abran en el explorador el archivo index.html y verifiquen cada vínculo. c) Abran el archivo miEstilo.css. Agreguen donde corresponda el texto en color anaranjado. Guarden y abran de nuevo index.html. Exploren las páginas, ¿qué cambios hubo y en cuántas páginas los vieron? ¿Cuántos archivos modificaron? h1 { font-size: 190%; font-weight: normal; color: #555; text-transform:uppercase; text-decoration:underline; }

132

››› ¿Cómo utilizo las Tecnologías de la Información y la Comunicación (TIC) para cuidar mi entorno y desarrollarme en él? a) Abran el Bloc de notas para editar el archivo miProyectoCarrera.txt o miProyectoReciclaje.txt, según el tema seleccionado en la carpeta Misitioweb. b) Abran con Internet Explorer los documentos de HTML que vienen en el CD. Es posible que muestren símbolos en lugar de vocales acentuadas. Para solucionar esto, abran todos los archivos en el Bloc de notas y vuélvanlos a guardar con UTF-8.

/// BITÁCORA /// CIERRE DE LECCIÓN Resume la lección en tu cuaderno. Destaca lo más interesante y justifica tu punto de vista. PARA LA SEMANA 1. Investiga a qué se refi eren los términos ruta relativa y ruta absoluta. Plantea ejemplos de su utilización y ejemplifícalos con lo hecho en clase. 2. Cambia el color del texto de todas sus páginas web mediante del archivo miEstilo.css, de tal modo que se cumpla lo siguiente. • Rojo para los títulos de nivel 1 (H1) • Azul para los títulos de nivel 2 (H2) • Negro para el resto del texto

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la lección 6.

/// PROYECTO /// Planeación

3. Investiga qué es el código de color hexadecimal y responde en tu cuaderno. a) ¿En cuántos colores está basado este código y cuáles son? b) ¿Qué color representa el código #FFF? ¿Cuál, el #FFFFFF? Explica por qué.

133

CIERRE DE PROYECTO ¿Cómo utilizo las TIC para cuidar mi entorno y desarrollarme en él?

/// INTEGREN EL PROYECTO ///

134

0 1 0 0 1 0 1 1 1 1 1 1 0 0 1 0 0 1 0 0 1 0 1 0 1 0 1 0 1 0 1

1 0 1 1 1 1 0 0 1 1 0 1 0 1 0 1 1 1 1 0 0 1 1 0 1 0 0 1 0 1 0 1 0 1 0

0 1 1 0 0 1 1 1 1 1 0 1 1 0 1 1 0 0 1 1 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0

0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 1 0 1

0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 1 0 1 0

1 1 1 1 1 1 1 1 1 1 1 0 1

0 0 0 1 0 0 1 1 0 1 0 0 0

0 1 0 0 1 0 1 1 1 1 1 1 0 0 1 0 0 1 0 1 1 1 1 1 1 0

0 0 0 1 1 1 1 1 0 0 0 0 0

0 0 1 0 1 1 1 1 0 1 1 0 1

0 0 0 1 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0

1 0 0 1 1 0 1 0 0 1 1 0 0 1 0 0 1 1 0 1 0 0 1 1 0 0 0 1 0 1 0 1 0 1 0 1 0 1 0 0

1 0 0 0 1 0 0 0 0 0 1 0 0 1 0 0 0 1 0 0 0 0 0 1 0 0 0 1 0 1 0 1 0 1 0 1 0 1 0

1 0 0 0 1 0 0 0 0 1 1 1 1 1 0 0 0 1 0 0 0 0 1 1 1 1 1 0 0 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1

0 0 1 0 1 0 1 0 0 1 0 1 0 1 0 0 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0

1. Diseñen, desarrollen y verifi quen el sitio web. »» Dibujen en su cuaderno el esquema general del sitio web que crearán. Guíense por la información de su archivo de texto (miProyectoCarrera.txt o miProyectoReciclaje.txt). »» De acuerdo con la información, dividan en temas y subtemas el texto del archivo (miProyectoCarrera.txt o miProyectoReciclaje.txt). »» Creen tantos archivos de texto como temas resultaron en el paso anterior y copien en ellos la información correspondiente. »» Verifi quen que la carpeta Misitioweb contenga la carpeta imgs; si no es así, créenla. Agreguen una carpeta llamada estilo, con la fi nalidad de tener una estructura parecida a la usada en las actividades de la lección 6. »» Marquen con HTML el contenido de cada archivo de texto. Al terminar, guárdenlos como tipo HTML. »» Reemplacen las referencias de imágenes y direcciones electrónicas por la etiqueta y respectivamente. Agreguen los atributos y valores correspondientes. »» En la carpeta estilo, creen un archivo de texto. Escriban dentro el código CSS que deseen aplicar a sus páginas web. Recuerden guardarlo como tipo CSS. »» Creen un archivo index.html, que servirá de página de presentación y contendrá el índice de las páginas con vínculos a ellas. Escriban el título del proyecto, el nombre de los integrantes, el grupo y la fecha. »» Una vez creado el CSS, impórtenlo a cada página, incluyendo index.html. »» Abran el archivo index.html y revisen que estén los datos de presentación, el índice del contenido con el nombre de las páginas y sus vínculos (cerciórense de que éstos funcionen), y que se apliquen los estilos defi nidos en el CSS.

/// DIVULGUEN SUS CONOCIMIENTOS, REFLEXIONES, EXPERIENCIAS Y CONCLUSIONES /// 2. Presenten su página web a sus compañeros. Analicen las creadas por los demás equipos y comenten qué benefi cios le aportó a cada uno. Al fi nal, comenten qué aprendieron durante el bimestre.

bloque

5

/// AUTOEVALUACIÓN /// 3. Evalúa tu desempeño y el de tus compañeros. Marca con una ✔ la casilla que refleje tus logros durante este bloque. Al final comenta los resultados con tu profesor para reforzar las áreas en que debes mejorar.

Actitudes y valores

Actividades

En todos los casos

Casi Algunas siempre veces

En ningún caso

¿Completaste en cada lección las actividades y el proyecto que te solicitaron? ¿Trabajaste de manera cooperativa en los proyectos? ¿Respetaste las opiniones de tus compañeros? ¿Trabajaste de manera ordenada en tus actividades? ¿Utilizaste alguna TIC para tus actividades? ¿Entendiste cómo se representa el sonido de manera gráfica?

Habilidades

¿Utilizaste el micrófono? ¿Generaste algún audio con efectos especiales? ¿Comprendiste cómo cortar y desplazar audios en la línea del tiempo? ¿Entendiste la diferencia entre estructura y presentación? ¿Mejoraste la presentación de tus páginas? ¿Importaste archivos CSS a los HTML? Desempeño en el proyecto

¿Desarrollaste una planeación para la elaboración del proyecto? ¿Revisaste el trabajo junto con tus compañeros de equipo? ¿Utilizaste imágenes relacionadas con el proyecto? ¿Utilizaste hojas de estilo para mejorar la presentación de tu proyecto? ¿Editaste archivos de audio? ¿Entregaste tus actividades en el tiempo establecido previamente?

»» Analiza esta autoevaluación y señala con marcatextos en qué áreas debes mejorar para tus proyectos siguientes. Coméntalo con tu profesor. »» Revisa las autoevaluaciones de todo el año y determina qué avances tuviste en tu trabajo. 135

evaluación /// AUDACITY /// 1. Explica con tus palabras qué es la edición de sonido.   2. ¿Por qué es necesario instalar un codificador MP3 externo a Audacity?    3. ¿Para qué sirve utilizar un patrón cuando grabas y editas sonidos?   4. ¿Cuál es la diferencia entre guardar un proyecto y exportarlo a un formato de audio?    5. Imagina que sabes tocar tres instrumentos musicales y que tienes buena voz para cantar. Te gusta mucho una canción y quieres grabarla con los tres instrumentos, además de un coro, pero tus amigos no pueden ayudarte, pues no son tan buenos como tú en la música. ¿Cómo grabarías la canción con ayuda de Audacity?   

/// HTML y CSS /// 6. ¿Cuáles son las ventajas de utilizar hojas de estilo en cascada?   136

bloque

5 1

7. ¿A qué se refiere darle estructura a tus páginas y con qué lo haces?   8. Encuentra los errores en el siguiente código. Escribe al lado de cada línea las correcciones.

Indice

Índice de páginas
• Página 1
Página 2
• Página 3
• Página 4




La etiqueta style requiere un atributo, llamado type, el cual le dice al explorador el tipo de estilo que está usando.
En este caso, por ser CSS, es necesario especificar que es de tipo "text/css"



9. Haz el diagrama de árbol del código anterior.

137