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

Mi desarrollo
profesional

5
Bloque

/// PROYECTO ///

Cmo utilizo las Tecnologas de la
Informacin y la Comunicacin (TIC) para
cuidar mi entorno y desarrollarme en l?
Este proyecto lo desarrollarn 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 tecnolgico, cuyo objetivo es
presentar y aplicar las medidas para el manejo de residuos tecnolgicos.
El proyecto consistir en la investigacin y el desarrollo de los temas. Al final,
elaborarn un pequeo sitio web utilizando HTML con toda la informacin
recopilada, para compartirla con su profesor y sus compaeros.

En este bloque desarrollars las siguientes habilidades digitales.

Usarn un software de tipo libre y con cdigo abierto.
Grabarn clips de sonido.
Harn edicin de sonido, como recorte, reajuste, acomodo y mezcla de clips,
adems de limpieza del audio terminado y la exportacin a archivos de audio
conocidos.
Conocern la compresin de archivos de audio.
Conocern ms elementos para hacer pginas de Internet con HTML.
Elaborarn un pequeo sitio web.

Leccin

1 Audacity, descarga e instalacin

Audacity es una aplicacin informtica libre multiplataforma, desarrollada por un
grupo de voluntarios, que se usa para grabacin y edicin de audio. Adems de
su uso, tambin brinda la oportunidad de estudiar cmo funciona, hacer mejoras y
compartirlas con otros. Al utilizarlo ests convirtindote en un colaborador activo del
proyecto Audacity, ya que puedes reportar cualquier bug (error en el programa) para su
pronta reparacin. Es el editor de audio ms difundido en los sistemas GNU/Linux.

1. Renete con un compaero y con ayuda de un buscador lleven a cabo la siguiente bsqueda.

a) Seleccionen el primer resultado, que corresponder a la direccin http://audacity.sourceforge.

net/. ste es el sitio del software libre y de cdigo abierto que utilizarn en las siguientes lecciones. Dirjanse a la zona de descargas y elijan la versin 1.3 para Windows y despus den clic en
Descargar para obtener el programa.

b) Qu caractersticas consideras que definen a un programa libre y de cdigo abierto?



2. Hagan la descarga del codificador LAME (por sus siglas en ingls LAME Aint an Mp3 Encoder). Elijan la versin For Audacity on Windows y gurdenlo en su equipo, posteriormente
lo necesitarn.

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

116

3. Efecten la instalacin de Audacity; su instalacin no es muy diferente de las que han

hecho hasta ahora. Al final, ejecuten el programa seleccionando la opcin Launch Audacity
y presionen Finalizar.

4. Hagan la instalacin de LAME. Es muy importante no modificar la carpeta de instalacin

sugerida C:\Archivos de programa\Lame for Audacity, ya que posteriormente ser
necesario saber dnde se encuentra instalado. El codificador MP3 se halla dentro de dicha
carpeta.

5. Coloquen el cursor arriba de cada elemento sealado en la imagen, observen la etiqueta

que aparece y completen la informacin que se pide.

a)

b)

c)

e)

f)

g)

h)
117

/// PRoYeCTo ///

Antecedentes

Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (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 leccin 1.

De acuerdo con el proyecto elegido, lleven a cabo lo siguiente.

Carreras del futuro
a) Exploren en Internet y busquen informacin relacionada con nuevas carreras
o profesiones del futuro (creadas a partir de 5 aos a la fecha).
b) Elaboren una lista de por lo menos 10 profesiones y escriban en su cuaderno
una breve descripcin de cada una.

118

Reciclaje tecnolgico
a) Busquen en Internet el concepto reciclaje tecnolgico, consulten
al menos tres sitios y, con base en su informacin, escriban una defi nicin
en su cuaderno.
b) Enlisten en su cuaderno los objetos que se consideran desechos tecnolgicos.

/// BITCoRA ///

CIeRRe De leCCIN
Escribe en tu cuaderno lo que has aprendido en esta leccin.
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 grabacin de audio. Escribe en tu
cuaderno la ruta para acceder a l.
3. Consigue un micrfono, conctalo
a tu computadora y revisa que funcione correctamente.
4. Inicia Word y transcribe tus apuntes y las respuestas de esta leccin.
Guarda tu documento con el nmero
de bloque, nmero de la leccin, tu
nombre de usuario y la fecha.

