3

Habilid

ades

digitales1 0 0 0 1 0 0 0 0 1 1 1 1

1 0 0 0 1 0 0 0 0 0 1 0 01 0 0 0 1 0 0 0 0 0 1 0 0

001010101010101010101010101010101010101010101010101

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

101010101010101010101010101010101010101010101010101

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

0 0 1 0 1 1 1 1 0 1 1 0 10 0 1 0 1 1 1 1 0 1 1 0

1 0 0 1 1 0 1 0 0 1 1 0 01 0 0 1 1 0 1 0 0 1 1 0 0

0 0 0 1 0 0 1 0 0 0 0 0 00 0 0 1 0 0 1 0 0 0 0 0 0

0 0 0 1 0 1 1 1 0 1 0 0 00 0 0 1 0 1 1 1 0 1 0 0 0

0 1 0 0 1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 0

0 0 0 1 1 1 1 1 0 0 0 0 00 0 0 1 1 1 1 1 0 0 0 0 0

1 1 1 1 1 1 1 1 0 10

0 1 0 1 1 0 0 1 0 1 0 1 00 1 0 1 1 0 0 1 0 1 0 1 0

0 1 1 0 0 1 1 1 1 1 0 1 10 1 1 0 0 1 1 1 1 1 0 1 1

0 0 0 0 1 0 01 0 0 0 1 0 0 0 0 0 1 0 0

101010101010101010101

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

0101010101010101010

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

1 0

1 0

0 1

101010101010101010101

101010101010101010101

Me

inte

gro

y co

mun

ico

1 1 1 1

0 0 1 0 1 1 1 1 0 1 1 0 10 0 1 0 1

0 1 0 0 00 0 0 1 0 1 1 1 0 1 0 0 0

1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 0

0 0 0 1 1 1 1 1 0 0 0 0 00 0 0 1 1 1 1 1

10

0 1 1 0 0 1 1 1 1 1 0 1 10 1 1 0 0 1 1 1 1 1 0 1

1 1 1 1 0 1 1 0

1 0 0 0 0 0

1 1

0 0 0 1 0 01 0 0 0 1 0 0 0 0 0 1 0 0

0 1 0 0 1 1 0 01 0 0 1 1 0 1 0 0 1 1 0 0

0 0 0 0 0 00 0 0 1 0 0 1 0 0 0 0 0 0

0 1 00 1 0 1 1 0 0 1 0 1 0 1 0

Me

inte

gro

y co

mun

ico

010

0 1 0 1 0 1 0 1 0 1 0 1 00 1 0 1 0 1 0 1 0 1 0 1 00 1 0 1 0 1 0 1 0 1 0 1 00 1 0 1 0 1 0 1 0 1 0 1 0

3

Blo

qu

e5

Mi d

esar

roll

o

pro

fesi

on

al

/// 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ánunsoftwaredetipolibreyconcódigoabierto.››› Grabaránclipsdesonido.››› Haránedicióndesonido,comorecorte,reajuste,acomodoymezcladeclips,

ademásdelimpiezadelaudioterminadoylaexportaciónaarchivosdeaudioconocidos.

››› Conoceránlacompresióndearchivosdeaudio.››› ConoceránmáselementosparahacerpáginasdeInternetconHTML.››› Elaboraránunpequeñositioweb.

116

Lección 1 Audacity, descarga e instalaciónAudacity®esunaaplicacióninformáticalibremultiplataforma,desarrolladaporungrupodevoluntarios,queseusaparagrabaciónyedición de audio.Ademásdesuuso,tambiénbrindalaoportunidaddeestudiarcómofunciona,hacermejorasycompartirlasconotros.AlutilizarloestásconvirtiéndoteenuncolaboradoractivodelproyectoAudacity,yaquepuedesreportarcualquierbug(errorenelprograma)parasuprontareparación.EseleditordeaudiomásdifundidoenlossistemasGNU/Linux.

1. Reúneteconuncompañeroyconayudadeunbuscadorllevenacabolasiguientebúsqueda.

b) ¿Quécaracterísticasconsiderasquedefinenaunprogramalibreydecódigoabierto?

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.

