Unidad 11.

JavaScript
En este tema vamos a ver qu son los lenguajes de script y cmo hacer llamadas a JavaScript. No se pretende ensear Javascript ya que esto necesitar a un curso entero

!enguajes de script

!os lenguajes de script" tam#in conocidos como lenguajes de macros" son lenguajes que slo $uncionan en las aplicaciones para las que han sido creados. Son lenguajes para ser interpretados" no para ser compilados" por lo que no generan ning%n archivo ejecuta#le. !as aplicaciones se encargan de ejecutar los programas mientras van interpretando el cdigo" por lo que la ejecucin puede resultar m&s lenta que en el caso de estar ejecutando un archivo ejecuta#le

!os lenguajes de script" al igual que el resto de lenguajes de programacin" disponen de varia#les" mtodos y o#jetos prede$inidos" pero un menor control so#re los tipos de varia#les 'enteros" cadenas de caracteres" etc.(" por lo que es posi#le asignar valores de distintos tipos a una misma varia#le" lo que puede producir errores y di$icultar la depuracin de los programas. !os lenguajes de script pretenden ser sencillos a la hora de programar. )l mismo tiempo" lo normal es que los programas no sean muy e*tensos" ni tampoco muy complicados +os de los lenguajes de script m&s utili,ados hoy en d a son JavaScript y VBScript. El lenguaje -.Script $ue creado por /icroso$t" por lo que puede ser interpretado por todas sus aplicaciones. 0ero no es recomenda#le utili,ar este lenguaje de script en nuestras p&ginas" ya que solamente podr a ser interpretado por el navegador 1nternet E*plorer" y hay muchos usuarios que utili,an navegadores di$erentes. Es m&s recomenda#le utili,ar el lenguaje JavaScript" creado por Netscape" ya que puede ser reconocido por un mayor n%mero de navegadores. !a utili,acin de JavaScript permite variar din&micamente el contenido del documento" validar $ormularios" etc

0or ejemplo" podemos crear $unciones que permitan mostrar y ocultar capas. Situa el puntero so#re la imagen del gato para ver lo que ocurre

Ests visualizando una capa que estaba oculta. Si dejas de situar el puntero sobre la imagen, la capa volver a ocultarse.

Si utili,&ramos un editor visual" como +ream2eaver" podr amos insertar algunos comportamientos de este tipo sin la necesidad de escri#ir ni una sola l nea de cdigo JavaScript. Esta aplicacin permite insertar comportamientos a travs de men%s y paneles" generando autom&ticamente el cdigo JavaScript necesario.

JavaScript 3script4

0ara insertar $unciones JavaScript en un documento" es necesario insertar las etiquetas <script> y < script> dentro de la ca#ecera 'entre las etiquetas <!ead> y < !ead>( o dentro del cuerpo de la p&gina. ) travs del atri#uto language hay que especi$icar el lenguaje de script" que en este caso ser& JavaScript. Entre las etiquetas <script> y < script> ha#r& que insertar las $unciones JavaScript. Si un navegador no reconoce la etiqueta <script>" mostrar& el cdigo de las $unciones que sta contenga. 0ara que esto no ocurra" las $unciones se insertan como comentarios" entre <"## y ##>. En las $unciones no hay que insertar caracteres especiales" de#ido a un $allo de Netscape corremos el riesgo de que al ejecutarse la $uncin en un ordenador con un juego de caracteres distinto se produ,can $allos. 0or ejemplo" podr amos insertar el siguiente cdigo5

<script> <"## $unction %uestramensaje&' ( alert&)Esto es un mensaje, activado por una $unci*n javascript)'+ , ##> < script>
!a $uncin que hemos insertado es una $uncin muy sencilla" que muestra un mensaje de alerta. Si dentro del documento insert&ramos el siguiente cdigo5

<img src-"imagenes/logo_animales.gif" on.lic/-"Muestramensaje">