Leccin

2 Audacity, uso y manejo

El procesamiento de audio es la alteracin intencional de seales auditivas o
del sonido. Las seales de sonido pueden ser electrnicamente representadas
de manera analgica, como en las cintas magnticas, 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 Edicin de sonido.

1. Renete con un compaero y creen en el Escritorio una carpeta llamada EdicinSonido.

a) Descarguen el paquete PaqueteAudios.zip del CD Habilidades Digitales SM 3 y descomprmanlo
en la carpeta EdicinSonido.
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 edicin

Vista del
proyecto

Herramientas
de seleccin

De igual manera que en el programa de edicin 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 botn Reproducir

y observen qu sucede en pantalla. Escriban a continuacin
su interpretacin de la grfica en color azul en la Vista de proyecto.






119

d) Existe alguna relacin entre la grfica y el medido de nivel de salida. Explcala.



sirve para cambiar la velocidad con la
e) La herramienta Reproducir a velocidad
que se recorre la grabacin. Cambien la velocidad utilizando el botn deslizable, presionen el
botn 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 presin en el aire. Thomas Edison demostr que era posible capturarlas dentro de un medio fsico para despus
reproducirlas generando las mismas ondas de presin. Las ondas de presin 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 ms de una pista en un proyecto de Audacity. En
el men Pista elijan la opcin Aadir nueva>Pista de audio. Para qu suponen que sea
til tener ms de una pista de audio?





120

 Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (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 profesin como el
de las instituciones en cuestin; por ejemplo:
Universidad Nacional Autnoma de Mxico (UNAM)
Ciencias genmicas
Ingeniera geomtica
Manejo sustentable de zonas costeras
Reciclaje tecnolgico
a) Averigen en Internet el nombre de tres instituciones o asociaciones que
promuevan el reciclaje tecnolgico. Escriban en el cuaderno el nombre de
la institucin y su pgina electrnica, sus objetivos principales y el pas de
referencia.
b) Hagan un compendio de 10 estrategias para reciclar de acuerdo con la
informacin de las pginas consultadas.

/// BITCoRA ///

CIeRRe De leCCIN
Escribe en tu cuaderno lo que has aprendido en la leccin; 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 debers exportar despus de guardar tu proyecto.
De momento no sigas ese paso.
PARA lA SeMANA
1. Conecta el micrfono a tu equipo y verifi ca su correcto funcionamiento.
a) Si an no has instalado Audacity, hazlo siguiendo las instrucciones de la
leccin 1.
b) Ejecuta Audacity, coloca tu micrfono frente a ti y haz lo siguiente.
Presiona el botn Grabar y di: sta es la primera parte de la pista
uno, presiona el botn Pausa al terminar y observa qu sucede
en la Vista de proyecto.
Presiona de nuevo Pausa para continuar la grabacin y di: sta
es la segunda parte de la pista uno, presiona Detener.
Una vez ms 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? Antalo en tu cuaderno
c) Guarda tu proyecto como MisPistas.aup.

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la leccin 2.

/// PRoYeCTo ///

Planeacin

121

Leccin

3 Audacity, edicin de sonido 1

Un micrfono est constituido por una pequea membrana que vibra de manera libre
sobre un mecanismo que convierte el movimiento vibratorio en seales elctricas. Las
ondas acsticas son traducidas a ondas elctricas. Tpicamente, 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 elctricos de la
forma de onda hacen vibrar las bocinas, equipadas con un electromagneto.

1. En las grabaciones de video, es comn el uso de claquetas, que bsicamente sirven para sincronizar ambas tomas, las visuales con las sonoras, a la hora de editar. Cuando se hace una grabacin de audio se
utilizan mtodos similares. Cmo te imaginas estos mtodos?


2. Cuando abres un archivo de sonido en Audacity, adems de escuchar, puedes observar la
forma de onda que representa el audio. Fjate en la siguiente imagen, puedes saber qu
se escucha en el audio con slo verla?