a) Seleccionenelprimerresultado,quecorresponderáaladirecciónhttp://audacity.sourceforge.net/.Ésteeselsitiodelsoftwarelibreydecódigoabiertoqueutilizaránenlassiguientesleccio-nes.Diríjansealazonadedescargasyelijanlaversión1.3paraWindowsydespuésdenclicenDescargarparaobtenerelprograma.

2. Haganladescargadelcodificador LAME(porsussiglaseninglésLAME Ain’t an Mp3 Enco-der).ElijanlaversiónFor Audacity on Windowsyguárdenloensuequipo,posteriormentelonecesitarán.

117

3. EfectúenlainstalacióndeAudacity;suinstalaciónnoesmuydiferentedelasquehanhechohastaahora.Alfinal,ejecutenelprogramaseleccionandolaopciónLaunch Audacity ypresionenFinalizar.

4. HaganlainstalacióndeLAME.EsmuyimportantenomodificarlacarpetadeinstalaciónsugeridaC:\Archivos de programa\Lame for Audacity,yaqueposteriormenteseránecesariosaberdóndeseencuentrainstalado.ElcodificadorMP3sehalladentrodedichacarpeta.

5. Coloquenelcursorarribadecadaelementoseñaladoenlaimagen,observenlaetiquetaqueapareceycompletenlainformaciónquesepide.

a) b)

c) d

e) f)

g) h)

a b

h

e f g c d

118

Deacuerdoconelproyectoelegido,llevenacabolosiguiente.Carrerasdelfuturoa) ExplorenenInternetybusqueninformaciónrelacionadaconnuevascarreras

oprofesionesdelfuturo(creadasapartirde5añosalafecha).b) Elaborenunalistadeporlomenos10profesionesyescribanensucuaderno

unabrevedescripcióndecadauna.

Reciclajetecnológicoa) Busquen en Internet el concepto “reciclaje tecnológico”, consulten

almenostressitiosy,conbaseensuinformación,escribanunadefiniciónensucuaderno.

b) Enlistenensucuadernolosobjetosqueseconsiderandesechostecno-lógicos.

CIeRRe De leCCIÓNEscribeentucuadernoloquehasaprendidoenestalección.

PARA lA SeMANA1. ConayudadelsitioFree Software Foundationwww.e-sm.com.mx/

hdsm3-118respondelassiguientespreguntas.a) ¿Quéeselsoftwarelibre?b) ¿Dequémanerasesustentael

desarrollodesoftwarelibre?c) ¿Quéeslalicenciacopyleft?

2. Windows7cuentaconunprogramadegrabacióndeaudio.Escribeentucuadernolarutaparaaccederaél.

3. Consigueunmicrófono,conéctaloatucomputadorayrevisaquefun-cionecorrectamente.

4. IniciaWordytranscribetusapun-tesylasrespuestasdeestalección.Guardatudocumentoconelnúmerodebloque,númerodelalección,tunombredeusuarioylafecha.

Entr

aa

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

xy

real

iza

laa

ctiv

idad

cor

resp

ondi

ente

ala

lecc

ión

1.

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

/// BITÁCoRA ///

/// PRoYeCTo ///Antecedentes

Guardatudocumentoconelnúmerodebloque,númerodelalección,tunombredeusuarioylafecha.

Entr

aa

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

x

119

2 Lección Audacity, uso y manejoElprocesamiento de audioeslaalteraciónintencionaldeseñalesauditivasodelsonido.Lasseñalesdesonidopuedenserelectrónicamenterepresentadasdemaneraanalógica,comoenlascintasmagnéticas,odemododigital,comoenlosCD.Elprocesomedianteelcualsemodifican,mezclan,limpian,reajustanocombinanelementosauditivosseconocecomoEdición de sonido.

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.

1. ReúneteconuncompañeroycreenenelEscritoriounacarpetallamadaEdiciónSonido.a) DescarguenelpaquetePaqueteAudios.zip delCDHabilidadesDigitalesSM3ydescomprímanlo

enlacarpetaEdiciónSonido.b) EjecutenAudacity,abranelarchivo321.mp3.Observenlasiguienteimageneidentifiquenlos

