Scribd
Cargar
106 vistas35 páginas

HTML DOM Javascript

El documento describe las tecnologías para crear páginas web dinámicas como HTML, CSS, JavaScript, Java y Flash. Explica que estas tecnologías permiten actualizar contenido en tiempo real, incrustar animaciones y aplicaciones interactivas, y desarrollar sitios web con funcionalidad cliente-servidor. También proporciona ejemplos de cómo utilizar estas tecnologías para agregar contenido dinámico a las páginas web.

Cargado por

Paty Zanada
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
106 vistas35 páginas

HTML DOM Javascript

El documento describe las tecnologías para crear páginas web dinámicas como HTML, CSS, JavaScript, Java y Flash. Explica que estas tecnologías permiten actualizar contenido en tiempo real, incrustar animaciones y aplicaciones interactivas, y desarrollar sitios web con funcionalidad cliente-servidor. También proporciona ejemplos de cómo utilizar estas tecnologías para agregar contenido dinámico a las páginas web.

Cargado por

Paty Zanada
Derechos de autor
© Attribution Non-Commercial (BY-NC)
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 35

HTML Dinmico (introduccin)

Elementos estndar (multiplataforma), independientes del navegador:

HTML + DOM + JavaScript


<html> ... </html> window.document, ... <script> ... </script>

DHTML: Es un trmino de marketing, empleado por


Netscape y Microsoft, para describir las tecnologas soportadas en la version 4 de sus respectivos navegadores. Y por ello tiene una gran dependencia con el navegador que emplemos.

Julio 2003, 1

HTML Dinmico (Cliente)

Capas + Estilos
<div> ... </div> css

Elementos incorporados en los propios navegadores, y por tanto no es necesario descargarse ningn software.

Flash
<object> ... </object>

Java
<object> ... </object>

VRML
<object> ... </object>

Elementos externos a los navegadores, que son incrustados en las pginas web (<object>). Para su funcionanmiento en una pgina web necesitan de un software especial o plugin.
Julio 2003, 2

HTML Dinmico (Ejemplo: VRML)


Lenguaje de Modelado para Realidad Virtual. Creacin de
mundos virtuales, objetos 3D y escenarios 3D, posibilitando la interaccin con los objetos, y movimiento del espectador

EJEMPLO

http://www.canoma.com/vrml http://web3d.about.com/

http://www.cai.com/cosmo/

http://www.web3d.org

Julio 2003, 3

Nuevas Tecnologas: Flash, etc.


Programas de edicin de animaciones, que permiten desarrollar fcilmente ficheros que se pueden incrustar en una pgina Web. Ejemplo Toda la programacin se realiza de forma visual (arrastrando objetos, etc.). El cdigo resultante es especfico de cada producto y se requiere un plugg-in en el navegador para poder interpretarlo.

Mostrar fichero flash


Julio 2003, 4

HTML Dinmico (Ejemplo: FLASH)


web.

Flash: Creacin y diseo de animaciones en una pgina

http://www.plusmedia.es/ http://www.flash-es.net/topten/topten.html http://www.programatium.com/flash/

http://www.macromedia.com

Julio 2003, 5

JAVA. Ejemplo de Aplicacin Cliente Servidor

http://grupos.unican.es/ai/meteo
Julio 2003, 6

HTML Dinmico (Servidor)


?

El acceso a informacin que cambia en el tiempo, requiere un esquema de programacin cliente/servidor.

http://www.alsa.es

Pgina web de AIMet


Julio 2003, 7

Aplicaciones cliente / servidor


Cuando un servidor web recibe una peticin de una pgina HTML simple, solamente se trata de encontrar el archivo adecuado y devolverlo. Se trata de contenido esttico. Actualmente la gran parte de de las pginas web son de contenido dinmico, debido a que presentan informacin que cambia con el tiempo. Podemos querer que en funcin de la fecha, hora, pas o identificacin del ususario la respuesta a esta peticin sea diferente. Tambin es muy frecuente encontrar pginas web que muestran informacin originada en una base de datos.

Julio 2003, 8

Tecnologa Java
?
?

Java es un potente lenguaje de