6#tendr amos una imagen como la que aparece a continuacin" que al ser pulsada llama a la $uncin. 0ulsa so#re la imagen para ver lo que ocurre.

) travs del atri#uto on.lic/ hemos de$inido la $uncin que ser& llamada al pulsarse so#re el o#jeto. 0odemos utili,ar muchos otros atri#utos para llamar a $unciones" como pueden ser on0bl.lic/ 'al hacer do#le clic(" on%ouse1ver 'mientras el cursor este encima( o on%ouse1ut 'cuando el cursor deje de estar encima(.

Unidad 12. Hojas de estilo

En este tema vamos a ver qu son las !ojas de estilo" y cmo tra#ajar con ellas

1ntroduccin
!os estilos .SS '7ascading Style Sheets( son hojas de estilo de actuali,acin autom&tica Se usan principalmente para de$inir estilos que luego se aplicar&n a las p&ginas de nuestro sitio" incluso a veces permiten de$inir caracter sticas que no permiten de$inir los estilos 89/!" como el color de $ondo para el te*to por ejemplo. )l estar la de$inicin de los estilos en un archivo e*terno a las p&ginas y com%n a todas las p&ginas del sitio 'es recomenda#le( el aspecto de nuestras p&ginas ser& m&s homogneo y adem&s podremos cam#iar ese aspecto de manera segura e inmediata cam#iando %nicamente la hoja de estilos. Se pueden de$inir estilos independientes o estilos asociados a determinadas etiquetas por ejemplo a la etiqueta <a> 'que corresponde a los hiperenlaces(. +e este modo" todos los hiperenlaces de la p&gina o del sitio adquirir an la apariencia de$inida en ese estilo y con un slo cam#io en la hoja de estilos podemos cam#iar de golpe el estilo de todos los enlaces en todas las p&ginas vinculadas a este estilo. El inconveniente que tiene tra#ajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran" aunque estos navegadores suelen ser versiones antiguas" por lo que ocurrir& en pocos casos. !as hojas de estilo pueden crearse con cualquier editor de te*to" como puede ser el .loc de notas" y pueden guardarse con la e*tensin 9:9.

-incular una hoja de estilo

0ara poder incluir las propiedades de una hoja de estilo en un documento" hay que vincularla a l. Un documento puede tener varias hojas de estilo vinculadas. 0ara vincular una hoja de estilo a un documento es necesario insertar la etiqueta <lin/> en el documento" entre las etiquetas <!ead> y < !ead>. Esta etiqueta no necesita etiqueta de cierre. ) travs del atri#uto !re$ se especi$ica la hoja de estilo que se va a vincular al documento
) travs del atri#uto rel se tiene que especi$icar que se est& vinculando una hoja de estilo" por lo que su valor ha de ser st2les!eet. ) travs del atri#uto t2pe se tiene que especi$icar que el archivo es de te*to" con sinta*is 7SS" por lo que su valor ha de ser te3t css.

0or ejemplo" podr amos vincular una hoja de estilo escri#iendo el siguiente cdigo.

3lin; hre$<"misestilos.txt" rel-)st2les!eet) t2pe-)te3t css) >

Sinta*is de las hojas de estilo

.omo recordars, para especi$icar las propiedades de una capa no se utilizan etiquetas normales de 45%6. 5odas las propiedades se especi$ican a trav7s del atributo st2le, 2 aparecen entre comillas dobles, con un punto 2 coma detrs de cada una. 8ara asignar los valores a las propiedades no se utiliza el s9mbolo - &igual', sino que se utiliza el s9mbolo : &dos puntos'. Esto es debido a que se est especi$icando un estilo, pero sin vincular ninguna !oja de estilo a la pgina. 8ara especi$icar las propiedades dentro de una !oja de estilo, la sinta3is es mu2 similar. En primer lugar se pone el nombre del estilo, 2 entre llaves se especi$ica la lista de propiedades &en min;sculas' que se corresponden con dic!o estilo. .ada una de estas propiedades tiene que tener un punto 2 coma detrs, 2 los valores se asignan con el s9mbolo : &dos puntos'. El nombre del estilo puede ser un nombre inventado por nosotros, o el nombre de una etiqueta 45%6. 8ara poder utilizar un nombre inventado, tiene que estar precedido por un punto, o por el nombre de una etiqueta seguida de un punto.
0or ejemplo" en una hoja de estilo podr amos tener lo siguiente5

