Formato de guia undecimo sistemas

How do you say in English?
1
LICEO HOMBRE DEL RIO
“hacia una educación estratégica que
construya conocimiento, desarrolle
habilidadestácticas, fortaleciendo los valores
humanos”
ASIGNATURA SISTEMAS PERIODO
I
GRADO
UNDECIMO
D M A
TITULO
Diseñemos nuestra página w eb
CONTENIDOS
Que es unsistemade lenguaje
por código
Que es unsistemade lenguaje
por bloque
Herramientasparadiseñarmi
pagina
DESEMPEÑOS
Reconocerá las diferentes formas decrear una página web
Diseñara proyectos con Arduinoy materialreciclado para
generar energía auto sostenible
AMBITO DE APLICACIÓN
Busca tu creatividadyelaborandotupágina,grandiseñadorserás
ACTITUDINAL
30%
PROCEDIMENTAL
40%
COGNITIVO
30%
C
CR
RE
EA
AC
CI
IÓ
ÓN
N D
DE
E P
PÁ
ÁG
GI
IN
NA
AS
S W
WE
EB
B
INTRODUCCIÓN
Esta guía está diseñada para aprender los conceptos básicos necesarios para construir sus propias páginas
Web. Para quien quiera ampliar sus conocimientos se suministran también unas referencias de consulta a
otros sitios del Web.
En su confecciónse haprocuradoseguirsiempre uncriterioeminentementepráctico.Paramejorasimilarlos
conceptos tratados, se propone al final de cada apartado un ejemplo práctico.
Primeras herramientas: Para comenzar sólo son necesarios dos elementos:
 Un editor de texto. Vale cualquiera, siempre que no formatee el texto.Por ello,los más adecuados son
losmás sencillos(comoporej.,El blockde notasde).Si se utilizanprocesadorescomoel Word,se deben
guardar los ficheros como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden
provocar errores al cargarlo en el navegador.
 Un visualizador o navegador del Web: Netscape, MSI Explorer, Mosaic, etc.
El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente
interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos
efectuando.
Existenciertosprogramasque nosayudana automatizareste proceso,peroesmuyconvenientecomenzara
hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML

2
Método de trabajo: Con el editor de texto crearemos un fichero con el nombre que queramos (p. ej.
ejemplo1),pero que debe tener necesariamente la extensión .html (o .htm si nuestro sistema operativo no
soporta extensiones de más de tres letras).
Habrá un ficherodistintoparacadaapartado; conviene crearundirectorioespecíficoensuordenadore irlos
guardandoen él,para poderrepasar lo aprendido,aparte de que puedensernecesariosparaejecutar otros
ejemplos prácticos.
EL LENGUAJEHTML.
HTML es unlenguaje que se utilizaparala creaciónde páginasenla WWW. Por páginaentenderemosel
documentoque aparece enel visualizador.
HTML se compone de unaserie de comandos,que soninterpretadospor el visualizador,oprogramaque
utilizamosparanavegarporel WWW. En últimainstanciaesel visualizadorel que ejecutatodaslasórdenes
contenidasenel códigoHTML, de forma que un visualizadorpuedeestarcapacitadoparaunas
prestaciones,peronoparaotras. Así,podremosespecificarque unapáginatengaunaimagende fondo,o
un textoparpadeando,perosi nuestrovisualizadornoestácapacitadopara esasfunciones,nopodremos
verlas.
En estaguía se expondránloscomandosfundamentalesde HTML.
MI PRIMER DOCUMENTOHTML.
Sigalas siguientesinstruccionesatentamente;ellasle permitiráncrearundocumentoHTML en su
ordenador;este archivonoserávisible paraotrosusuariosde Internet.
Le recomiendoque cree undirectorioensuordenadorparaalmacenarlaspáginaswebque vayahaciendo
al aprender;yque practique untiempoantesde ponerpáginasenInternet.
1. Abra el editor de textos: en Windows abra el Block de Notas
2. Teclee lo siguiente:

3
<HTML>
<HEAD>
<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Mi primera pagina Web</H1></CENTER>
<HR>
Esta esmi primerapagina,aunque todaviaesmuysencilla. Comoel lenguaje HTMLno esdificil,
pronto estare en condiciones de hacer cosas mas interesantes.
 Aquí va un segundo parrafo.
</BODY>
</HTML>
3. Grabe este archivo con el nombre: ejemplo1.html
4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computador. Puede
trabajar Off-line
5. Elija "Archivo/Abrir página" en la barra de menú del navegador.
6. Seleccione el archivo ejemplo1.html que acaba de crear.
Las líneasenblancoy lasindentacionesdel textose hanpuestoparamayorclaridad,perono sonnecesarias.
De hecho,podría estartodoenunasolalínea.Lo importante esel ordencorrectode lasetiquetas.Porcierto,
una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER>
dentrode la etiqueta<H1>. Es muy importante,enestoscasos,que lasetiquetasde inicioyde cierre vayan
en el orden correcto, pues de lo contrario se producirían errores.
Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.
¡Ustedha creado suprimerdocumentoHTML!.
CARACTERÍSTICAS GENERALES DEL LENGUAJEHTML..
Marcas y atributos.
El lenguaje HTMLse estructurautilizandomarcasoetiquetasocomandos(apartir de ahora utilizaremos
indistintamente unode 3 términosparadenominaraloselementosque se estructuraHTML).La forma
general de unamarca esla de un comandoHTML encerradoentre dossignosde menory mayorcomo a
continuaciónse muestra:

4
<marca [atributos]>......................................[</marca>]
El mecanismode funcionamientode estasmarcasesmuysencillo.Cuandoel visualizadorencuentrael signo
menor(<),examinatodosloscaractereshastaque encuentrael final de lamarca - el símbolomayor(>).
Entonces,interpretael contenidode lamarca,y aplicaesapropiedadal textoque viene acontinuación.
Hay marcas que se aplicana todoel documento HTML, o sólodesde el puntoenque soninsertadashastael
final del documento.Otrasse aplicanexclusivamente aunfragmentodel texto.Enese caso,el final de la
aplicaciónse especificaconlamismamarca precedidade labarra inclinadahaciaatrás(/).
Las marcas puedencontenerde formaopcional uobligatoria,loque se denominanatributoso
modificadores.Losatributosmatizanel significadode lamarca,y que se expresande lasiguienteforma:
<marca atrib1=“valor1” atrib2=“valor2”..............>
El valorde los atributosse expresanencerradosentre comillas.
En la mayorparte de losvisualizadoresesposible omitirlascomillasycolocardirectamenteel valordel
atributo.Esta práctica.a pesarde estar extendida,noesmuyaconsejableya que noestá normalizada,yno
estasoportadapor la totalidadde losvisualizadores.
Algunosatributossóloviene definidosporsunombre (notienenvalor);sonlosatributosllamados
compactos.
Concatenacióndemarcas.
Las marcas se puedenanidaro encadenarunaa continuaciónde otra,de formaque se puedenaplicar
simultáneamentevariaspropiedadesaunamismaporciónde documento.Asíel textoencerradoenlas
marcas:

5
<MARCA1><MARCA2> Texto</MARCA2></MARCA1>
quedaafectadotantopor laspropiedadesde laMARCA1como por losde la MARCA2. Todas lasmarcas son
independientesentre sí,porloslassiguienteslíneasde códigoHTML,tiene efectosidénticos,seancuales
seanlas marcas concretas:
A pesarde que son expresionescompletamente idénticas,esrecomendable seguirel ordenlógicode la
concatenación,yaque estofacilitade formasustancial laediciónde documentosHTML.De lascuatro
opcionesanteriores,lascorrectasseríanla primerayla tercera.
CUATRO NORMAS FUNDAMENTALES
HTML es simplementetexto
Lo primeroessaberque un documentoHTML es unarchivo de textosimple,luego,se puede editarcon
cualquiereditorde textosencillo,comoel Blockde Notasde Windows.
Igualdadde mayúsculasyminúsculas.
HTML no distingue entre mayúsculasyminúsculasenlaespecificaciónde marcasysus atributos.Sin
embargo,porlegibilidad,esaconsejable codificartantomarcascomo atributosenmayúsculas.