elementosprincipalesenpantalla

c) PresionenelbotónReproducir yobservenquésucedeenpantalla.EscribanacontinuaciónsuinterpretacióndelagráficaencolorazulenlaVista de proyecto.

Control de audio y herramientas de edición

Vista del proyecto

Herramientasde selección

120

Todos los sonidos que escuchamos son ondas de presión en el aire. Thomas Edi-son 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í.

d)Existealgunarelaciónentrelagráficayelmedidodeniveldesalida.Explícala.

e) LaherramientaReproducir a velocidad sirveparacambiarlavelocidadconlaqueserecorrelagrabación.Cambienlavelocidadutilizandoelbotóndeslizable,presionenelbotónReproducir a velocidadyescribanloquesucedeencadaunodelossiguientescasos.

Velocidad Cambio en el audio

0.5

1.0

2.0

2. Exploralasherramientas de zoom ,escribeelnombredecadaherramientaydequémaneraafectaalaVista del proyecto.

a) DentrodelaVista de proyectoseencuentranlaspistas;enlapantalladelaimagenseobservaunasolapista,llamada321.PuedeagregarsemásdeunapistaenunproyectodeAudacity.EnelmenúPistaelijanlaopciónAñadir nueva>Pista de audio.¿Paraquésuponenqueseaútiltenermásdeunapistadeaudio?

121

Carrerasdelfuturoa) Busqueninstitucionesnacionaleseinternacionalesqueimpartanesaspro-

fesiones.Anotenensucuadernotantoelnombredelaprofesióncomoeldelasinstitucionesencuestión;porejemplo:

UniversidadNacionalAutónomadeMéxico(UNAM)• Cienciasgenómicas• Ingenieríageomática• Manejosustentabledezonascosteras

Reciclajetecnológicoa) AverigüenenInternetelnombredetresinstitucionesoasociacionesque

promuevanelreciclajetecnológico.Escribanenelcuadernoelnombredelainstituciónysupáginaelectrónica,susobjetivosprincipalesyelpaísdereferencia.

b) Haganuncompendiode10estrategiasparareciclardeacuerdoconlainformacióndelaspáginasconsultadas.

CIeRRe De leCCIÓNEscribeentucuadernoloquehasaprendidoenlalección;agregaloqueconsideresnecesarioparasustentarloaprendido.GuardatuproyectocomomiProyectoAudio.aup.Leelaadvertenciaqueindicaqueparacrearunarchivo de audiodeberásexportardespuésdeguardartuproyecto.Demomentonosigasesepaso.

PARA lA SeMANA1. Conectaelmicrófonoatuequipoyverificasucorrectofuncionamiento.

a) SiaúnnohasinstaladoAudacity,hazlosiguiendolasinstruccionesdelalección1.

b) EjecutaAudacity,colocatumicrófonofrenteatiyhazlosiguiente.• PresionaelbotónGrabarydi:“Éstaeslaprimerapartedelapista

uno”,presionaelbotónPausaalterminaryobservaquésucedeenlaVista de proyecto.

• PresionadenuevoPausaparacontinuarlagrabaciónydi:“Éstaeslasegundapartedelapistauno”,presionaDetener.

• UnavezmáspresionaGrabarydi:“Éstaeslasegundapista”,alterminarpresionaDetener.¿Quésucedió?¿Quédiferenciasnotasteentrelasaccionesgrabar-pausa-grabarygrabar-detener-grabar?Anótaloentucuaderno

c) GuardatuproyectocomoMisPistas.aup.

Entr

aa

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

xy

real

iza

laa

ctiv

idad

cor

resp

ondi

ente

ala

lecc

ión

2.

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

/// BITÁCoRA ///

/// PRoYeCTo ///Planeación

122

Lección3 Audacity, edición de sonido 1Unmicrófonoestáconstituidoporunapequeñamembranaquevibrademaneralibresobreunmecanismoqueconvierteelmovimientovibratorioenseñaleseléctricas.Lasondas acústicassontraducidasaondas eléctricas.Típicamente,aaltaspresionesenelaire(volumenalto)lecorrespondenaltosvoltajes.Cuandosereproduceelsonido,elreproductorprocedealainversa,estoes,losimpulsoseléctricosdelaformadeondahacenvibrarlasbocinas,equipadasconunelectromagneto.