bod2 (bac/ground#color: #006699; $ont#$amil2: Arial,Helvetica;, .mite3to ($ont#$amil2: Arial,Helvetica; $ont#size: !"x;,
Si vincul&ramos esta hoja de estilo a un documento" se aplicar an directamente las propiedades especi$icadas para la etiqueta <bod2>. En cam#io" no e*iste ninguna etiqueta <mite3to>" por lo que para aplicar este estilo a alg%n elemento de la p&gina ha#r a que indicarlo de alg%n modo. 0ara aplicar este estilo a un elemento" ha#r a que insertar el atri#uto class en su etiqueta. 0or ejemplo" para aplicar ese estilo al siguiente p&rra$o del documento

<p>texto con estilo< p>

8a#r a que escri#ir5

<p class-"mitexto">texto con estilo< p>

0ero para aplicar el estilo %nicamente a una parte del contenido de la etiqueta" como podr a ser en este caso una pala#ra del p&rra$o" ser a necesario incluir la etiqueta <span> 'que agrupa #loques" sin producir un cam#io de l nea(. 0or ejemplo" para aplicar el estilo %nicamente a la pala#ra estilo" ha#r a que escri#ir5

<p>texto con <span class-"mitexto">estilo< span>< p>

!as propiedades
Vamos a ver algunas propiedades que pueden especi$icarse en los estilos, as9 como los valores que pueden tomar.
<amilia de la $uente: !a propiedad es $ont#$amil2. 0uede tomar como valor varios nom#res de $uentes" separados por comas" como pueden ser arial" !elvetica" etc. !a ventana de de$inir una $amilia de $uentes es que si el ordenador del visitante no tiene instalada la primera $uente" entonces se aplicar& la segunda" as sucesivamente hasta encontrar una de las $uentes. =rosor del te3to: !a propiedad es $ont#>eig!t. Sus valores pueden ser5 bold 'negrita(" bolder 'mas negrita(" lig!ter 'ligera( o un n%mero del 00 al 900. 5ama?o de la $uente: !a propiedad es $ont#size. 0uede tomar como valor un n%mero. Espacio entre l9neas: !a propiedad es line#!eig!t. 0uede tomar como valor un n%mero. Espacio entre caracteres: !a propiedad es letter#spacing. 0uede tomar como valor un n%mero. Estilo de la $uente: !a propiedad es $ont#st2le. 0uede tomar como valor italic" cuando se desee que el te*to apare,ca en cursiva.

0ecoraci*n de la $uente:

!a propiedad es te3t#decoration. 0uede tomar como valor none 'ninguno(" underline 'su#rayado(" line#t!roug! 'una l nea encima(" overline 'tachado( o blin/ 'parpadeo(. Si se aplica none a los hiperenlaces" puede evitarse que apare,can su#rayados. 5rans$ormar el te3to: !a propiedad es te3t#trans$orm. 0uede tomar como valor capitalize 'la inicial de cada pala#ra aparecer& en may%sculas(" uppercase 'todo en may%sculas( o lo>ercase 'todo en min%sculas(. @lineaci*n del te3to: !a propiedad es te3t#align. 0uede tomar como valor center 'centrado(" le$t 'i,quierda(" rig!t 'derecha( o justi$2 'justi$icado(. Sangrado del te3to: !a propiedad es te3t#indent. 0uede tomar como valor un n%mero. .olor: !a propiedad es color. 0uede tomar como valor un n%mero en he*adecimal. Si se aplica esta propiedad a los hiperenlaces" ser&n de este color" en lugar de los indicados por los atri#utos lin/ 'v nculo(" vlin/ 'v nculo activo(" y alin/ 'v nculo visitado( de la etiqueta <bod2>. .olor de $ondo: !a propiedad es bac/ground#color. 0uede tomar como valor un n%mero en he*adecimal.

Amagen de $ondo: !a propiedad es bac/ground#image. !a ruta y el nom#re de la imagen han de aparecer entre parntesis" despus de la pala#ra url.

%rgenes: !as propiedades son margin#top 'margen superior(" margin#rig!t 'margen derecho(" margin#bottom 'margen in$erior(" margin#le$t 'margen i,quierdo(" o margin 'los valores de los m&rgenes superior" derecho" in$erior e i,quierdo" separados por espacios(. 0ueden tomar como valor un n%mero 'cuatro n%meros separados por espacios en el caso de margin(. @nc!o de bordes: !a propiedad es border#>idt!. 0uede tomar como valor un n%mero. .olor del borde: !a propiedad es border#color. 0uede tomar como valor un n%mero en he*adecimal. No hay que olvidar" en el caso de los valores numricos" especi$icar la unidad de medida a utili,ar5 cm 'cent metros(" pt 'puntos(" p3 'p *eles(" o B 'porcentaje(. E*isten muchas otras propiedades adem&s de stas. En el tema de capas puedes consultar las propiedades que se pueden de$inir so#re ellas en las hojas de estilo ' z#inde3" visibilit2" etc.(.

Unidad 13. Pginas web dinmicas

En este tema vamos a ver qu7 son las pginas >eb dinmicas, 2 qu7 lenguajes nos permitirn crearlas. HTML dinmico
Una p&gina din&mica es una p&gina que permite al usuario interactuar con ella" y que contiene e$ectos especiales. 0ara crear una p&gina de este tipo no #asta con programar en 89/!" ya que este lenguaje es muy limitado. Es necesario com#inar 89/! con otros lenguajes" como JavaScript" -.Script" Java" )S0" 080" etc. 9am#in puede hacerse uso de capas" de animaciones =lash" de applets java y de hojas de estilo 7SS. ) la com#inacin de estos elementos se le conoce como 045%6 '89/! din&mico(.

E*iste una ancdota muy curiosa so#re +89/!

Una conocida marca" poseedora de un programa que permite >dar vida> a las p&ginas 2e#" pidi e*plicaciones a un 2e#master tras visitar su p&gina 2e#. 0ensaron que el 2e#master esta#a utili,ando su programa y ha# an compro#ado que no $igura#a como comprador en sus archivos. El 2e#master respondi que no esta#a utili,ando el programa en cuestin" sino 89/! din&mico" por lo que la empresa tuvo que disculparse por la acusacin. Esto demuestra lo que se puede llegar a hacer con 89/! din&mico

Programacin web En el tema anterior !ablamos de JavaScript 2 VBScript, dos lenguajes de programaci*n >eb.
Estos lenguajes son interpretados y ejecutados directamente por el navegador del usuario que visuali,a la p&gina" pero e*isten otros lenguajes que son interpretados por el servidor" como es el caso de @S8" 848 o JS8 'Java(. 7uando un usuario pretende visuali,ar una p&gina" el servidor ejecuta los scripts y genera otra p&gina como resultado. Esta nueva p&gina slamente contiene 89/!" y es la que visuali,a el navegador del usuario. Esto evita que se puedan producir errores al interpretar el cdigo" como ocurre con -.Script si intenta ser interpretado por un navegador que no sea 1nternet E*plorer. 6tras ventajas que proporciona programar con lenguajes interpretados por el servidor" es que los usuarios no tienen acceso al cdigo original" por lo que los programas estar&n protegidos ante plagios. )l mismo tiempo" se puede acceder a mayor n%mero de recursos almacenados en el servidor" como pueden ser #ases de datos. !os lenguajes de este tipo m&s utili,ados hoy en d a son @S8 y 848. El lenguaje @S8 ')ctive Server 0ages(" al igual que VBScript" $ue creado por /icroso$t. 7onsiste en incluir instrucciones -isual .asic Script o Jscript dentro del documento 89/!. )ctualmente se ha presentado" con algunas di$erencias en la sinta*is" una nueva versin llamada @S8.CE5" que o$rece #astantes mejoras en lo que se re$iere a posi#ilidades y rapide, de ejecucin. )S0 tiene un gran inconveniente" ya que precisa que el servidor $uncione so#re ?indo2s N9 o @AAA. El lenguaje 848 '8iperte*t 0reprocesor( permite reali,ar muchos tipos de aplicaciones 2e# gracias su gran li#rer a de $unciones y documentacin. 6$rece muchas ventajas $rente a )S0" entre ellas" que es m&s r&pido" que es m&s seguro" y que es gratuito