6
No importanlostabuladores,ni los saltosde línea
Los visualizadoresnotomanencuentalastabulaciones,lossaltosde líneani losespaciosenblancoextra.
Esto tiene ventajasydesventajas.Laprincipal ventajaesque permite obtenerresultadosuniformesyde
buenapresentaciónde manerabastante fácil.
La principal desventajaesque undocumentoHTML, por lomenosse debe usarlas marcas ...o
 para evitarque quede todoel textoenunasolalínea.
Caracteres especiales
En HTML existenalgunoscaracteresque sonespecialesporque jueganunpapel dentrodel mecanismodel
funcionamientode HTML,como sucede conlossímbolosmayorque (>) y menor que (<),y otros porque en
losprimerostiemposde HTML,no formabanparte del juegode caracteresinternacionalesdel alfabeto,
como sucede conlosacentos.
Seapor losmotivosque fuere,el casoesque existenciertossímbolosque nopuedenescribirse
directamente,sinoque debensustituirseporunacadenade caracteresque el visualizadorinterpretaráde
formacorrecta. Estas cadenasde caracteres comienzansiempre porel símbolo(&) seguidode una
combinaciónde caracteresalfabéticosque tienenunsignificadoespecialenHTML. En la siguientetablase
muestracómo escribiralgunosde estoscaracteres:
Carácter especial TranscripciónHTML Comentario
Los acentos &<vocal a acentuar> acute; En la actualidadlamayoría de
losbrowserslossoportan
Símbolomenorque (<) &lt:
Símbolomayorque (>) >
La eñe ñ En la actualidadlamayoría de
losbrowserslasoportan
Espaciosenblanco  (nonbreakingspace) HTML sóloreconoce un
espacioenblancoentre
palabras

7
De maneramás general,pararepresentarsímbolosreservadososímbolosparticulares,se puede utilizarel
códigoASCIIdel símbolomediante lasintaxissiguiente:
&#código_ASCII;
ESTRUCTURA DE UN DOCUMENTOHTML.
Un documentoHTML, no es másque el textodefinidoentrelasmarcas:
<HTML>
.....................
</HTML>
Un documentoHTML siempre se compone de lassiguientes2partes:
<HTML>
<HEAD> Cabeceradel documento
</HEAD>
<BODY> Contenidodel documento
</BODY>
</HTML>
 Cabecera:Se iniciamediante el comando<HEAD>y se terminacon </HEAD>. Dentro de la cabecera hay
información del documento, que no se ve en la pantalla principal, y que precisa las características del
documento, principalmente el título del documento.

8
El título del documento se declara entre las etiquetas <TITLE> y </TITLE>. El título debe ser breve y
descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su
bookmark (o agenda de direcciones favoritas).
 Cuerpo: se inicia mediante el comando <BODY> y se termina con el comando </BODY>. Este comando
acepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carácter
imprimible.
En la práctica algunosvisualizadoresnonecesitanlasetiquetasde comienzoycierre de <HTML>, <HEAD>, y
<BODY> para interpretarundocumentoHTML. Sinembargo,cuandodiseñemosunpáginaWebdebemos
tenerencuentaa lamayoría de usuariosposibles,porloque esmuyrecomendableincluirestasmarcas.
COMANDOSBÁSICOS DE HTML
A continuaciónse describenlasmarcas básicasde HTML que se puedenincluirenel cuerpode un
documentoHTML.
Definiciónde párrafos:P
La marca sirve para separarpárrafos enHTML. Ademásde introducirunretornode carro, fuerzaun
segundoretornode carro para dejaruna líneaenblancoentre un párrafoy el siguiente.De estamaneralos
párrafosquedanmás espaciadosyel textose vuelve máslegible
En estamarca la etiquetade finesopcional.
Por defecto,el párrafode undocumentoHTML está justificadoalaizquierda.Peropodemosmodificarla
alineaciónhorizontal de unpárrafomediante el atributoALIGN de lamarca , que puede tomarlos
valoressiguientes.
 LEFT: el párrafo es justificado a la izquierda. Valor por defecto.
 CENTER: el párrafo es centrado.
 RIGHT: el párrafo es justificado a la derecha.