1. Enlasgrabacionesdevideo,escomúnelusodeclaquetas,quebásica-mentesirvenparasincronizarambastomas,lasvisualesconlassono-ras,alahoradeeditar.Cuandosehaceunagrabacióndeaudioseutilizanmétodossimilares.¿Cómoteimaginasestosmétodos?

2. CuandoabresunarchivodesonidoenAudacity,ademásdeescuchar,puedesobservarlaformadeondaquerepresentaelaudio.Fíjateenlasiguienteimagen,¿puedessaberquéseescuchaenelaudioconsóloverla?

a) Espocoprobablequesepascómoeselsonidorepresentadoporlagráficaanterior.Elsonidodedichagráficaeslafrase“tres,dos,uno…”envozdeunamujerde29años.Ahoravelasiguienteimagenquerepresentalamismafrase,peroenvozdeunhombrede30años.Sicomparaslasdosgráficas,¿quésimilitudesydiferenciasobservas?

3. Conectensumicrófonoysusaudífonosalacomputadora.Verifiquensufuncionamiento.

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.

123

Audacity, edición de sonido 14. ReúnetecontuequipoyejecutenAudacity.Abranelarchivo321.mp3contenidoenla

carpetaEdiciónSonido,creadaenlalecciónanterior.Reproduzcanelsonidoycompruebenquelagráficadelaactividad2correspondaaestesonido.

a) DentrodeAudacity,presionenelbotónGrabar yrepitanlafrase“tres,dos,uno…”;alterminar,presionenDetener .Reproduzcanelaudio;encasodetenerunniveldevolumenbajo,reviseneincrementenelnivel de entrada yvuelvanagrabarhastaescucharsuvozaunvolumenrazonable.¿Cuántaspistashaydespuésdelasgrabaciones?

b) Muevanlagrabaciónenlapistadetalformaquelasvocesseescuchenalunísono,esdecir,lavozdelalocutoraaldecir“tres”debecoincidirconsuvoz;paraello,utilicenlaherramientadesplazamiento en el tiempo yarrastrenelcontenidodelcliphacialaposicióndeseada.

5.Eliminenlaspistasquenoseandeutilidadpresionandoelbotónconformadetache,enlapartesuperiorizquierdadelapista.

a) Explorenenlaspistasrestantescadabotón,reproduzcanelsonidoyescribanparaquésirvecadaunodeellos.RecuerdenqueparadeshacerloscambiospuedenpresionarCtrl+Z.

Botón Función

124

Paraestafasedelproyectohaganlosiguiente,aplicableenambostemas.a) Busquenimágenesparailustrarsusinvestigacionesdeacuerdoconeltema

queeligieron.b) Definanlosobjetivosgeneralesdelproyecto.c) Reflexionenenequipoyredactenensucuadernountextoacercadela

importanciadeltema.

CIeRRe De leCCIÓNGuardatuproyectocomomiGrabacion.aupyescribeentucuadernoloquehasaprendidoenlalección.Destacaloqueconsideresmásinteresante.

PARA lA SeMANA1. Hazlosiguienteencasa.

a) Conectaelmicrófonoatuequipoyverificasucorrectofuncionamiento.b) SiaúnnohasinstaladoAudacity,hazlosegúnlasinstruccionesdela

lección1.c) EjecutaAudacity,colocatumicrófonofrenteatiygrabalassiguientes

frasescélebresenunproyectodiferente.

2. Utilizaalgúnpatrónaliniciarlagrabaciónyrecuerdaque,siteequi-vocas,puedesrepetirlafraseyempezardenuevo.Guardalosarchivosconunnombrequehagareferenciaalautordelafrase.

“Lapoesíaesunmisterioporquerecreaelmundo;notienelímitesparaelasombro.Cadalectorencontrarásignificadososentidosdistintosenlaconjun-cióndelaspalabrasqueformanunalínea,unversoounfragmento.”