a) Es poco probable que sepas cmo es el sonido representado por la grfica anterior. El sonido de
dicha grfica es la frase tres, dos, uno en voz de una mujer de 29 aos. Ahora ve la siguiente
imagen que representa la misma frase, pero en voz de un hombre de 30 aos. Si comparas las
dos grficas, qu similitudes y diferencias observas?





3. Conecten su micrfono y sus audfonos a la computadora. Verifiquen su funcionamiento.
Cuando grabas una narracin es de gran ayuda utilizar una frase que servir de patrn visual a la
hora de hacer la edicin; empieza siempre dicindola. En caso de equivocarte, no grabes todo desde
el inicio, repite la frase, pero slo el prrafo en que te hayas equivocado. Como ejemplo, puedes abrir
el archivo Patron.mp3.

122

4. Renete con tu equipo y ejecuten Audacity. Abran el archivo 321.mp3 contenido en la

carpeta EdicinSonido, creada en la leccin anterior. Reproduzcan el sonido y comprueben
que la grfica de la actividad 2 corresponda a este sonido.
a) Dentro de Audacity, presionen el botn 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. Cuntas pistas hay despus de las grabaciones?
b) Muevan la grabacin en la pista de tal forma que las voces se escuchen al unsono, 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 posicin deseada.

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

Funcin

123

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la leccin 3.

/// PRoYeCTo ///

Desarrollo

Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (TIC)

para cuidar mi entorno y desarrollarme en l?
Para esta fase del proyecto hagan lo siguiente, aplicable en ambos temas.
a) Busquen imgenes para ilustrar sus investigaciones de acuerdo con el tema
que eligieron.
b) Defi nan los objetivos generales del proyecto.
c) Re exionen en equipo y redacten en su cuaderno un texto acerca de la
importancia del tema.

/// BITCoRA ///

CIeRRe De leCCIN
Guarda tu proyecto como miGrabacion.aup y escribe en tu cuaderno lo que has
aprendido en la leccin. Destaca lo que consideres ms interesante.
PARA lA SeMANA
1. Haz lo siguiente en casa.
a) Conecta el micrfono a tu equipo y verifi ca su correcto funcionamiento.
b) Si an no has instalado Audacity, hazlo segn las instrucciones de la
leccin 1.
c) Ejecuta Audacity, coloca tu micrfono frente a ti y graba las siguientes
frases clebres en un proyecto diferente.
2. Utiliza algn patrn al iniciar la grabacin 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 poesa es un misterio porque recrea el mundo; no tiene lmites para el
asombro. Cada lector encontrar signifi cados o sentidos distintos en la conjuncin de las palabras que forman una lnea, un verso o un fragmento.
Rodolfo Fonseca

Cuando las leyes de la matemtica 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 ms equitativo que la razn: todo el mundo

est convencido de tener sufi ciente.
Ren Descartes

124

Leccin

4 Audacity, edicin de sonido 2

Para reproducir el archivo editado es necesario exportar nuestro proyecto a un formato
de audio. Exportar es el proceso bsico 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 edicin
de audio, tambin lo encontramos en la edicin de video y en la programacin.

1. Renete con un compaero y ejecuten Audacity.

a) Abran el archivo Inicio.mp3, contenido dentro de la carpeta EdicinSonido. Reprodzcanlo y
escriban lo que escuchan.


b) Usen la herramienta de Seleccin
para seleccionar el patrn tres, dos, uno y posteriormente elimnenlo con la tecla Supr.

c) Comprueben que su proyecto slo contiene el audio Receta para hacer arroz con leche y
gurdenlo como MiRecetaCocina.aup.
d) Dentro del men Archivo elijan la opcin Importar > Audio y seleccionen el archivo Ingredientes.mp3, dentro de la misma carpeta. Reproduzcan el sonido. Qu sucede? Cuntas pistas
hay en el proyecto y cul 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
algn patrn visual para eliminar las frases de manera sencilla. Cmo lo hicieron?




Un proyecto de Audacity no es el producto final o el archivo de salida del programa. Es ms bien

un borrador de trabajo en que se han hecho todos los cambios en la coleccin de archivos de sonido
que se ha importado y usado en la creacin de un archivo final.

2. En cada una de las pistas de la siguiente imagen dibujen un rectngulo alrededor del patrn
que se eliminar.