9
Ruptura de líneas:BR.
La marca introduce unretornode carro (o saltode línea) enel puntodel documentoenel que es
colocada.Es equivalente al puntoyaparte de un textonormal.
Esta marca esvacía de maneraque no necesitade laetiquetade finde marca.
Titulosde encabezamiento
HTML dispone de seiscabeceras,otiposde letrapredefinidosde distintotamaño,que se utilizanparamarcar
los títuloso resaltesenlas páginas.Se activancon el comando <Hn> y se desactivancon </Hn>, donde n es
un número de 1 a 6. siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al
número 1.
<H1>Nivel de encabezado1</H1>
Puede experimentarenel ejemplo anterior, cambiando el número para comprobar el efecto que se logra.
Los títulosde encabezadorequierenlamarcade fin,ysiempre provocanunsaltode línea,aunque nose le
indique.
Dando estiloal texto
Las marcas de estilode textoespecificanel tipode letra(negrita,cursiva,..),tamaño,colorque se desea
que aparezca el texto.

10
Tiposde letras
Algunasde lasmarcas que permitenespecificarlatipografíade loscaracteresson lassiguientes:
Negrita(Bold)
Cursiva(Italic)
<BLINK>Parpadeante (Blink)</BLINK>
<TT>Tamano fijo(TypeWriter)</TT>
énfasis(Emphasis)
Gran énfasis(Strong)
Subrayado (Underline)
Todas estasmarcas requierenetiquetasde comienzoyfin,yse puedenanidar.
Tamañodel texto.
Para modificarel tamañose utilizael atributoSIZEde lamarca , de la manerasiguiente:
Texto
El comando requiere laetiquetade cierre.
HTML define sietetamañosde letradistintos,siendoel tamaño3el que se adoptapor defecto.Sin
embargo,lamayoría de losnavegadorespermitenestablecercuál eslacorrespondenciareal del tamaño3.
Así, se puede hacerque el tamaño3 correspondaa unafuente Arial de 16, o a una Timesde 8.
Existendosformasde establecerel tamañode untrozode texto.
 Tamaño de texto absoluto.

11
Texto
donde argumentoesunnúmeroentre 1 y 7
 Tamaño de letra relativos.
Texto
donde argumentoesunacadenade caracteresque nos indica,conun signo+ ó -, el número
de vecesque esafuente vasermayor o menorque el tamañode lafuente pordefecto
El usode tamañosrelativosnospermite olvidarnosde cual esel tamañode letraque se estáutilizandoenel
momentoactual,porlo que,engeneral,serápreferible autilizartamañosde letraabsolutos.
Si queremosmodificarel tamañode todoel textodel documento,unaforma de hacerloseríaenglobartodo
el cuerpodel documentoenunaetiquetaconel tamañode letraque queremosutilizar.Asíescribiremos
algoparecidoa lo que sigue:
<HTML>
<HEAD>
...........
</HEAD>
<BODY>
........
(contenidodel documento)
.......
</BODY>
</HTML>
Sinembargo,hayotra forma de hacerlomás elegante ylegible,utilizandolasiguiente etiqueta:
<BASEFONTSIZE="tamaño">