RodolfoFonseca

“Cuandolasleyesdelamatemáticaserefierenalarealidad,nosonciertas;cuandosonciertas,noserefierenalarealidad.”

AlbertEinstein

“Nohaynadarepartidodemodomásequitativoquelarazón:todoelmundoestáconvencidodetenersuficiente.”

RenéDescartes

Entr

aa

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

xy

real

iza

laa

ctiv

idad

cor

resp

ondi

ente

ala

lecc

ión

3.

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

/// BITÁCoRA ///

/// PRoYeCTo ///Desarrollo

125

4 Lección Audacity, edición de sonido 2Para 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úneteconuncompañeroyejecutenAudacity.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 posterior-mente 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 Ingre-dientes.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.

126

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. Encadaunadelaspistasdelasiguienteimagendibujenunrectánguloalrededordelpatrónqueseeliminará.

3. Exportensuproyectoaunarchivocon formato mp3. Para hacerlo,vayanalmenúArchivo>Exportar.Guárdenlo con el nombre Rece-taArrozLechedetipomp3.ApareceráunaventanadeMetadatos;escri-bansunombreenelcampoArtistaypresionenAceptar.EsperenqueconcluyaelprocesodeExportaciónyescuchensuarchivoterminado.

127

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ÓNGuarda 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 SEMANA1. 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í-

fi camente 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 con-clusiones.

Entr

a a

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

x y

real

iza

la a

ctiv

idad

cor

resp

ondi

ente

a la

lecc

ión

4.

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

/// BITÁCORA ///

/// PROYECTO ///Planeación

Entr

a a

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

x

128

Lección5 HTML, CSSHTML 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. Escribeenlaslíneasanaranjadaslainformaciónquefalta,guíateporlaimagendeladere-cha.Dibujauncírculoalrededordeloquedesconozcas.

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.

<!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; 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;

129

HTML, CSS2. Reúneteconuncompañeroparacompletarlainformaciónenlasiguienteimagen.

3. LoselementosenHTMLtienenunarelaciónanidada;esdecir,algunoselementoscontienenotros.Sepuederepresentardicharelaciónconundiagramadeárbol.Observaelcorrespon-dientealarchivoestilos.html

margin-left ____________

margin-right

______________

border ____ dotted ____

background-color

______________

a) El diagrama anterior ayuda a entender por qué todos los elementos de <body> cambian al apli-carle 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;

}

_____________

html

head body

p

strong em br

title style h1 h2

130

/// BITÁCORA ///

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 miProyecto-Reciclaje.txt, dependiendo del tema seleccionado, en una carpeta llamadaMisitioweb.

CIERRE DE LECCIÓNResume la lección en tu cuaderno. Destaca lo más interesante y justifi ca tu punto de vista.

PARA LA SEMANA1. 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.htmlb) Resuelve el crucigrama.

Entr

a a

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

x y

real

iza

la a

ctiv

idad

cor

resp

ondi

ente

a la

lecc

ión

5.

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

/// PROYECTO ///Desarrollo

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 inicial-Contenido afectado por las etiquetas-Etiqueta fi nal.

4. El principal propósito de CSS es separar la presentación de la ___________.

131

6 Lección 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ñeroycreenunacarpetaensudirectoriodeusuario,nómbrenlaSitioConEstilo.Dentrodeellaagreguendoscarpetasmás: imgs yestilo.Laestructuradebequedarcomoenlaimagen.

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 uti-lizar 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 /* */.

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;}

SitioConEstilo

Imgs

estilo

132

2. Creenunarchivollamadoindex.htmlyguárdenlodentrodeSitioConEstilo.EldocumentodeHTMLdeberáincluirlareferenciaalaspáginascontenidasenlamismacarpeta;paraestohaganunalistanoordenadausandolaetiqueta<ul>.Cadaelementodelalistadeberáserunhipervínculoalapáginaquelecorresponde,detalmodoquesecumplalomostradoenlaimagen.

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>

h1 { font-size: 190%; font-weight: normal; color: #555; text-transform:uppercase; text-decoration:underline;}

b) Abran en el explorador el archivo index.html y verifi quen 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 modifi caron?