:/!
El lenguaje 89/! ha ido evolucionando r&pidamente" gracias" entre otras cosas" a su sencille,. 0ero este lenguaje es #astante r gido" y no nos permite hacer en nuestras p&ginas todo lo que nos gustar a" al no e*istir las etiquetas necesarias para ello. El comit ?B7 comen, a desarrollar nuevas versiones de 89/! para permitir nuevas posi#ilidades a la hora de programar" y cre el lenguaje D%6 &E3tensible %ar/up 6anguage'. )unque los navegadores a%n no soportan toda la potencia de :/!" cada ve, est& siendo m&s utili,ado" ya que aporta muchas ventajas. :/! es un lenguaje comprensi#le para las personas. !os documentos escritos en este lenguaje pueden leerse" crearse y modi$icarse de $orma sencilla" utili,ando cualquier editor de te*to. Es capa, de e*presar estructuras complejas de datos. 1ncluso estructuras de datos tan complicadas como gr&$icos pueden representarse en $orma de &r#ol. 7on :/! lo que se pretende es etiquetar e identi$icar el contenido de las p&ginas" y no pensar directamente en cmo se mostrar&n los datos. 0uede utili,arse para de$inir muchas m&s caracter sticas re$erentes al contenido de los documentos de las que permite la etiqueta <meta> de 89/!" y estos datos resultan muy %tiles para reali,ar #%squedas o $iltrar in$ormacin :/! tam#in o$rece la posi#ilidad de gestionar cualquier conjunto de caracteres internacional. Esta es una caracter stica muy %til" ya que permite incluir cualquier car&cter que se est utili,ando hoy en d a" como pueden ser caracteres en chino o en &ra#e" lo que $acilita el comercio internacional a travs de 1nternet. En realidad" :/! y 89/! son lenguajes distintos" #asados en el S=%6 &Standard =eneralized %ar/up 6anguage'. SC/! es el est&ndar internacional para la de$inicin de la estructura y el contenido de di$erentes tipos de documentos electrnicos. /ediante una +9+ '+e$inicin de 9ipo de +ocumento(" el SC/! de$ine la estructura y el contenido de cada tipo de documento. 0or ejemplo" e*iste una +9+ que de$ine cmo han de ser los documentos 89/!. 0ero no e*iste ninguna +9+ que de$ina la estructura y el contenido de un documento :/!. En realidad" :/! es una versin resumida del SC/!" que descarta aquellas partes del SC/! que raramente se utili,an. 0or ello" :/! es m&s sencillo que SC/!" y permite de$inir nuestros propios tipos de documentos" con nuestras propias etiquetas. 0or ejemplo" para insertar esto en una p&gina 2e#5