12
Este etiquetapuede situarseencualquierlugardel documento.Sinembargo,comose tratade unaetiqueta
que afectaa todoel documento,paramantenerlalegibilidadlomáslógicoescolocarloenlacabecera.
Si fijamosuntamaño de letrabásicodistintodel 3,debemostenerencuentaque esposibleque algunode
lostamañosrelativosnopuedallevarse acabo,puestoque se sale de loslímitesespecificados.
Coloresdel texto.
Para dar color a un textose utilizael comandosiguiente:
Texto
Objetivo
1. Construir las llamadas pirámides holográficas en láminas de acetato DIN-A4 de forma sencilla y
rápida (en pocos minutos). Se pueden hacer de diferentes tamaños. Las pequeñas sirven para
teléfonos móviles y las grandes para tablets y ordenadores portátiles.
2. Explicarel fundamentode laimagenholográficaque se forma.
3. Modo de obtenerenuna láminade DIN-A4:a) ocho pirámidespequeñas,b) cuatromedianasyc)
dos grandes.
4. Construirunvídeopara verenesta pirámide.
Material
Láminasde acetato transparente DIN-A4que se vendenenlaspapelerías.Puedenserde poco
espesorparatransparencias yde mayorespesorpara tapasdeencuadernar.

13
Tijeras.Rotuladorpermanente.Cintaadhesiva.Algodón.Alcohol.
Método
1. Modo de obteneren una lámina de acetato DIN-A4, una pirámide de cualquiertamaño enpocos
minutos.
Se divide uncírculo (de radioentre 6 y 12 cm) en sectoresde 60º y seleccionamos4contiguos.
Sobre la circunferencia exterior se dibujan las líneas que unen los arcos de los 4 sectores. Los 4
triángulos equiláteros que se forman corresponden a los 4 lados de la pirámide (Fig.1 a). Y sobre una
circunferenciainteriorse dibujanlaslíneasque unenlosarcosde los4 sectores,paraformar labase de
la pirámide invertida que se colocará sobre el móvil (Fig. 1 b).
El acetato se pone sobre la Fig. 1 b), se sujeta con cinta adhesiva para que no se mueva y se
señala con rotulador permanente por las líneas marcadas.

14
Se separael acetato y se recorta por las líneascontinuasrojas, tambiénse puede recortarpor
la circunferencia exterior para alargar un poco la pirámide.
Se doblaporlaslíneasdiscontinuas,primeroporlamitad,luegoporel mediode lasdosmitades
y se unenlos ladossueltoscon cinta adhesiva(Fig.2 a). Ponemoslasfigurasrecortadas enpapel para
que se vea mejor.
La base que se quedaunidaa uno de los sectoresse dobla(Fig.2 b) y como quedaparte fuera
del cuadrado,esta parte se puede usar para sujetarla pirámide al móvil mediante unagoma(Fig.2 c).
Si no se necesita mover el móvil se puede dejar la pirámide sin base.
En la Fig. 3 a) se muestra como queda la pirámide en acetato gruesoy en la Fig. 3 b) en acetato fino.
Para quitar la señal de rotulador se puede usar un algodón mojado en alcohol.

15
Al ponerla pirámide invertidasobre unteléfonomóvil conunvídeode YouTube como “Hologramade
Smartphone para Pirámide” se pueden ver las Fig. 4 a) y b)
2. Fundamentode la imagenholográfica que se forma
El pezo el pájaroque vemosflotandoenel aireesel reflejoenlaparedde lapirámidede loque
hay en lapantalla.Nosda la sensaciónde veren tresdimensiones,perose tratade una ilusiónóptica,
ya que son imágenes en 2D.
Es similar a lo que se usa para hacer aparecer y desaparecer un ángel en un belén. El ángel se
sitúaenuna caja negracon una bombilla.Al miraraun cristal girado45º vemosel reflejodel ángelque
aparece en el interior de la cueva, con tenue iluminación, al encender la bombilla.
3. a) Modo de obtenerocho pirámidesenuna lámina de DIN-A4
Utilizamostriángulosequiláterosde 6cm de ladosobre papel mm, de la formaque se muestra
en la Fig. 5 a). La altura del triángulo tiene 5,2 cm. La pirámide que obtenemos con cuatro de estos
triángulostiene de anchura 10,4 cm y de altura 9 cm. Como lo permite laláminaDIN-A4 (29,7x21 cm)