3. Exporten su proyecto a un archivo

con formato mp3. Para hacerlo,
vayan al men Archivo>Exportar.
Gurdenlo 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 Exportacin
y escuchen su archivo terminado.
126

/// PROYECTO ///

Planeacin

Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (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 imgenes recopiladas dentro de imgs.
c) Investiguen qu son los metadatos.

CIERRE DE LECCIN
Guarda tu proyecto y llvate una copia a casa; recuerda incluir todos los audios.
Escribe en tu cuaderno lo ms interesante que hayas aprendido en la leccin.
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, especficamente aquellos que se puedan generar en la cocina. Prueba con algo
parecido a Kitchen Free Sounds.
d) Descarga los sonidos que se produciran durante la elaboracin del arroz
con leche que la locutora narr en su receta; por ejemplo, agua corriente,
agua en ebullicin, fuego en la estufa, etctera.
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 exprtalo en formato WAV; elige el nombre.
f) Busca el archivo RecetaConEfectos.mp3 en el CD. Escchalo y compralo
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 leccin 4.

/// BITCORA ///

127

Leccin

5 HTML, CSS
HTML te permite describir la estructura del contenido en tus archivos. Cuando abres una
pgina 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 ingls, son un lenguaje
para describir cmo se debe presentar el contenido de las pginas. El propsito principal
del desarrollo de CSS fue separar la estructura y la presentacin de los documentos.

1. Escribe en las lneas anaranjadas la informacin que falta, guate por la imagen de la derecha. Dibuja un crculo alrededor de lo que desconozcas.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN>
<html>
<______>
<title>___________________________</title>
<style type=text/css>
</style>
</head>
<body>
<h1> _______________________ <____>
<___>Etiqueta style</h2>
<p>
La etiqueta <strong>style</strong> requiere un atributo, llamado <em>
__________ </em>, 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 <em>
&quot;text/css&quot;</em>
</p>
<_________>
</html>

a) Abre el Bloc de notas y escribe el texto anterior completo; gurdalo con el nombre estilos.html
utilizando la codificacin UTF-8. Posteriormente brelo y observa si se ve igual que la imagen
anterior.
b) Observa el texto siguiente y agrega al archivo la informacin que aparece en color anaranjado.
Guarda la pgina y recrgala en el explorador, qu observas?
<style type=text/css>
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. Renete con un compaero para completar la informacin en la siguiente imagen.

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

_____________

background-color
______________

3. Los elementos en HTML tienen una relacin anidada; es decir, algunos elementos contienen
otros. Se puede representar dicha relacin 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 <body> cambian al aplicarle estilos; el trmino cascada en CSS se refiere precisamente a ello. Segn esta lgica, agrega
el texto en color anaranjado a la etiqueta <style> en el archivo estilos.html, gurdalo y recrgalo
en el explorador. Qu cambios ocurrieron y por qu?
p {

color:#7D0000;

font-family:Verdana, Geneva, sans-serif;

}





129

/// PROYECTO ///

Desarrollo

Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (TIC)

para cuidar mi entorno y desarrollarme en l?
a) Abran el Bloc de notas y transcriban toda la informacin 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 leccin 5.

/// BITCORA ///

CIERRE DE LECCIN
Resume la leccin en tu cuaderno. Destaca lo ms 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 modi ca, por medio de CSS, los elementos
H1 y H2.
a) Cambia el color del texto de todo el archivo estilos.html y gurdalo con el
nombre estilosv1.html
b) Resuelve el crucigrama.
Horizontales
2. Este diagrama permite representar la
relacin anidada entre elementos HTML.
4. Un explorador utiliza un _____
predeterminado para presentar
esta estructura de la pgina web.
5. Siglas en ingls de hojas de estilo
en cascada.
6. Permite describir la estructura
del contenido de las pginas web.
7. CSS otorga la ___________
a tus pginas web.
8. Tipo de relacin que guardan
los elementos HTML.
Verticales
1. Caractersticas de los elementos HTML.
3. Est compuesto de Etiqueta inicialContenido afectado por las etiquetasEtiqueta nal.
4. El principal propsito de CSS es separar
la presentacin de la ___________.

130

Leccin