SitioConEstilo

Imgs

Img

Img

Img

miEstilo.cscestilo

index.html

pagina1.html

pagina2.html

pagina3.html

133

a) Abran el Bloc de notas para editar el archivo miProyectoCarrera.txt o miPro-yectoReciclaje.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.

CIERRE DE LECCIÓNResume la lección en tu cuaderno. Destaca lo más interesante y justifi ca tu punto de vista.

PARA LA SEMANA1. 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

3. Investigaquéeselcódigodecolorhexadecimalyrespondeentucua-derno.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é.

Entr

a a

ww

w.h

abili

dad

esd

igit

ales

-sm

.co

m.m

x y

real

iza

la a

ctiv

idad

cor

resp

ondi

ente

a la

lecc

ión

6.

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

/// BITÁCORA ///

/// PROYECTO ///Planeación

CIERRE DE PROYECTO

134

0 1 0 0 1 0 1 1 1 1 1 1 00 1 0 0 1 0 1 1 1 1 1 1 0

0 1 0 0 1 0 1 1 1 1 1 1 00 1 0 0 1 00 1 0 1 0 1 0 1 0 1 0 1 0

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

1 0 0 0 1 0 0 0 0 0 1 0 01 0 0 0 1 0 0 0 0 0 1 0 00 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0

1 0 0 1 1 0 1 0 0 1 1 0 01 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 1

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

0 1 1 0 0 1 1 1 1 1 0 1 10 1 1 0 0 1 1 10 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 10 1

0 0 0 1 1 1 1 1 0 0 0 0 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 0 1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 1 0 1 0 1 0 1

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

010101001010100 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 0

0 0 0 1 0 0 1 0 0 0 0 0 00 0 0 1 0 0 1 0 0 0 0 0 0

1 0 1 1 1 1 0 0 1 1 0 1 01 0 1 1 1 1 0 0 1 1 0 1 00 1 0 1 0 1 0 1 0 1

1 0 0 0 1 0 0 0 0 1 1 1 11 0 0 0 1 0 0 0 0 1 1 1 11 0 0 0 10 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 1 0 1

/// INTEGREN EL PROYECTO ///

1. Diseñen,desarrollenyverifiquenelsitioweb.»» Dibujenensucuadernoelesquemageneraldelsitiowebquecrea-

rán.Guíenseporlainformacióndesuarchivodetexto(miProyecto-Carrera.txtomiProyectoReciclaje.txt).

»» Deacuerdoconlainformación,dividanentemasysubtemaseltextodelarchivo(miProyectoCarrera.txtomiProyectoReciclaje.txt).

»» Creentantosarchivosdetextocomotemasresultaronenelpasoanteriorycopienenelloslainformacióncorrespondiente.

»» VerifiquenquelacarpetaMisitiowebcontengalacarpetaimgs;sinoesasí,créenla.Agreguenunacarpetallamadaestilo,conlafinalidaddetenerunaestructuraparecidaalausadaenlasactividadesdelalección6.

»» MarquenconHTMLelcontenidodecadaarchivodetexto.Altermi-nar,guárdenloscomotipoHTML.

»» Reemplacenlasreferenciasdeimágenesydireccioneselectrónicasporlaetiqueta<img>y<a href></a>respectivamente.Agreguenlosatributosyvalorescorrespondientes.

»» Enlacarpetaestilo,creenunarchivodetexto.EscribandentroelcódigoCSSquedeseenaplicarasuspáginasweb.Recuerdenguar-darlocomotipoCSS.

»» Creenunarchivo index.html,queservirádepáginadepresentaciónycontendráelíndicedelaspáginasconvínculosaellas.Escribaneltítulodelproyecto,elnombredelosintegrantes,elgrupoylafecha.

»» Una vez creado el CSS, impórtenlo a cada página, incluyendoindex.htm l.

»» Abranelarchivoindex.htmlyrevisenqueesténlosdatosdepresen-tación,elíndicedelcontenidoconelnombredelaspáginasysusvínculos(cerciórensedequeéstosfuncionen),yqueseapliquenlosestilosdefinidosenelCSS.