C1 01EB5 5ragic Fingdom

#u$lica%o en &s"a'a en 99( @ la venta por solo GH I &con un descuento del GJB de su precio original' 8uedes consultar el t9tulo de las canciones que inclu2e

En 89/! ha#r a que escri#ir5

<$ont color-"#006699" size-")"><b>*+ ,+-./ < b>< $ont> <b><a !re$-"tragic0ing%om.1tm"><$ont size-"2">/ragic 3ing%om< $ont>< a>< b> <br> <em><$ont color-"#445566" size-"2"><b>#u$lica%o en &s"a6ntil%e;a en 99(< b>< $ont>< em> <bloc/quote> <$ont size-"2"><b>A la venta "or solo 6 6euro; 7con un %escuento %el 08 %e su "recio original9< b>< $ont> < bloc/quote> <$ont size-"2"><a !re$-"tragic0ing%om.1tm"><b>#ue%es consultar el t6iacute;tulo %e las canciones :ue inclu;e< b>< a>< $ont>
/ientras que en :/! podr amos escri#ir5

<K3ml version-" .0"K> <cdaudio> <grupo>*o ,ou$t< grupo> <titulo>/ragic 3ing%om< titulo> <publicacion> 99(< publicacion> <precio cantidad-" 6" moneda-"euro" > <descuento porcentaje-"20" > <enlacecanciones !re$-"tragic0ing%om.1tm" > < cdaudio>