16
los dos triángulos superiores se alargan con la forma de la circunferencia de 6 cm de radio (Fig. 5 b).
Esta figuralausamosde plantillaparalas8 pirámidesdispuestascomose muestraentamañoreducido
en la Fig. 5 c).

17
Las pirámidesse formancomo se explicóconen la pág. 2.
En este casolaparte superiorizquierdadelacetatose pone
sobre la Fig.5 b), se sujetacon cinta adhesivaparaque no
se mueva y se señala con rotulador permanente por las
líneas marcadas.
Se separa el acetato y se recorta por las líneas continuas
rojas. Se dobla por las líneas discontinuas, primero por la
mitad,luegoporenmediode lasdosmitades yse unenlos
lados sueltos con cinta adhesiva (Fig. 2 a).
Así sucesivamente se van obteniendo las otras siete
pirámides.
b) Modo de obtenercuatro pirámidesenuna lámina de
DIN-A4
Utilizamostriángulosequiláterosde 8,5 cm de ladoy 7,36 cm de altura sobre papel mm, como
se muestraenla Fig.6 a). La pirámide que obtenemosconcuatro de estostriángulostiene de anchura
14,72 cm y de altura 13,25 cm. Esta figura la usamosde plantillaparalas 4 pirámidesdispuestasenla
lámina DIN-A4 (29,7x21 cm) como se muestra en tamaño reducido en la Fig. 6 b). Como lo permite la
lámina los triángulos superiores se alargan con la forma de la circunferencia de 8,5 cm de radio.

18
c) Modo de obtenerdos pirámidesen una lámina de DIN-A4:
Como se puede ver en la página siguiente se obtienen dos pirámides que ocupan toda la hoja
DIN-A4 (29,7x21 cm), hoja que se pueda usar de plantilla. Los bordes de esta figura no salen al
imprimirla,porloque hayque prolongarlascorrespondienteslíneasparaque salgala figuracompleta.
Utilizamostriángulosequiláterosde 12 cm de lado y 10,4 cm de altura sobre papel mm.
Se observa que estos triángulos tienen de lado el doble que en el caso a). Así la pirámide que
obtenemos con cuatro de estos triángulos tiene de anchura 20,8 cm y de altura 18 cm. Lógicamente,
estas medidas son el doble que en el caso a).
Comolopermite lalámina,lostriángulossuperioresse alarganconlaformade lacircunferencia
de 12 cm de radio.
En todosloscasosusamospapel mmparaque salganlomejorposiblelasfiguras,perosepuede
hacer en cualquier tipo de papel.
A continuaciónmostramosuna fotografíade las tres pirámidesformadascon triángulos de 6, 8,5 y 12
cm de lado.

19
4. Construcción de un vídeopara pirámide holográfica
Se ha grabado un ciclode la danza de 12 péndulos,correspondiente a: VI-DECF04 4:
Ej. 1º DosciclosN=30 T=60, con poca luzy fondooscuro.
(Hacer clicenlos recuadrospara accedera Internet).
El ciclo de la danza dura 60 s. El periodo mayor de los péndulos es de 2 s, por lo que hace 30
oscilacionesen60s.Los siguientesonce pénduloshacenunnúmeroconsecutivode oscilaciones,osea,
31, 32, … hasta 41 oscilacionesen 60 s. La explicación más completa sobre esta danza está en el pdf:
“La danza de los péndulos”.
Con un editorse ha repetido4 veceseste vídeo.Cada imagense ve por reflexiónencada uno
de los lados de la pirámide holográfica. Este vídeo está en YouTube, le llamamos VIDEC F05 2:
Holograma piramidal. Danza de péndulos.
Se muestranvariasimágenesde este vídeo.

Formato de guia undecimo sistemas

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Similar a Formato de guia undecimo sistemas

Similar a Formato de guia undecimo sistemas (20)

Último

Último (20)

Formato de guia undecimo sistemas