programacin orientado a objetos. Todo el entorno de desarrollo (SDK) para crear ficheros .class con cdigo pseudocompilado para intrpretes Java. Los programas son compilados en ficheros pseudo-ejecutables que se pueden ser interpretados:
(aplicaciones) mquina virtual, o (applets) plug-in de un navegador Web.

Independencia de plataforma
(UNIX, Windows, Mac,...).

Orientado a objetos
(Obligado a implementar).

Seguridad y confianza:
lenguaje, compilador, interprete

Simplicidad:
gestin automtica de basura.

Estndar. Computacin distribuida. Clases" potentes para desarrollo.


(GUI,NET,BD)

Tiene reglas estrictas sobre cmo declarar y utilizar variables.


(control estricto de tipos)

Generacin rpida de cdigo. Documentacin y Mantenimiento. Rendimiento????.

JAVA no es slo un Lenguaje de Programacin, JAVA es adems un conjunto de herramientas avanzadas: JAVA es una Tecnologa
Julio 2003, 9

HTML Dinmico (Ejemplo: JAVA)


Su principal fundamento es, que todo programa, puede ejecutarse, sin ser modificado, en cualquier plataforma.

Java: Lenguaje de programacin desarrollado para la Web.

http://java.sun.com/
Julio 2003, 10

Tecnologas Actuales Java

technologies:

JavaTM

J2SETM , J2EETM , J2METM, JAX XML.


SDK JRE

(Standard Development Kit)

(Java RunTime Enviroment)

Julio 2003, 11

Elementos de Desarrollo para Java


Java 1.0
212 Clases, 8 paquetes

Para trabajar con Java 1.0 o Java 1.1 Java Development Kit para la versin (JDK) Para trabajar con Java 1.2 (Renombrado como Java 2) Software Development Kit(SDK) o ms concreto: Java 2 SDK, Standard Edition Ver. 1.2, ...

Java 1.1
504 Clases, 23 paquetes Mejopras en el rendimiento de la VM

Java 1.2
1520 Clases, 59 paquetes Plataforma Java 2.0

Java Runtime Environment (JRE)


Contiene todo lo necesario para ejecutar programas Java pero no para desarrollarlos

Java 1.4.1 (Beta), Julio 2002

El lenguaje de programacin Java: Lenguaje de programacin.


Un lenguaje con una sintaxis similar a C, orientado a Objetos Evitando las caractersticas complejas que han caracterizado a otros lenguajes como C++

La mquina virtual Java (JVM): Hardware/Software (habitual).


Es la parte imprescindible para poder ejecutar programas Java Sun: Solaris, Linux y Windows, Tambin para Mac, UnixPalm OS A pesar de ser un intrprete, la VM tiene un buen rendimiento. JIT Compiler (Just-In-Time compilers). Propio de la Mquina Virtual Bytecodes convertidos instantneamente en cdigo nativo de la plataforma correspondiente Mejora en la velocidad de ejecucin Hotspot => Buena implantacin de JIT Julio 2003, 12

Ejemplo de un Applet JAVA


MiApplet.java import java.applet.*; import java.awt.*; public class MiApplet extends Applet { public void paint (Graphics g){ g.drawLine(1,1,50,50); g.fillOval(40,40,20,20); }}

EjemploApplet.html <html><head></head><body> <applet code="MiApplet.class" width="100" height="100"> </body></html>

Ver Ejemplo
Julio 2003, 13

Programacin: JavaScript vs Java


?
? ?

JavaScript es un lenguaje simple


para usos sencillos. Es relativamente fcil de utilizar. No es necesario ningn Kit de desarrollo, ya que slo se precisa escribir scripts. Los scripts se insertan directamente en el cdigo HTML, por lo que no hay necesidad de compilarlo. Est basado en objetos, que pueden utilzarse en un script. Es muy poco restrictivo en cuanto a la declaracin y uso de variables.

?
? ?

Java es un potente lenguje de


programacin orientado a objetos. Es complicado de utilizar. Necesita JDK para crear ficheros .class con cdigopseudocompilado para intrpretes Java. Los programas son compilados en ficheros ejecutables o en applets que se pueden incrustar en pginas Web. Es un completo lenguaje de programacin orientada a objetos. Tiene reglas estrictas sobre cmo declarar y utilizar variables.

? ?

? ?

Ambos lenguajes son independientes de plataforma y sus programas pueden ejecutarse sobre Internet, en una pgina Web.
Julio 2003, 14