6 CSS, importar estilos

El uso de hojas de estilo externas es, sin duda, el mejor mtodo para desarrollar
un sitio web cuando se tiene ms de una pgina. Cada pgina llamar y aplicar
la hoja de estilo, con lo cual los estilos sern consistentes en todas las pginas
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. Renete con un compaero y creen una carpeta en su directorio de

usuario, nmbrenla SitioConEstilo. Dentro de ella agreguen dos carpetas
ms: imgs y estilo. La estructura debe quedar como en la imagen.

SitioConEstilo

a) Copien en la carpeta SitioConEstilo todas las pginas que elaboraron hasta

la leccin 5; tambin las del bloque 4.
b) Copien en la carpeta imgs algunas imgenes; si es necesario, descarguen
otras.
Para recordar algo o simplemente para guardar orden, es recomendable hacer
anotaciones en el cdigo. 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: slo se asienta el comentario dentro de /* */.

Imgs

estilo

c) Con ayuda del Bloc de notas escriban lo siguiente y gurdenlo 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;
}
/* Vnculos */
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 gurdenlo dentro de SitioConEstilo. El documento

de HTML deber incluir la referencia a las pginas contenidas en la misma carpeta; para esto
hagan una lista no ordenada usando la etiqueta <ul>. Cada elemento de la lista deber ser
un hipervnculo a la pgina 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 <head>. Dicho texto es la manera de importar el archivo CSS. Eliminen la etiquetas
<style> y su contenido, sern reemplazadas por los estilos contenidos en miEstilo.css.
<head>
<title>Usando estilos</title>
<link rel=stylesheet href=estilo/miEstilo.css type=text/css>
</head>

b) Abran en el explorador el archivo index.html y verifiquen cada vnculo.

c) Abran el archivo miEstilo.css. Agreguen donde corresponda el texto en color anaranjado. Guarden
y abran de nuevo index.html. Exploren las pginas, qu cambios hubo y en cuntas pginas los
vieron? Cuntos archivos modificaron?
h1 {
font-size: 190%;
font-weight: normal;
color: #555;
text-transform:uppercase;
text-decoration:underline;
}

132

 Cmo utilizo las Tecnologas de la Informacin y la Comunicacin (TIC)

para cuidar mi entorno y desarrollarme en l?
a) Abran el Bloc de notas para editar el archivo miProyectoCarrera.txt o miProyectoReciclaje.txt, segn 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 smbolos en lugar de vocales acentuadas. Para
solucionar esto, abran todos los archivos en el Bloc de notas y vulvanlos a
guardar con UTF-8.

/// BITCORA ///

CIERRE DE LECCIN
Resume la leccin en tu cuaderno. Destaca lo ms interesante y justifica tu punto
de vista.
PARA LA SEMANA
1. Investiga a qu se re eren los trminos ruta relativa y ruta absoluta.
Plantea ejemplos de su utilizacin y ejemplifcalos con lo hecho en clase.
2. Cambia el color del texto de todas sus pginas web mediante del archivo
miEstilo.css, de tal modo que se cumpla lo siguiente.
Rojo para los ttulos de nivel 1 (H1)
Azul para los ttulos de nivel 2 (H2)
Negro para el resto del texto

Entra a www.habilidadesdigitales-sm.com.mx y realiza la actividad correspondiente a la leccin 6.

/// PROYECTO ///

Planeacin

3. Investiga qu es el cdigo de color hexadecimal y responde en tu cuaderno.

a) En cuntos colores est basado este cdigo y cules son?
b) Qu color representa el cdigo #FFF? Cul, el #FFFFFF? Explica por qu.

133

CIERRE DE PROYECTO
Cmo 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. Diseen, desarrollen y verifi quen el sitio web.