/// DIVULGUEN SUS CONOCIMIENTOS, REFLEXIONES, EXPERIENCIAS Y CONCLUSIONES ///

2. Presentensupáginawebasuscompañeros.Analicenlascreadasporlosdemásequiposycomentenquébeneficiosleaportóacadauno.Alfinal,comentenquéaprendieronduranteelbimestre.

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

1 0 0 1 0 1 1 1 1 1 1 00 1 0 0 1 0 1 1 1 1 1 1 0

0 1 0 0 1 0 1 1 1 1 1 1 00 1 0 0 1 00 1 0 1 0 1 0 1 0 1 0 1 0

1 1 0 1 1 0 1

1 0 0 0 1 0 0 0 0 0 1 0 01 0 0 0 1 0 0 0 0 0 1 0 00 1 0 1 0 1 0 1 0 1 0 1 0

1 0 0 1 1 0 1 0 0 1 1 0 01 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

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

0 1 1 0 0 1 1 1 1 1 0 1 10 1 1 0 0 1 1 10 1 0 1 0 1 0 1 0 1 0 1 0 0 1 0 10 1

1 1 1 0 0 0 0 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

0 1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 00 1 0 0 1 0 0 0 1 0 0 1 0 0 1 0 1 0 1 0

1 0 0 1 1 0 1 0 0 0 0

010101001010100 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 0 0 00 0 0 1 0 0 1 0 0 0 0 0 0

1 0 1 1 1 1 0 0 1 1 0 1 01 0 1 1 1 1 0 0 1 1 0 1 00 1 0 1 0 1 0 1 0 1

1 0 0 0 0 1 1 1 11 0 0 0 1 0 0 0 0 1 1 1 11 0 0 0 10 1 0 1 0 1 0 1 0 1 0 1 0 0 1

135

bloque5

/// AUTOEVALUACIÓN ///

3. Evalúatudesempeñoyeldetuscompañeros.Marcaconuna✔lacasillaquereflejetuslogrosduranteestebloque.Alfinalcomentalosresultadoscontuprofesorparareforzarlasáreasenquedebesmejorar.

Actividades

En todos

los casos

Casi siempre

Algunas veces

En ningún caso

Act

itud

es y

val

ores ¿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?

Hab

ilida

des

¿Utilizaste alguna TIC para tus actividades?

¿Entendiste cómo se representa el sonido de manera gráfica?

¿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?

Des

empe

ño e

n el

pro

yect

o

¿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?

»» Analizaestaautoevaluaciónyseñalaconmarcatextosenquéáreasdebesmejorarparatusproyectossiguientes.Coméntalocontuprofesor.

»» Revisalasautoevaluacionesdetodoelañoydeterminaquéavancestuvisteentutrabajo.

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

136

/// AUDACITY ///

1. Explicacontuspalabrasquéeslaedicióndesonido.

�

�

2. ¿PorquéesnecesarioinstalaruncodificadorMP3externoaAudacity?

�

�

�

3. ¿Paraquésirveutilizarunpatróncuandograbasyeditassonidos?

�

�

4. ¿Cuálesladiferenciaentreguardarunproyectoyexportarloaunformatodeaudio?

�

�

�

5. Imaginaquesabestocartresinstrumentosmusicalesyquetienesbuenavozparacantar.Tegustamuchounacanciónyquieresgrabarlaconlostresinstrumentos,ademásdeuncoro,perotusamigosnopuedenayudarte,puesnosontanbuenoscomotúenlamúsica.¿CómograbaríaslacanciónconayudadeAudacity?

�

�

�

/// HTML y CSS ///

6. ¿Cuálessonlasventajasdeutilizarhojasdeestiloencascada?

�

�

EvAluACIón

1 1

137

bloque

7. ¿Aquéserefieredarleestructuraatuspáginasyconquélohaces?

�

�

8. Encuentraloserroresenelsiguientecódigo.Escribealladodecadalínealascorrecciones.

<!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> &quot;text/css&quot;</em></p>

</html>

9. Hazeldiagramadeárboldelcódigoanterior.

5