Otras Tecnologas Web .Net (Microsoft)

Julio 2003, 15

Hojas de estilo CSS


Con el HTML se intent desde un principio la definicin de estilos lgicos que se centrasen ms en el contenido de la informacin que en su presentacin. El gran xito de Internet motiv una evolucin del HTML centrada en mejorar su presentacin. Hemos llegado a un HTML demasiado complejo para sus objetivos iniciales y en muchos casos incompatible entre los principales navegadores. Las hojas de estilo vienen a intentar volver a separar en un documento el contenido del estilo fsico. CSS son las siglas de "Cascade StyleSheet" y se trata de una especificacin sobre los estilos fsicos aplicables a un documento HTML, trata de dar la separacin definitiva de la estructura y la presentacin del documento. La finalidad de las hojas de estilo es crear unos estilos fsicos, separados de las etiquetas HTML, y aplicarlos en los bloques de texto en los que se quieran aplicar, en lugar de cmo parmetros de las etiquetas.

Julio 2003, 16

Aplicacin
Tenemos varias posibilidades para definir un estilo: 1. Directamente en la etiqueta en la que queremos usarlo. 2. Definirlo globalmente para toda la pgina html. 1. Directamente en la etiqueta en la que queremos usarlo: <ETIQUETA STYLE=propiedad1:valor;....;propiedad2:valor;>....</ETIQUETA>

<HTML> <HEAD> <TITLE>ejemplo1</TITLE> </HEAD> <BODY> <P STYLE=color:blue;font-size:18pt;> Este p&aacute;rrafo tiene aplicado un estilo <P> y este otro no. </BODY> </HTML>
Julio 2003, 17

Aplicacin
2. Para definir una hoja de estilos de forma global empleamos la etiqueta <STYLE> ... </STYLE> que debe estar colocada en la cabecera del documento.
<STYLE TYPE="text/css"> <! Etiqueta1:{propiedad1:valor;...propiedadn:valor} /* podemos introducir comentarios */ ... Etiquetam:{propiedad1:valor;...} //--> </STYLE>

<HTML> <HEAD> <TITLE>ejemplo3</TITLE> <STYLE> <!-P {font-family:Verdana;color=green} B {color=blue} --> </STYLE> </HEAD> <BODY> <P>Fuente de estilo Verdana y color verde, la <B> negrita </B> en azul </BODY> </HTML>
Julio 2003, 18

Aplicacin
Podemos definir el estilo en un fichero externo de texto con la extensin .css y luego referenciarlo desde el propio documento HTML, lo haremos dentro de la cabecera del documento con la etiqueta: <LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css">
/* Fichero estilo1.css */ <!-P {font-family:Verdana;color=green} B {color=blue} --> <HTML> <HEAD> <TITLE>ejemplo3</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo1.css"> </HEAD> <BODY> <P>Fuente de estilo Verdana y color azul, la <B> negrita </B> en verde </BODY> </HTML>

Julio 2003, 19

Herencia de estilos
Las etiquetas de un documento HTML estan organizadas de manera que unas engloban a otras. Esta organizacin permite una relacin padre-hijo de manera que los estilos definidos para etiquetas padres sern heredados por los hijos. Sin embargo si tenemos definido un estilo para una etiqueta "padre", podremos definir un estilo distinto para una etiqueta "hija", el cual prevalece sobre el heredado.
<HTML> <HEAD><TITLE>Ejemplo4</TITLE> <STYLE> <!-P {font-family:Verdana; color=green} B {color=blue} --> </STYLE> </HEAD> <BODY> <P><I>La letra cursiva hereda el estilo del p&aacute;rrafo</I> mientras que <B>la negrita tiene su estilo propio</B> </BODY> </HTML>
Julio 2003, 20