Dibujen en su cuaderno el esquema general del sitio web que crearn. Guense por la informacin de su archivo de texto (miProyectoCarrera.txt o miProyectoReciclaje.txt).
De acuerdo con la informacin, 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 informacin correspondiente.
Verifi quen que la carpeta Misitioweb contenga la carpeta imgs; si no
es as, crenla. Agreguen una carpeta llamada estilo, con la fi nalidad
de tener una estructura parecida a la usada en las actividades de la
leccin 6.
Marquen con HTML el contenido de cada archivo de texto. Al terminar, gurdenlos como tipo HTML.
Reemplacen las referencias de imgenes y direcciones electrnicas
por la etiqueta <img> y <a href></a> respectivamente. Agreguen
los atributos y valores correspondientes.
En la carpeta estilo, creen un archivo de texto. Escriban dentro el
cdigo CSS que deseen aplicar a sus pginas web. Recuerden guardarlo como tipo CSS.
Creen un archivo index.html, que servir de pgina de presentacin
y contendr el ndice de las pginas con vnculos a ellas. Escriban el
ttulo del proyecto, el nombre de los integrantes, el grupo y la fecha.
Una vez creado el CSS, imprtenlo a cada pgina, incluyendo
index.html.
Abran el archivo index.html y revisen que estn los datos de presentacin, el ndice del contenido con el nombre de las pginas y sus
vnculos (cercirense 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 pgina web a sus compaeros. Analicen las creadas por
los dems equipos y comenten qu benefi cios le aport a cada uno.
Al fi nal, comenten qu aprendieron durante el bimestre.

bloque

/// AUTOEVALUACIN ///

3. Evala tu desempeo y el de tus compaeros. 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
ningn
caso

Completaste en cada leccin las actividades

y el proyecto que te solicitaron?
Trabajaste de manera cooperativa en los proyectos?
Respetaste las opiniones de tus compaeros?
Trabajaste de manera ordenada en tus actividades?
Utilizaste alguna TIC para tus actividades?
Entendiste cmo se representa el sonido de manera grfica?

Habilidades

Utilizaste el micrfono?
Generaste algn audio con efectos especiales?
Comprendiste cmo cortar y desplazar audios en la lnea
del tiempo?
Entendiste la diferencia entre estructura y presentacin?
Mejoraste la presentacin de tus pginas?
Importaste archivos CSS a los HTML?
Desempeo en el proyecto

Desarrollaste una planeacin para la elaboracin del proyecto?

Revisaste el trabajo junto con tus compaeros
de equipo?
Utilizaste imgenes relacionadas con el proyecto?
Utilizaste hojas de estilo para mejorar la presentacin
de tu proyecto?
Editaste archivos de audio?
Entregaste tus actividades en el tiempo establecido previamente?

Analiza esta autoevaluacin y seala con marcatextos en qu reas debes mejorar para
tus proyectos siguientes. Comntalo con tu profesor.
Revisa las autoevaluaciones de todo el ao y determina qu avances tuviste en tu trabajo.
135

evaluacin
/// AUDACITY ///
1. Explica con tus palabras qu es la edicin de sonido.


2. Por qu es necesario instalar un codificador MP3 externo a Audacity?



3. Para qu sirve utilizar un patrn cuando grabas y editas sonidos?


4. Cul 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 cancin y quieres grabarla con los tres instrumentos, adems de un
coro, pero tus amigos no pueden ayudarte, pues no son tan buenos como t en la msica.
Cmo grabaras la cancin con ayuda de Audacity?




/// HTML y CSS ///

6. Cules son las ventajas de utilizar hojas de estilo en cascada?


136

bloque

5
1

7. A qu se refiere darle estructura a tus pginas y con qu lo haces?



8. Encuentra los errores en el siguiente cdigo. Escribe al lado de cada lnea las correcciones.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN>
<html>
<header>
<title>Indice</title>
<link rel=stylesheet href=estilo/estilo.css type=texto/css>
</header>
<body>
<h1>ndice de pginas</h1>
<ul>
<li><a href=pagina1.html>Pgina 1</a></li>
<il><a href=pagina2.html>Pgina 2</a></li>
<li><a href=pagina3.html>Pgina 3</a></li>
<li><a Ref=pagina4.html>Pgina 4</a></li>
</ol>
<p>La etiqueta <strong>style</strong> requiere un atributo,
llamado <em>type</em>, el cual le dice al explorador el tipo
de estilo que est usando. <br />
En este caso, por ser CSS, es necesario especificar que es
de tipo <em> &quot;text/css&quot;</em></p>
</html>

9. Haz el diagrama de rbol del cdigo anterior.

137