Habilidades Digitales

Transcripción

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?
Entraawww.habilidadesdigitales-sm.com.mx
Entraawww.habilidadesdigitales-sm.com.mxyrealizalaactividadcorrespondientealalección1.
Deacuerdoconelproyectoelegido,llevenacabolosiguiente.
Carrerasdelfuturo
a) ExplorenenInternetybusqueninformaciónrelacionadaconnuevascarreras
oprofesionesdelfuturo(creadasapartirde5añosalafecha).
b) Elaborenunalistadeporlomenos10profesionesyescribanensucuaderno
unabrevedescripcióndecadauna.
118
Reciclajetecnológico
a) Busquen en Internet el concepto “reciclaje tecnológico”, consulten
almenostressitiosy,conbaseensuinformación,escribanunadefinición
ensucuaderno.
b) Enlistenensucuadernolosobjetosqueseconsiderandesechostecnológicos.
/// BITÁCoRA ///
CIeRRe De leCCIÓN
Escribeentucuadernoloquehasaprendidoenestalección.
PARA lA SeMANA
1. ConayudadelsitioFree Software Foundationwww.e-sm.com.mx/
hdsm3-118respondelassiguientespreguntas.
a) ¿Quéeselsoftwarelibre?
b) ¿Dequémanerasesustentael
desarrollodesoftwarelibre?
c) ¿Quéeslalicenciacopyleft?
2. Windows7cuentaconunprograma
degrabacióndeaudio.Escribeentu
cuadernolarutaparaaccederaél.
3. Consigueunmicrófono,conéctalo
atucomputadorayrevisaquefuncionecorrectamente.
4. IniciaWordytranscribetusapuntesylasrespuestasdeestalección.
Guardatudocumentoconelnúmero
debloque,númerodelalección,tu
nombredeusuarioylafecha.
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
Carrerasdelfuturo
a) Busqueninstitucionesnacionaleseinternacionalesqueimpartanesasprofesiones.Anotenensucuadernotantoelnombredelaprofesióncomoel
delasinstitucionesencuestión;porejemplo:
UniversidadNacionalAutónomadeMéxico(UNAM)
• Cienciasgenómicas
• Ingenieríageomática
• Manejosustentabledezonascosteras
Reciclajetecnológico
a) AverigüenenInternetelnombredetresinstitucionesoasociacionesque
promuevanelreciclajetecnológico.Escribanenelcuadernoelnombrede
lainstituciónysupáginaelectrónica,susobjetivosprincipalesyelpaísde
referencia.
b) Haganuncompendiode10estrategiasparareciclardeacuerdoconla
informacióndelaspáginasconsultadas.
/// BITÁCoRA ///
CIeRRe De leCCIÓN
Escribeentucuadernoloquehasaprendidoenlalección;agregaloqueconsideres
necesarioparasustentarloaprendido.
GuardatuproyectocomomiProyectoAudio.aup.Leelaadvertenciaqueindicaque
paracrearunarchivo de audiodeberásexportardespuésdeguardartuproyecto.
Demomentonosigasesepaso.
PARA lA SeMANA
1. Conectaelmicrófonoatuequipoyverificasucorrectofuncionamiento.
a) SiaúnnohasinstaladoAudacity,hazlosiguiendolasinstruccionesdela
lección1.
b) EjecutaAudacity,colocatumicrófonofrenteatiyhazlosiguiente.
• PresionaelbotónGrabarydi:“Éstaeslaprimerapartedelapista
uno”,presionaelbotónPausaalterminaryobservaquésucede
enlaVista de proyecto.
• PresionadenuevoPausaparacontinuarlagrabaciónydi:“Ésta
eslasegundapartedelapistauno”,presionaDetener.
• UnavezmáspresionaGrabarydi:“Éstaeslasegundapista”,
alterminarpresionaDetener.¿Quésucedió?¿Quédiferencias
notasteentrelasaccionesgrabar-pausa-grabarygrabar-detenergrabar?Anótaloentucuaderno
c) GuardatuproyectocomoMisPistas.aup.
/// 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
/// PRoYeCTo ///
Desarrollo
Paraestafasedelproyectohaganlosiguiente,aplicableenambostemas.
a) Busquenimágenesparailustrarsusinvestigacionesdeacuerdoconeltema
queeligieron.
b) Definanlosobjetivosgeneralesdelproyecto.
c) Reflexionenenequipoyredactenensucuadernountextoacercadela
importanciadeltema.
/// BITÁCoRA ///
CIeRRe De leCCIÓN
GuardatuproyectocomomiGrabacion.aupyescribeentucuadernoloquehas
aprendidoenlalección.Destacaloqueconsideresmásinteresante.
PARA lA SeMANA
1. Hazlosiguienteencasa.
a) Conectaelmicrófonoatuequipoyverificasucorrectofuncionamiento.
b) SiaúnnohasinstaladoAudacity,hazlosegúnlasinstruccionesdela
lección1.
c) EjecutaAudacity,colocatumicrófonofrenteatiygrabalassiguientes
frasescélebresenunproyectodiferente.
2. Utilizaalgúnpatrónaliniciarlagrabaciónyrecuerdaque,siteequivocas,puedesrepetirlafraseyempezardenuevo.Guardalosarchivos
conunnombrequehagareferenciaalautordelafrase.
“Lapoesíaesunmisterioporquerecreaelmundo;notienelímitesparael
asombro.Cadalectorencontrarásignificadososentidosdistintosenlaconjuncióndelaspalabrasqueformanunalínea,unversoounfragmento.”
RodolfoFonseca
“Cuandolasleyesdelamatemáticaserefierenalarealidad,nosonciertas;
cuandosonciertas,noserefierenalarealidad.”
AlbertEinstein
“Nohaynadarepartidodemodomásequitativoquelarazón:todoelmundo
estáconvencidodetenersuficiente.”
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
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. Hazlosiguienteencasa.
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.
<!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>
"text/css"</em>
</p>
<_________>
</html>
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?
<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. 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 <body> 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 <style> 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
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.
/// 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. InvestigaenInternetquépropiedadessepuedencambiarconCSS.
2. Entuarchivoestilos.htmlmodifica,pormediodeCSS,loselementos
H1yH2.
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úneteconuncompañeroycreenunacarpetaensudirectoriode
usuario,nómbrenlaSitioConEstilo.Dentrodeellaagreguendoscarpetas
más: imgs yestilo.Laestructuradebequedarcomoenlaimagen.
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. Creenunarchivollamadoindex.htmlyguárdenlodentrodeSitioConEstilo.Eldocumento
deHTMLdeberáincluirlareferenciaalaspáginascontenidasenlamismacarpeta;paraesto
haganunalistanoordenadausandolaetiqueta<ul>.Cadaelementodelalistadeberáser
unhipervínculoalapáginaquelecorresponde,detalmodoquesecumplalomostradoen
laimagen.
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, serán 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 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
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. Investigaaquéserefierenlostérminosruta relativayruta absoluta.
Planteaejemplosdesuutilizaciónyejemplifícalosconlohechoenclase.
2. Cambiaelcolordeltextodetodassuspáginaswebmediantedelarchivo
miEstilo.css,detalmodoquesecumplalosiguiente.
• Rojo para los títulos de nivel 1 (H1)
• Azul para los títulos de nivel 2 (H2)
• Negro para el resto del texto
/// PROYECTO ///
Planeación
3. Investigaquéeselcódigodecolorhexadecimalyrespondeentucuaderno.
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,desarrollenyverifiquenelsitioweb.
»» Dibujenensucuadernoelesquemageneraldelsitiowebquecrearán.Guíenseporlainformacióndesuarchivodetexto(miProyectoCarrera.txtomiProyectoReciclaje.txt).
»» Deacuerdoconlainformación,dividanentemasysubtemaseltexto
delarchivo(miProyectoCarrera.txtomiProyectoReciclaje.txt).
»» Creentantosarchivosdetextocomotemasresultaronenelpaso
anteriorycopienenelloslainformacióncorrespondiente.
»» VerifiquenquelacarpetaMisitiowebcontengalacarpetaimgs;sino
esasí,créenla.Agreguenunacarpetallamadaestilo,conlafinalidad
detenerunaestructuraparecidaalausadaenlasactividadesdela
lección6.
»» MarquenconHTMLelcontenidodecadaarchivodetexto.Alterminar,guárdenloscomotipoHTML.
»» Reemplacenlasreferenciasdeimágenesydireccioneselectrónicas
porlaetiqueta<img>y<a href></a>respectivamente.Agreguen
losatributosyvalorescorrespondientes.
»» Enlacarpetaestilo,creenunarchivodetexto.Escribandentroel
códigoCSSquedeseenaplicarasuspáginasweb.RecuerdenguardarlocomotipoCSS.
»» Creenunarchivo index.html,queservirádepáginadepresentación
ycontendráelíndicedelaspáginasconvínculosaellas.Escribanel
títulodelproyecto,elnombredelosintegrantes,elgrupoylafecha.
»» Una vez creado el CSS, impórtenlo a cada página, incluyendo
index.html.
»» Abranelarchivoindex.htmlyrevisenqueesténlosdatosdepresentación,elíndicedelcontenidoconelnombredelaspáginasysus
vínculos(cerciórensedequeéstosfuncionen),yqueseapliquenlos
estilosdefinidosenelCSS.
/// DIVULGUEN SUS CONOCIMIENTOS,
REFLEXIONES, EXPERIENCIAS Y CONCLUSIONES ///
2. Presentensupáginawebasuscompañeros.Analicenlascreadaspor
losdemásequiposycomentenquébeneficiosleaportóacadauno.
Alfinal,comentenquéaprendieronduranteelbimestre.
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.
<!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 páginas</h1>
<ul>
<li><a href=”pagina1.html”>Página 1</a></li>
<il><a href=”pagina2.html”>Página 2</a></li>
<li><a href=”pagina3.html”>Página 3</a></li>
<li><a Ref=”pagina4.html”>Página 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> "text/css"</em></p>
</html>
9. Haz el diagrama de árbol del código anterior.
137

Habilidades Digitales

Transcripción

Documentos relacionados

Lección 9: El modelo de caja

Curso de Diseño Web Integral - Gato Rojo Dos

DISE EÑO WE B HTML, , CSS Y Y JAVAS SCRIPT

Entrevista Mariana Villegas