Clases
Una clase es una definicin de estilo que en principio no est asociado a alguna etiqueta HTML, pero que podemos asociar, en el documento, a etiquetas concretas. Definimos la clase como un estilo ms, de la forma: .Nombre_de_la_Clase {propiedad1:valor;propiedad2:valor;...} Para aplicar el estilo de una clase a una etiqueta concreta, utilizaremos el parmetro CLASS <etiqueta CLASS="Nombre_de_la_Clase">....</etiqueta>
<HTML><HEAD> <TITLE>ejemplo7</TITLE> <STYLE TYPE="text/css"> <!-BODY {font-family:Verdana; color=blue;} B,P {color=red;} .Baqua {color=aqua;} --> </STYLE> </HEAD><BODY> El texto est&aacute; escrito en azul <P>los p&aacute;rrafos en rojo</P>as&iacute; como <B> la negrita </B>, <B CLASS="Baqua">pero en esta otra negrita estoy aplicando una clase.</B> </BODY></HTML>
Julio 2003, 21

Propiedades
Propiedades de las fuentes
font-family
Arial, Courier... | sans-serif

font-style
normal |italic |bold

font-weight
100 | 200... 400 |... 900

font-size
XX unidades | %

Propiedades del texto


text-transform
uppercase | lowercase| none | capitalize

text-align
left | right |center | justify

text-decoration
underline | overline | line-throug | blink | none

text-indent
XX unidades | % | 0

Propiedades de los colores y los fondos


color
red, blue... | RGB

background-color
transparent | red, blue... | RGB

background-image
none | url("direccion")

aqua, black, blue, fucshia, gray, green, lime, marron, navy, olive, purple, red, silver, teal, white y yellow

Propiedades de mrgenes y padding


margin-top, margin-botton, margin-left, margin-right, margin
XX unidades | % | auto | 0

padding-top, padding-botton, padding-left, padding-right, padding


XX unidades | %
Julio 2003, 22

Ejemplo de hojas de estilo I


<HTML> <HEAD><TITLE>ejemplo5</title> <LINK REL="stylesheet" TYPE="text/css" HREF="estilo2.css"> <STYLE> <!-TD B {color=olive} UL B {color=purple} --> </STYLE></HEAD><BODY> Texto normal <B>y texto en negrita</B>, segn el estilo que hemos importado. <UL> <LI>Elemento 1 <LI>Elemento 2 <LI><B>Elemento 3 en negrita</B> </UL> <TABLE BORDER="1"> <TR><TD>Celda (1,1)</TD><TD>Celda (1,2)</TD></TR> <TR><TD><B>Celda (2,1) en negrita</B></TD> <TD>Celda (1,2)</TD></TR> </TABLE> </BODY></HTML>
Julio 2003, 23

/*fichero estilo2.css */ <!-/* estilo para el documento */ BODY {font-family:Verdana,Arial; color=blue} /* estilos para otras etiquetas */ B,TD {color=red} -->

Ejemplo de hojas de estilo II


La etiqueta A,
A:link {propiedad1:valor;propiedad2:valor;...} A:visited {propiedad1:valor;propiedad2:valor;...} A:active {propiedad1:valor;propiedad2:valor;...} A:hover {propiedad1:valor;propiedad2:valor;...} <HTML> <HEAD> <TITLE>ejemplo6</TITLE> <STYLE TYPE="TEXT/CSS"> <!-A:link {color:#0000ff;} A:visited {color:#00ff00;} A:active {color:#cccccc;} A:hover {color:#f3fe1e;} --> </STYLE> <BODY> <P>Un <a href="http://www.unican.es"> enlace </A> de prueba </BODY></HTML>
Julio 2003, 24

Ejemplos de hojas de estilos III


/* fichero de estilo */ P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : #666666; } BODY { background-color : #006600; font-family : arial; color : White; }
Julio 2003, 25

Ejemplo de estilos IV

Julio 2003, 26

HTML Dinmico (Ejemplo: CAPAS)


?

Inclusin de capas (documentos independientes incluidos en el propio documento) de posicionamiento absoluto, permite dar dinamismo a las pginas Web. <DIV ID="mylayer" STYLE="postition:absolute;..."> <A HREF="pagina.html">Enlace</A> ponemos algo de texto<BR> ahora una imagen <IMG SRC="image.gif"> y mas texto </DIV> width:300px height:300px left:300px top:300px z-index:1 Visibility:hidden (visible)
var layerRef="", styleSwitch=""; function init(){ if (navigator.appName == "Netscape") { var layerRef="document.layers"; var styleSwitch=""; }else{ var layerRef="document.all"; var styleSwitch=".style"; }}

Netscape: IE:

document.layers["ID"].visibility document.all["ID"].style.visibility

document.getElementById("ID")
Julio 2003, 27

Teniendo en cuenta el tipo de navegador


var layerRef="", styleSwitch=""; function init(){ if (navigator.appName == "Netscape") { var layerRef="document.layers"; var styleSwitch=""; }else{ var layerRef="document.all"; var styleSwitch=".style"; }}

n = (document.layers) ? 1:0 ie = (document.all) ? 1:0 n6 = (document.getElementById) ? 1:0 function show() { if (n) document.uno.visibility = "show" if (n6) document.getElementById('uno').style.visibility = "visible" if (ie) uno.style.visibility = "visible" }
Julio 2003, 28

HTML Dinmico (Ejemplo: CAPAS) II

Ejemplo Perros

Ejemplo Mosca
sub

Julio 2003, 29

Ejemplo de Capas
<html> <head> <title>Ejemplo Capas - Curso JavaScript</title> </head>

<body> Pagina ejemplo de capas <div id="c1" style="position:absolute; left:245px; top:168px; width:157px; height:151px; z-index:1; visibility: visible"> <img src="imagenes/perrito-marron.jpg"> Esta es la primera capa, la del perro marron </div> </body> </html>

Julio 2003, 30

Ejemplo de capas (con estilos)


<html> <head> <title>Ejemplo Capas - Curso JavaScript</title> <STYLE TYPE="text/css"> #c1 {background-color:#66CCFF; width:150px; height:150px; border-width:5px; border-style:ridge; padding:5% } </STYLE> </head> <body> Pagina ejemplo de capas <div id="c1" style="position:absolute; left:250px; top:150px; z-index:1; visibility: visible;"> <img src="imagenes/perrito-marron.jpg" width="157" height="136"> Esta es la primera capa, la del perro marron </div> </body> </html>
Julio 2003, 31

Ejemplo Simple: Mostrando y Ocultando Capas

Ejemplo Simple de Capas

Julio 2003, 32

Mostrando y Ocultando Capas (Cdigo, IE)


<html> <head> <title>Ejemplo Capas - Curso JavaScript</title> </head> <body bgcolor="#FFFFFF"> <div id="capamarron" style="position:absolute; width:157px; height:151px; z-index:1; left: 165px; top: 138px; visibility: hidden"> <img src="imagenes/perrito-marron.jpg" width="223" height="275"> Esta es la primera capa, la del perro marron </div> <div id="capanegro" style="position:absolute; width:305px; height:217px; z-index:2; left: 214px; top: 161px; visibility: hidden"> <img src="imagenes/perrito-negro.jpg" width="306" height="231"> Esta es la segunda capa, la del perro negro </div> <input type="button" value="capa1" onMouseOver="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='hidden';" onMouseDown="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='visible';"> <input type="button" value="capa2" onMouseOver="document.all['capanegro'].style.visibility='hidden'; document.all['capamarron'].style.visibility='visible';" onMouseDown="document.all['capanegro'].style.visibility='visible'; document.all['capamarron'].style.visibility='visible';"> </body> </html>

Julio 2003, 33

HTML Dinmico (JavaScript + capas)


?

JavaScript es un lenguaje de programacin que permite aadir dinamismo a las pginas Web. Para ello se utiliza una marca especial

<script> ... </script>


Pgina con diversos scripts de JavaScript Ejemplo. La inclusin de capas en HTML, que permite superponer, ocultar y mover elementos de forma interactiva. Controlando capas desde un formulario Controlando capas con eventos del ratn
?

El acceso a bases de datos permite tener la informacin actualizada, y requiere un esquema de programacin cliente/servidor. Pgina web de AIMet

Julio 2003, 34

Capas en Movimiento
<html><head> <SCRIPT> var izquierda=0; function corre() { object = document.getElementById("c1").style; if (izquierda < 650) { izquierda += 10; object.left = izquierda; setTimeout("corre()",10) } } </SCRIPT> <STYLE TYPE="text/css"> #c1 {position:relative; top:50px; left:15px; background-color:#990000;width:200px; z-index=0; }</STYLE> </head> <body> Para mover una CAPA<br> <input type="button" value="Pulsa" onclick="corre()"> <DIV ID="c1" > <img src="corredor.gif" width="114" height="134" alt="" border="0"> </DIV> </body></html> Julio 2003, 35

También podría gustarte