Você está na página 1de 29

INF302- Programación Web

Prof. Diego Santimateo G.


http://www.esnips.com/web/spw

Introducción
El término "hipertexto" fue acuñado por Ted Nelson en 1965, en su artículo "A File
Structure for the Complex, the Changing, and the Indeterminate", que leyó durante la
vigésima conferencia anual de la Association of Computer Machinery (ACM). No obstante, La
World Wide Web fue inventada en 1989 por un informático del CERN (Organización Europea
de Investigación Nuclear) llamado Tim Berners-Lee. Se trata de un sistema de hipertexto
para compartir información basado en Internet, concebido originalmente para servir como
herramienta de comunicación entre los científicos nucleares del CERN.

Los documentos del sistema de hipertexto necesitaban un formato que fuera


adecuado para su misión. En aquella época casi todo el mundo utilizaba TeX y PostScript,
pero éstos eran demasiado complicados teniendo en cuenta que debían ser leídos por todo
tipo de computadoras, de allí que tato el lenguaje de intercambio HTML 1, como el protocolo
de red HTTP que se diseñaron para masificar su uso se consideran realmente muy simples.

HTML son las siglas de "HyperText Mark-up Language". "Mark-up" es un término de


imprenta que significa el conjunto de instrucciones estilísticas detalladas escritas en un
manuscrito que debe ser tipografiado. Así, HTML podría ser traducido como "Lenguaje de
Formato de Documentos para Hipertexto". HTML es una aplicación de SGML, un lenguaje
muy general para definir lenguajes de formato de documentos.

En la actualidad el mundo moderno se maneja fundamentalmente mediante el


intercambio de texto en formato de lenguajes de marca e hipertexto, de allí que hayamos
propuesto este seminario para compartir con los participantes, conceptos, ideas y
tecnologías relativas al manejo de las páginas web mediante la programación.

HTML
HTML es un lenguaje de marcas, lo que significa el texto del documento está
mezclado con comandos que aportan información extra sobre el texto que delimita.
Información que el navegador interpreta para dar formato a la página que finalmente verá el
usuario. Las marca se limitan con los signos menor que ( < ) y mayor que ( > ) y afectan a
todo el texto que esta situado entre la marca de apertura y la de final, a la cual le antecede
una barra ( / ).

Iniciaremos un documento HTML con la declaración del tipo de documento DOCTYPE


que describe el dialecto HTML que se está usando y de esa manera se puede verificar si
cumple con las reglas para su formación o estructura, en cuyo caso se considera un
documento válido.

1
http://www.w3.org/MarkUp/#whatis

1
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo Descripción
<HTML> Indica que la página
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" web esta usa ese idioma y
"http://www.w3.org/TR/html4/strict.dtd"> marca los límites del
documento.
<html>
<HEAD> Es el área de
<head> definición del documento
<title>Aquí el titulo de tu página</title> HTML donde se especifica el
</head> título de la página y otra
información destinada a
<body> buscadores.
<! - - Comentario - - > <TITLE> Esta etiqueta será
utilizada para los marcadores
</body> del navegador y definirá un
nombre para tu página.
</html>
<BODY> Cuerpo o contenido
con otros elementos HTML.
*Dibujar árbol DOM

Elementos básicos HTML2


De los elementos HTM podemos distinguir aquellos identificados como de bloques los
cuales pueden contener elementos de línea.

Generalmente los elementos de línea pueden contener en la mayoría de los


casos texto normal y otros elementos de línea, sin embargo ningún elemento de
bloque. Ejemplos : a, br, code, img, span, etc.

Los elementos de bloque o contenedores generan una nueva línea (renglón) en el flujo
del texto. Por ejemplo, los navegadores generan con el elemento p un espacio visible, para
que el cambio de párrafo se distinga de un intervalo común. Estos elementos pueden
contener generalmente texto normal y elementos de línea. Algunos elementos de bloque
pueden contener también otros elementos de bloque. Los siguientes elementos
pertenecen al grupo de elementos de bloque: address | blockquote | div |fieldset | form |
h1-6 | hr | ol | p | pre | table | ul

2
http://es.selfhtml.org/html/referencia/elementos.htm

2
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>

<h1> Primera página</h1>


<a name ="arriba"><h3>Encabezados</h3></a>

<!- -Ejemplo de comentario que no es interpretado por el navegador -->

<p>Esta es un página con titular,


que tiene referencias externas e internas, también un párrafo y unos cuantos
saltos de línea.
</p>
<hr />

<p> Ejemplos de salto de l&iacute;nea <br /> en otra l&iacute;nea siguen ejemplos de
enlaces o v&iacute;nculos externos <br /> veamos:
</p>
<img src ="bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">

<TABLE BORDER="1">
<TR>
<TH>Nombre</TH>
<TH>Edad</TH>
<TH>Salario< /TH>
</TR>
<TR>
<TD>Martha</TD>
<TD>25</TD>
<TD>1236.25</TD>
</TR>
</TABLE>

<a href="otrapagina.html">Ir a otra p&aacute;gina</a><br /><br />


<a href="http://www.up.ac.pa">Ir a Sitio de la UP</a><br />
<a href="#arriba">Ir a encabezados de esta p&aacute;gina</a>

</BODY>
</HTML>

3
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

CSS
La presentación de las páginas web es administrada por las hojas de estilo en
cascada o CSS, el cual es un mecanismo que describe cómo se va a mostrar un documento
en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información
presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción
de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus
documentos.3

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más
elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a
un documento HTML o XML.

La regla tiene dos partes: un selector y la declaración. A su vez la declaración está


compuesta por una propiedad y el valor que se le asigne.

h1 {color: #ff0000;} h1 es el selector


{color: #ff0000;} es la declaración

El selector funciona como enlace entre el documento HTML o XML y el estilo,


especificando los elementos que se van a ver afectados por esa declaración. La declaración
es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1
indica que todos los elementos h1 se verán afectados por la declaración donde se establece
que la propiedad color va a tener el valor #ff0000 (rojo) para todos los elementos h1 del
documento o documentos que estén vinculados a esa hoja de estilos.

Dos de las tres formas más conocidas de dar estilo a un documento son:
• Utilizando una hoja de estilo externa que estará vinculada a un documento a través
del elemento <link>, el cual debe ir situado en la sección <head>.

<head>
<title>Hoja de Estilo Externa</title>
<link rel=”stylesheet” type=”text/css” href=”practica.css”>
</head>

• Utilizando el elemento <style>, en el interior del documento al que se le quiere dar


estilo, y que generalmente se situaría en la sección <head> . De esta forma los
estilos serán reconocidos antes de que la página se cargue por completo.

3
http://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo

4
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

<head>
<title>hoja de Estilo Interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New
Roman", serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Geneva, Arial, sans-serif;
}
</style>
</head>

A continuación ejemplificamos los tipos más utilizados de descriptores, con


comentarios explicativos en cada caso.

5
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Descripción de Selector Ejemplo Comentario


Todos los contenidos de h2
Etiqueta o elemento HTML h2 {color : #00ff00;} tendrán color verde y los td
td {font-weight: 900;} estarán resaltados tipo negrita.
Para usar una clase hay que
.unaclase {font-family: Verdana, especificarla en el elemento
sans-serif; margin-top: 8em; que se desea, así:
margin-bottom: 3em;} <p class=”unaclase”>
Varios elementos pueden
tener la misma clase.
Clase: selector abstracto
aplicable a cualquier
En este segundo ejemplo, solo
elemento. Usa un punto(.).
h3.color {color: #0000ff;} los h3 que tengan la clase
color tendrán fuente azul.
h3.otra {color: #ccddcc;} Esta es una clase para el
elemento h3, no obstante, una
misma etiqueta puede tener
varias clases.
div p { font-family: Arial, sans- Los párrafos (p)incluidos en
serif; font-size: 100%;} div tendrán las características
indicadas.

En este segundo ejemplo, los


div.xxx h1 { font-size: 100%; } h1 incluidos en los div con
Selectores contextuales
clase xxx tendrán las
características especificadas.

Las etiquetas pre dentro de la


.poeta pre {color:#ff0000;} clase poeta tendrán color
rojo.
Podemos asociar el atributo
id con un selector de
Selector identidad:usa #especial {margin: 5px 50px 5px identidad única.
numeral (#) 50px;} <p id=”especial”>
Ningún otro elemento puede
tener este id.
a:link enlace que no ha sido Se utilizan para especificar la
explorado por el usuario. a:visited se visualización de los enlaces.
refiere a los enlaces ya visitados. Las pseudoclases pueden ser
a:active enlace seleccio nado con el usadas con selectores
Pseudo clases para el ratón
contextuales o combinarse
elemento <a> a:hover enlace con el puntero del
ratón encima, pero no seleccionado con clases normales. Es
a:focus enlace con el foco del importante guardar el orden o
sistema secuencia de presentación de
estas pseudoclases.

6
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Práctica #1
Recomendamos la exploración y análisis de la web “Tutorial de CSS
comenzando con HTML y CSS”:
http://www.w3.org/Style/Examples/011/firstcss.es.html#external , en la medida que
revisa el tutorial comparta con sus compañeros y con
el facilitador sus inquietudes, hallazgos, dudas o ¿Dudas sobre border,
sugerencias. padding o margin?

Sabemos que de la exploración de la web http://www.ignside.net/man


anterior usted pudo intuir los efectos que se logran al /css/bloques.php
utilizar CSS, no obstante, quedaron dudas o
inquietudes, ya que se presentaron por primera vez
el uso de selectores que corresponden a una clase (class), así como nuevas
propiedades y valores. Para detallar más al respecto y despejar dudas le invitamos a
examinar el tutorial: http://www.ignside.net/man/css/clases.php. Lo invitamos a
compartir y hacer comentarios en http://www.esnips.com/web/spw para ir mejorando y
crear un ambiente virtual de participación e intercambio a los cuales todavía no nos
acostumbramos, de esta forma el seminario puede ir tomando ribetes no presénciales,
lo cual flexibiliza su disponibilidad de atención a las actividades que aquí le
proponemos, con miras a que obtenga el mayor beneficio posible.

Importante, aclare sus dudas sobre el posicionamiento de elementos utilizando


http://www.ignside.net/man/css/posicionamiento.php , en su práctica use las
modalidades de formato interno (no en línea) o formato externo. Preste atención a los
conceptos origen, child, parent, sibling y flow.

Práctica #2
Experimente diferentes estilos con diversidad de propiedades y valores
siguiendo: http://www.w3.org/MarkUp/Guide/Style y en casa para profundizar visite:
http://www.tierradenomadas.com/tw007.phtml

Seleccione diversas propiedades de CSS, vea su efecto y conozca las


alternativas de valores que puede emplear, usando como referencia:
http://htmlhelp.com/es/reference/css/properties.html y
http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html
¿Quiere usar varias hojas de
Practica #3
estilo en el mismo documento?
Dedique un tiempo a la maquetación con
CSS, revise y proponga un modelo o plantilla http://www.mailxmail.com/curso
para su web: /informatica/css/capitulo4.htm
• http://www.cristalab.com/tutoriales/131/com
poner-un-disenyo-de-3-columnas-en-xhtml-y-css
• http://www.tierradenomadas.com/tw003.phtml
• http://platea.pntic.mec.es/jmas/manual/html/trucospracticoscss.html

7
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

• http://www.desarrolloweb.com/articulos/2160.php

Ejemplos para disfrutar en casa:


http://pmob.co.uk/

Después de la experiencia con los recursos de las prácticas anteriores le invitamos a


elaborar una web cuyo contenido sea un resumen de lo tratado en los recursos que
hemos puesto a su disposición en las prácticas. Usted decide sobre la estructura de su
documento, así como en el estilo de presentación. Aplique las reglas que se describen a
continuación para presentar un documento XHTML.

Cuando haya finalizado su trabajo haga un breve comentario en


http://www.esnips.com/web/spw sobre su experiencia de aprendizaje e indique la URL donde
se puede acceder a su trabajo. No olvide identificarse.

XHTML
XHTML, acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje
extensible de marcado de hipertexto), es el lenguaje de marcado pensado para sustituir a
HTML como estándar para las páginas web. XHTML es la versión XML de HTML, por lo que
tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más
estrictas, de XML.4

Lo primero que debemos hacer para desarrollar un documento XHTML válido, es


indicarle al navegador el tipo de documento que va a recibir. Actualmente existen tres tipos
de documentos XHTML que podemos usar: Estricto, Transicional y Frameset. El primero de
ellos implica que el documento en su totalidad se apega al 100% de las normas, el segundo
permite omitir algunas de estas normas que aún son de uso común entre los desarrolladores.
La especificación del tipo de documento XHTML incluye las siguientes etiquetas:

<?xml version="1.0" encoding="iso-8859-1"?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Reglas básicas para elaborar un documento XHTML:


• En XHTML no puede haber elementos sin cierre. Un <p> debe cerrarse con un
</p>, un <li> debe cerrarse con un </li>, y así todos los elementos.Aquellos que
son independientes como <br>, <hr> y los <input>, deben cerrarse a si mismos de
esta forma: <br />, <hr /> y <input />
• El anidamiento de los elementos debe ser correcto, es decir, deben cerrarse en el
orden inverso que fueron abiertos. De tal forma que <div><p><strong> debe
cerrarse en el orden <strong><p><div>.
• Los nombres de las etiquetas y de los atributos deben escribirse en minúsculas.
Esto quiere decir que la siguiente etiqueta: <DIV CLASS="EncabezadoPrincipal">
4
http://es.wikipedia.org/wiki/XHTML

8
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

es incorrecta, su forma correcta es: <div class="EncabezadoPrincipal">, el valor del


atributo está exento de estas reglas.
• Todos los atributos de cualquier etiqueta deben encerrarse entre comillas. La forma
correcta de asignar valores a los atributos de una etiqueta es la siguiente: <img
src="mimagen.gif" height="50" width="150" alt="Mi Foto">.
• Piensa en XHTML como el medio para organizar y estructurar tu documento, no
como un medio para darle formato, el cual corresponde a los estándares de las hojas de
estilos o CSS.

DOM
El Document Object Model (‘Modelo de Objetos de Documento’), frecuentemente
abreviado DOM, es una forma de representar los elementos de un documento estructurado
(tal como una página web HTML o un documento XML) como objetos que tienen sus propios
métodos y propiedades. El responsable del DOM es el World Wide Web Consortium (W3C).
El DOM es una API para acceder, añadir y cambiar dinámicamente contenido estructurado
en documentos con lenguajes como ECMAScript (Javascript). DOM proporciona métodos,
clases e interfaces para acceder y manipular el árbol del documento.

Un documento Html DHTML podría definirse como Javascript + DOM + CSS


se puede representar como Recomendación:
un árbol, en cuyo caso Ø http://www.maestrosdelweb.com/editorial/dom/
estamos hablando del Ø http://www.tierradenomadas.com/tw006b.html
DOM del documento, cuya Ø http://www.howtocreate.co.uk/tutorials/javascript/do
raíz es window y contiene mbasics
un único hijo denominado
document, el cual está
formado por nodos como P, BR, DIV, etc., reconocidos como elementos, además de nodos
atributos como ALT, SRC, HREF. y las hojas del árbol que usualmente son los nodos de
texto.

Guía para el manejo de componentes DOM con JavaScript

Nodos del documento


Los nodos de un documento HTML pueden ser identificados como; element,
TextNode y AttributeNode.

Funciones para acceder a elementos en el documento5


getElementById(‘id_del_elemento’): retorna como un objeto el elemento que tiene el
identificador especificado.

getElementsByTagName(‘etiqueta’): retorna en un arreglo (array) todos los


elementos con la etiqueta especificada.

5
http://onlinetools.org/ articles/unobtrusivejavascript/chapter2.html

9
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

appendChild: añade un hijo.


insertBefore: inserta un hijo antes que otro.
cloneNode: devuelve duplicado de nodo // Clonar primer elemento y ponerlo al final
function clona() {
actual.
var raiz = document.documentElement;
removeChild: elimina un hijo. var cuerpo = raiz.getElementsByTagName("body")[0];
replaceChild :substituye un hijo por otro. var texto = cuerpo.firstChild;
hasAttributes: indica si tiene atributos. var textoNuevo = texto.cloneNode(true);
hasChildNodes: indica si tiene hijos. cuerpo.appendChild(textoNuevo);
}

Navegar a partir de un elemento


childNodes
Retorna un arreglo de todos los nodos que contiene el nodo actual o de referencia.
Con firstChild se accede al primer hijo y con lastChild al último , esto equivale a
childNodes[0] y childNodes[ this.childNodes.length - 1] respectivamente.

parentNode
Se refiere a el elemento que contiene al nodo actual o de referencia.

nextSibling
Corresponde al siguiente elemento del mismo nivel.

previousSibling
Se refiere al elemento que precede al actual o de referencia en el mismo nivel.

Atributos y funciones para un elemento particular


attributes
Retorna un arreglo de todos los atributos del elemento actual.
data
Retorna o asigna valor al nodo.
nodeName
Retorna el nombre del nodo.
nodeType
Retorna el tipo del nodo: elemento = 1, atributo = 2, texto = 3.
nodeValue
Retorna o asigna valor al nodo. Este valor es el texto cuando se trata de un
TextNode, será el atributo si es un AttributeNode y null si es un elemento.
getAtribute(atributo)
Retorna el valor del atributo indicado.

JavaScript
JavaScript es un lenguaje interpretado, es decir, que no requiere compilación, utilizado
principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java y el

10
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

lenguaje C. JavaScript es sensible a mayúsculas y minúsculas, tiene la peculiaridad de ser


un lenguaje débilmente tipado, esto es, una variable puede cambiar de tipo durante su vida,
por ejemplo uno puede declarar una variable con valor entero y más adelante asignarle una
cadena. El código JavaScript se usa y funciona en los documentos HTML y puede ser visto
por el usuario de la página web.

Al contrario que Java, JavaScript no es un lenguaje orientado a objetos propiamente


dicho, ya que no dispone de Herencia, es más bien un lenguaje basado en prototipos, ya que
las nuevas clases se generan clonando las clases base (prototipos) y extendiendo su
funcionalidad.

Para incluir un segmento JavaScript en un <script type="text/javascript">


documento HTML utilice las siguientes etiquetas: // código JavaScript
</script>

Para incluir un
código externo use: <script type="text/javascript" src="[URL]"></script>

A continuación presentamos ejemplos que le permitirán ejercitarse en el uso de


JavaScript y DOM.

11
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 1: Pruebe este código y haga cambios hasta que esté seguro de cómo funciona.

<html>
<head>
<title>Ejemplo básico de JavaScript</title>
</head>
<body>
<script language="JavaScript">
var a = 8;
var txt = "Le Gustó????";
b = 3;
document.write("Valores:<br>a="+a+"<br>b="+b+"<br>");
c= a+b;
document.write("Resta<br>");
document.write(a - b);
document.write("<br>Producto<br>");
document.write( a * b);
document.write("<br>División<br>");
document.write(a / b);
window.alert(txt+ "\n"+ "suma de a y b="+c );
document.write("<br><hr>Incremento de a:");
a++;
document.write(a+"<br>");
document.write("Decremento de b:");
b--;
document.write(b);
// usted puede crear elementos HTML
document.write("<h3>Crea componentes HTML!!!</h3>");
document.write("<ul>");
for (i=1; i<5; i++)
document.write("<li>prueba"+i+"</li>");
document.write("</ul>");
</script>
</body>
</html>

12
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 2 : funciones
En este ejemplo se hace uso de las funciones en JavaScript. Note que la definición de
las funciones se realiza en el <head>, mientras que la invocación se lleva a cabo en el
<body>. El pase de argumentos es igual que en lenguajes como C o Pascal y que puede
usar el método write del objeto document para insertar nuevos elementos HTML en el
documento.

<html>
<head>
<title>Ejemplo de funciones en JavaScript</title>
<script language="Javascript">

function triplica(valor)
{
var version;
version = valor*3;
return version;
}

function creaelemento(texto)
{
version = "<div><p>"+texto+"</p></div>"
return version;
}
</script>
</head>
<body>

<!-- aquí se incluye la invocación a las funciones -->


<script language="Javascript">
var c=100;
var ver =triplica(c);
document.write("El triple de 100===>"+ver);
// otra función
alert("Incluiremos un nuevo elemento");
var nuevo=creaelemento("Seguimos avanzando");
document.write("<br>Nuevo Elemento"+nuevo);
</script>
</body>
</html>

13
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 36 : Captura de datos y referencia a otro documento HTML


En este ejemplo se usa la función prompt para la captura de datos y location para
vincular a otro documento HTML mediante su URL, dependiendo del valor capturado.

<HTML>
<HEAD>
<TITLE>Uso de LOCATION y captura de dato</TITLE>
<!-- Tomado de http://www.webteacher.com/javascript/ch03.html -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Inicio de JavaScript -

function verifica() {
Ret = prompt('Intente con una clave ',"");
if(Ret=="EureKa") {
location = 'JavaScriptejemplobasico.html'; //invoca otra página
web
} else {
alert("Pruebe con EureKa !!!")
}

}
// - Fin de JavaScript - -->
</SCRIPT>

</HEAD>
<BODY>
<!-- observe esta forma de empotrar código javaScript -- >
<A HREF="javascript:verifica() //invocación a la función">
<IMG SRC="logo.gif" NAME="suimg" ALT="Fiec" BORDER="0" align="left">
</A>

<H3>Click en la imagen para entrar a un documento protegido!!!</H3>


</BODY>
</HTML>

6
http://www.webteacher.com/javascript/ch03.html

14
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 4: Captura de datos mediante formulario y dar valor a un campo del


formulario.
En este ejemplo se introduce el formulario HTML y se usa el evento onClick para
invocar la función codifica. Se utilizan los métodos indexOf y substring del objeto String,
además se usa el nombre del formulario para hacer referencia a un campo determinado.

<HTML>
<HEAD>
<title>Uso de métodos del objeto cadena</title>
<!-- Tomado de http://www.webteacher.com/javascript/ch04.html -->
<SCRIPT LANGUAGE="JavaScript">
<!-- Inicio de JavaScript -
// en cada expresión de entrada se convierte cada caracter en su sucesor

function codifica(text) { Ref="0123456789abcdefghijklmnopqrstuvwxyz.-


~ABCDEFGHIJKLMNOPQRSTUVWXYZ"
Resultado=""
for (Count=0; Count<text.length; Count++) {
Char=text.substring (Count, Count+1);
Num=Ref.indexOf (Char);
EncodeChar=Ref.substring(Num+1, Num+2)
Resultado+= EncodeChar
}
document.form1.result.value=Resultado //coloca valor en el formulario
}
// - Fin de JavaScript - -->
</SCRIPT>

</HEAD>
<BODY>
<FORM name="form1">
<table border=0>
<tr>
<td>Escriba la palabra que desea codificar:</td>
<td><INPUT NAME="input" TYPE=Text></td>
<td><INPUT TYPE=Button VALUE="submit"
onClick="codifica(this.form.input.value)"></td>
</tr>
<tr><td>Resultado:</td>
<td><INPUT NAME="result" TYPE=Text></td></tr>
</table>
</FORM>
</BODY>
</HTML>

15
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 4a: Similar al anterior pero incluye CSS.


<html>
<head>
<title>Captura datos y Despliega en otro formulario</title>
<style type="text/css">
.registro {width:330px; padding:10px; margin:15px; border: 2px dashed #99ddaa;background-color:#aaccaa;}
.registro fieldset {background-color: #99ddaa; padding:10px 20px;}
.registro legend{font: bold 16px Arial, sans -serif;color:#000; padding:0 15px;}
.registro label {font:bold 12px Geneva, Arial, Helvetica, sans-serif; float: left;width: 15%; text-align:right;padding:5px; color:
#000000;}
.paraced {width:330px; padding:5px; margin:15px; border: 2px outset #ccddaa;background-color:#ddccaa;}
.paraced fieldset {background-color: #99ddaa; padding:10px 20px;}
.paraced legend{font: bold 16px Arial, sans -serif;color:#000; padding:0 15px;}
.paraced label {font:bold 12px Geneva, Arial, Helvetica, sans -serif; width: 15%; text-align:right;padding:5px; color: #000000;}
.enviar{margin:3px 0 0 83px;border:inset; background-color:#ddccaa;}
.otra {background-color:#ddccaa;}
</style>
<script language="JavaScript">
function codifica(entrada) {
var provincias = new Array ("Bocas del Toro", "Coclé", "Colón", "Chiriquí", "Darién", "Herrera", "Los Santos",
"Panamá", "Veraguas");
partes = entrada.split("-"); // separa partes de la cédula
var prov=partes[0];
document.des.xprov.value=provincias[prov - 1]; //coloca valores en campos del formulario …des
document.des.xtomo.value=partes[1];
document.des.xasiento.value=partes[2];
} Con este ejemplo se muestra el
function enfoca() { //coloca cursor en el campo xpro para capturar otra cédula uso de CSS dent ro del documento
document.captura.xpro.focus(); HTML, se usa un formulario para
} capturar la cédula y otro para
</script> desplegar los componentes de la
</head>
misma. Se incluye un arreglo para
<body>
<form name="captura">
los nombres de las provincias, se
<div class="paraced"> limpia el campo de cédula para
<fieldset> capturar otra y se coloca el cursor
<legend>Indique su cédula</legend> en el campo deseado.
<label for="xpro1">Cédula:</label>
<input name="xpro" type="text" size="18" /><br />
<input class="otra" type=Button VALUE="enviar" onClick="codifica(this.form.xpro.value)" />
<br />
<input class="enviar" name="denuevo" type="reset" value="Otra Cédula?" onClick="enfoca()" />
</form>
</div>
<div class="registro">
<fieldset>
<form name="des">
<legend>Datos de la cédula</legend>
<label for="xprov">Provincia:</label>
<input name="xprov" type="text" size="20" />
<br />
<label for="xtomo">Tomo:</label>
<input name="xtomo" type="text" size="5" />
<br />
<label for="xas">Asiento:</label>
<input name="xasiento" type="text" size="5" />
</form>
</fieldset>
</div>
</body>
</html>

16
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 5: Introducción a una página dinámica.


En esta oportunidad se ejemplifica el acceso a un elemento(h1) del DOM del
documento y se procede a cambiar su valor o contenido. Esto se logra con el método
getElementById del objeto document, por eso se escribe document.getElementById().

<html>
<head>
<title>Acceso a elementos HTML con JavaScript</title>
<script type="text/javascript">
function buscaElemento()
{
var x=document.getElementById("mih1");
alert("Esto es lo que contiene el emento:"+x.tagName+"\n"+ x.innerHTML);
}
function cambiaElemento(texto)
{
var x=document.getElementById("mih1");
x.innerHTML = texto;
alert("¿Lo vió...qué le parece??!!!!!");
}
</script>
</head>

<body>
<h1 id="mih1" onclick="buscaElemento()">Prueba de Documento Dinámico</h1>
<p>haga Click en el título anterior *******</p>
<hr />
<h3 onclick="cambiaElemento('Eso es un Cambio!!!!')">
Si hace click aquí le cambio el título anterior</h3>
</body>
</html>

Todo sobre formularios


http://www.webtaller.com/construccion/lenguajes/html/lecciones/formularios_html.php

17
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 6: Se muestra como copiar o clonar un nodo y su valor.


En este ejemplo se accede a un nodo p que no tiene name ni id por el parent, se
clona y se copia como un nuevo hijo de body, el cual queda como un sibbling del p
original

<html>
<head>
<title>Clona y crea elementos HTML con JavaScript</title>
<script language="Javascript">
function clona() {
var raiz = document.documentElement;
var cuerpo = raiz.getElementsByTagName("body")[0];
var texto = cuerpo.firstChild;
var textoNuevo = texto.cloneNode(true);
cuerpo.appendChild(textoNuevo);
}
</script>
</head>
<body>
<p>
El elemento P es el primer hijo de body, lo clonaremos abajo<br>
después de su click.
</p>

<form NAME="form1" ACTION="" METHOD="GET">


<INPUT TYPE="button" NAME="buton" Value="Clonar"
onClick="clona(this.form)">
</form>

</body>
</html>

Práctica #2
Esta práctica formativa requiere que usted elabore un documento interactivo que a
solicitud de la fecha de nacimiento y actual se determine la edad actual en días, meses y año
de un determinado usuario. Se recomienda el uso de los métodos del objeto String
(http://www.desarrolloweb.com/articulos/726.php o http://javascriptkit.com/javatutors/string4.shtml).
Los resultados deben aparecer en un bloque creado dinámicamente con bordes outset y
color de fondo.

18
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 7: Manejo dinámico de un formulario.


Este programa permite controlar las entradas(input) de un formulario según las
necesidades del usuario, creando el atributo id dinámicamente. Se refuerza el concepto de
función y se presentan nuevos elementos del formulario.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Materias que desea matricular</title>

<script type="text/javascript">
/* haga cambios para que no acepte más de 5 materias... */
var cuentaMat = 1;
function adicionaMateria() {
cuentaMat++;
var nuevaMat = document.createElement('input');
nuevaMat.type = 'text';
nuevaMat.name = 'mat' + cuentaMat;
nuevaMat.id = 'mat' + cuentaMat;
document.getElementById('fs').appendChild(nuevaMat);
}
</script>
<!-- CSS interno -->
<style type="text/css">
input {
display: block;
margin-bottom: 2px;
margin-left: 10px;
}
.mover {
margin-top: 6px;
background:#ccc;
}
button {
float: right;
}
fieldset {
border: 1px solid black;
width: 500px;
}
h1 {
color:#ccd;
}
</style>

</head>
<body>
<h1>Materias que desea matricular</h1>
<!-- Los formularios (form) son indispensables para establecer interactividad -->
<form>
<label for="you">Cédula</label>
<input type="text" name="ced" id="ced">
<fieldset id="fs">
<legend>Indique la materia</legend>

19
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

<button onclick="adicionaMateria(); return false;">


Adicione otra Asignatura
</button>
<input type="text" name="mat1" id="mat1">
</fieldset>
<input class="mover" type="submit" value="Matricular">
</form>
</body>
</html>

Ejemplo 8: Manejo dinámico de un documento, incluyendo estilo.


En este ejemplo se capturan datos mediante un formulario, los cuales son pasados a
la función actualiza al activar el evento onClick sobre un botón. Se crean los tres tipos de
nodos: element, TextNode y AttributeNode.

<HTML>
<HEAD>
<TITLE>Captura y crea nuevos elementos</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function actualiza (miform) {
var entrada = miform.texto.value;
texto2= "Este es el c ontenido del primer párrafo";
alert ("Su texto es: " + entrada);

x = document.getElementById('contenedor'); //busca el elemento div


cadena ="<h4>"+"este es un nuevo contenido"+"</h4>"+"<br>"
x.innerHTML=cadena; //forma no estándard de asignar valor a un nodo

x.style.border='3px dashed #ccc'; // asigna estilo al elemento


nuevop=document.createElement('p');
x.appendChild(nuevop);
nuevop.setAttribute("id","noveo"); //crea o modifica atributo

text1 = document.crea teTextNode(entrada+"!!!!!!!!!!!!");


nuevop.appendChild(text1);
nuevobr=document.createElement('br');
nuevop.appendChild(nuevobr);
text1 = document.createTextNode(texto2);
nuevop.appendChild(text1);
// se accede al otro campo(nu mérico)
var xedad = miform.edad.value;
xedad = xedad *100;
//verifica si el div tiene hijos
if(x.hasChildNodes())

alert("el último hijo del div es ..." +x.lastChild.nodeName);


else
alert("Div Vacio");
pps=document.getElementsByTagName('p');//retorna un array(pps)

alert("Parrafos encontrados:"+ pps.length);


pps[1].innerHTML="Cien veces el valor="+xedad;
pps[1].style.backgroundColor='#dcccaa';
pps[1].style.width='300px';
pps[1].style.padding='7px';

20
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

texto2= "Este es el contenido del segundo párrafo";


nuevobr1=document.createElement('br');
pps[1].appendChild(nuevobr1);
text1 = document.createTextNode(texto2);
pps[1].appendChild(text1);

}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="miformulario" ACTION="" METHOD="GET">Escriba un texto: <BR>
<INPUT TYPE="text" NAME="texto" VALUE=""><br>indique un valor:<br>
<INPUT TYPE="text" NAME="edad" VALUE="0"><br>
<INPUT TYPE="button" NAME="button" Value="Aceptar" onClick="actualiza(this.form)">
</FORM>
<div id="contenedor">
</div>
<p id="numero">
</p>
</BODY>
</HTML>

Posible resultado de la práctica #2

<html>
<head>
<title>Calcula edad aproximada en días meses y años</title>
<script language="Javascript">
function calcula(formulario) {
var xnac = formulario.fnac.value;
var xhoy = formulario.fhoy.value;
var partesnac=xnac.split("/");
var parteshoy=xhoy.split("/");
// conversión a números
dhoy=parteshoy[0]*1;
mhoy=parteshoy[1]*1;
ahoy=parteshoy[2]*1; //otra forma de convertir
dnac=Number(partesnac[0]);
mnac=Number(partesnac[1]);
anac=Number(partesnac[2]);

if (dnac > dhoy){


dhoy= dhoy + 30;
mhoy= mhoy - 1;

}
if (mnac > mhoy){
mhoy= mhoy +12;
ahoy= ahoy - 1;
}
dd=dhoy - dnac
mm=mhoy - mnac;
aa = ahoy - anac;
alert("dias:"+dd+"\n meses:"+ mm+"\n años:"+aa);

21
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

publica(dd,mm,aa);
}
function publica(dd,mm,aa) {
var raiz = document.documentElement;
var cuerpo = raiz.getElementsByTagName("body")[0];
nuevodiv=document.createElement('div');
cuerpo.appendChild(nuevodiv);

nuevodiv.style.backgroundColor='#ddccaa';
nuevodiv.style.border='outset';
nuevodiv.style.width='200px';
nuevodiv.style.padding='5px';

texto="Dias:"+dd+"<br />Meses:"+mm+"<br />Años:"+aa;


text1 = document.createTextNode("Su edad es:");
nuevoh=document.createElement('h2');
nuevodiv.appendChild(nuevoh);
nuevoh.appendChild(text1);

nuevop=document.createElement('p');
nuevodiv.appendChild(nuevop);
nuevop.innerHTML=texto;
nuevop.style.padding='25px';
}
</script>
</head>
<body>
<form NAME="form1" >
<fieldset>
<legend>Cálculo de su edad exacta</legend>
<table border=0>
<tr>
<td>Fecha de Nacimiento:</td><td><INPUT TYPE="text" NAME="fnac" value="dd/mm/aaaa" /></td>
</tr>
<tr>
<td>Fecha actual:</td><td><INPUT TYPE="text" NAME="fhoy" value="dd/mm/aaaa" /></td>
<td><INPUT TYPE="button" NAME="buton" Value="Calcula edad" onClick="calcula(this.form)" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

22
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Introducción a PHP
PHP (acrónimo de "PHP: Hypertext Preprocessor") es un lenguaje de "código abierto"
interpretado, de alto nivel, embebido en páginas HTML y ejecutado en el servidor. La
estructura funcional de un programa PHP se muestra en el siguiente diagrama tomado de
http://www.webestilo.com/php/php00.phtml . Lo que distingue a PHP de JavaScript es que el
código PHP se ejecuta en el servidor, mientras que el de
JavaScript lo hace en la máquina del cliente. El cliente no
puede ver el código PHP, mientras que si puede hacerlo
con el de JavaScript cuando está empotrado en el
documento HTML.
El código PHP puede incluirse dentro del código
HTML. Para delimitar la sección de código PHP podemos
hacerlo de varias formas:
-Usando las etiquetas <?php y ?>
-Usando las etiquetas <? y ?>
-Mediante <script languaje="php"> </script>

En http://www.adrformacion.com/cursos/wordxp/curso/php/leccion2/sintaxis_php.htm puede revisar


las distintas formas de incluir código PHP en un documento HTML, además de ilustrarse
sobre el manejo de los comentarios, variables, alcance de las variables, cadena de
caracteres, tipos de datos, arreglos asociativos, operadores lógicos y aritméticos, finalizando
con una introducción a las funciones. Puede notar que la sintaxis de PHP es similar a
JavaScript o C. Como complemento puede recurrir a : http://www.webtaller.com/manual-
php/variables.php .
El control del flujo se realiza con instrucciones que guardan la misma sintaxis que C o
JavaScript. Recuerde que los programas o script PHP deben residir en el servidor WEB, el
cual debe estar configurado para acceder a PHP.

Por que utilizar PHP y no otras opciones7:

• PHP no soporta directamente punteros, como el C, de forma que no existen los


problemas de depuración provocados por estos.
• Se pueden hacer grandes cosas con pocas línes de código. Lo que hace que merezca
la pena aprenderlo.
• El código PHP es mucho más legible que el de PERL , todo el que haya programado
PERL podrá corroborar esta afirmación.
• Viene acompañado por una excelente biblioteca de funciones que permite realizar
cualquier labor ( acceso a base de datos, encriptación, envió de correo, gestión de un
e-commerce, xml, creación de PDF ... )
• Al poderse encapsular dentro de código html se puede recoger el trabajo del
diseñador gráfico e incrustar el código php posteriormente.
• Esta siendo utilizado con éxito en varios millones de sitios web.
• Hay multitud de aplicaciones php para resolver problemas concretos ( weblogs,
tiendas virtuales , periódicos , ... ) listas para usar.
• Es multiplataforma, funciona en todas las plataformas que soporten apache.
7
http://ascii.eii.us.es/docs/2002-03/php/php4.html

23
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

• Es software libre. Se puede obtener en la web y su código esta disponible bajo la


licencia GPL.

Ejemplo 9: Ejemplo básico de PHP, similar al ejemplo1 de JavaScript


Con el interés de que realicen una comparación de los códigos PHP y JavaScript
presentamos este ejemplo con los operadores aritméticos y la inclusión de elementos HTML
en el documento. Observe que la concatenación se realiza con el punto (.) .

<html>
<head>
<title>Ejemplo básico de PHP</title>
</head>
<body>
<?php
$a = 8;
$txt = "Le Gustó????";
$b = 3;
echo("Valores:<br />a=".$a."<br>b=".$b."<br />");
$c= $a+$b;
echo("Resta<br>");
print ($a - $b);
echo("<br />Producto<br />");
print($a * $b);
echo("<br>División<br />");
print ($a / $b);
$msg=$txt."\\n"." suma de a y b=".$c;
echo "<script>alert('$msg');</script>";
echo("<br /><hr />Incremento de a:");
$a++;
echo("$a<br>");
echo("Decremento de b:");
$b--;
echo($b);
// usted puede crear elementos HTML
echo("<h3>Crea componentes HTML!!!</h3>");
echo("<ul>");
for ($i=1; $i<5; $i++)
echo("<li>prueba".$i."</li>");
echo("</ul>");
?>
</body>
</html>

24
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 10: Funciones en PHP


Observe que las funciones se ubican en cualquier parte del cuerpo del script PHP.
Compare con el ejemplo 2 de JavaScript.

<html>
<head>
<title>Ejemplo de funciones en PHP</title>
</head>
<body>
<?php
// Revise la estructura del programa y la invocación a las funciones.
function triplica($valor){
$version = $valor*3;
return $version;
}
function creaelemento($texto){
$version = "<div><p>".$texto."</p></div>";
return $version;
}
//Aquí se incluye la invocación a las funciones

$c=100;
$ver =triplica($c);
echo "El triple de 100===>".$ver;
// otra función
echo '<script language="JavaScript">';
echo 'alert("Incluiremos un nuevo elemento")';
echo '</script>';

$nuevo=creaelemento("Seguimos avanzando");
echo "<br>Nuevo Elemento".$nuevo;
?>
</body>
</html>

25
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Ejemplo 11: Invocación a un programa PHP y pase de valores mediante formulario.


En este ejemplo se presentan dos documentos uno HTML que contiene un formulario
para capturar valores que luego se pasan por el método GET a el programa PHP que está en
el servidor y que hemos llamado phpedadexacta.php. El programa PHP crea un documento
como resultado de su invocación con los valores calculados en el servidor.

<html>
<head>
<title>Captura Fechas para pasarlas a phpedadexacta.php</title>
</head>
<body>
<form ACTION="http://localhost/phpedadexacta.php" METHOD="GET" >
<fieldset>
<legend>Cálculo de su edad exacta</legend>
<table border=0>
<tr>
<td>Fecha de Nacimiento:dd/mm/aaaa</td>
<td><INPUT TYPE="text" NAME="fnac" value=""></td>
</tr>
<tr>
<td>Fecha actual:dd/mm/aaaa</td>
<td><INPUT TYPE="text" NAME="fhoy" value=""></td>
<td><input type="submit" value="Calcula edad" /></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

El programa PHP (phpedadexacta.php) que recibe los datos del documento HTML
anterior es:

<html>
<head>
<title>Calcula edad aproximada de una persona</title>
<script language="Javascript">
function publica() {
nuevodiv=document.getElementById("edad");

26
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

nuevodiv.style.backgroundColor='#ddccbb';
nuevodiv.style.border='outset';
nuevodiv.style.width='300px';
nuevodiv.style.padding='5px';
nuevodiv.style.marginLeft='10em';
}
</script>
</head>
<body>
<?php
function calcula($xnac, $xhoy) {
//separa elementos de la fecha
list( $dnac, $mnac, $anac ) = split( '[/__]', $xnac);
list( $dhoy, $mhoy, $ahoy ) = split( '[/__]', $xhoy);

//echo "Mesnac: $mnac; Dianac: $dnac; Añonac: $anac<br>\n";


if ($dnac > $dhoy){
$dhoy= $dhoy + 30;
$mhoy= $mhoy - 1;
}
if ($mnac > $mhoy){
$mhoy= $mhoy +12;
$ahoy= $ahoy - 1;
}

$dd=$dhoy - $dnac;
$mm=$mhoy - $mnac;
$aa =$ahoy - $anac;
$txt = "dias:".$dd."<br> meses:".$mm."<br> años:".$aa;
return $txt;
}
if (isset($_GET['fnac'])){
$xnac = $_GET['fnac'];
$xhoy = $_GET['fhoy'];
$xresp=calcula($xnac, $xhoy);
echo '<div id="edad"><p>';
echo '<h3>Su edad aproximada es:</h3>';
echo $xresp;
echo '</p></div>';
}
else{
echo '<script language="JavaScript">';
echo 'alert("Formulario con datos Incompletos!!!")';
echo '</script>';
}
?>

27
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

<script language="Javascript">
publica();
</script>
</body>
</html>

Ejemplo 12 : Conexión a una base de datos MySql.


En el siguiente ejemplo se ilustra la conexión a una base de datos, luego se
establece la consulta, se verifica el éxito o no de la misma y se despliegan los valores
buscados.

<?php
Conexión a una base de datos y búsqueda de registros según el valor de un campo
único
echo "<h2> LEE Base Datos de Práctica</h2>";
$dbest = @mysql_connect('localhost', 'root', '');
if (!$dbest )
die('<p>***No se puede conectar***</p>');
echo '****...Conección Existosa!!!!<hr /><br>';

if (!@mysql_select_db('basededatos', $dbest))
die('<p>****No se puede acceder a su Base de Datos</p>');

$sql = @mysql_query("SELECT campo1, campo2 FROM tabla WHERE campox =


'$variable'");

if (!$sql){
die('<p> *** NO se pudo localizar lo que busca!!!!'. $variable.'</p>');}
else{
echo '******Datos localizados..........OKKKKKK<br>';
$resultado = mysql_fetch_array($sql);
echo 'Valores:<br />'. $resultado['campo1'].' '.$resultado['campo2'].'<br />';
echo 'El campo de busqueda es.........' .$resultado['campox']. '<br />';
}
?>

Práctica #3 : Consulta a una base de datos. Sumativa.


Utilizando PHPmyadmin cree una base de datos y una tabla con tres campos, uno de
los cuales debe ser único o llave de la tabla. Adicione varios registros y luego establezca una
consulta mediante un documento HTML con formulario, el cual invocará a un script PHP que
hará la conexión a su base de datos y desplegará los resultados. Adicione estilos dinámicos.
Publique sus códigos, comentarios y experiencias en http://www.esnips.com/web/spw .

28
INF302- Programación Web
Prof. Diego Santimateo G.
http://www.esnips.com/web/spw

Referencias
1. Wilton-Jones, Mark. JavaScript tutorial.2006. http://www.howtocreate.co.uk/tutorials/javascript/
2. Sysifus. Taller nº 6. Tierra de Nómadas. 2002. http://www.tierradenomadas.com/tw006.phtml
3. Ignside.net. Apuntes de CSS. 2007. http://www.ignside.net/man/css/posicionamiento.php
4. Martínez, Alvaro. Manual práctico de HTML. 1995. http://www.etsit.upm.es/~alvaro/manual/manual.html
5. W3C Recomendation. Especificación del DOM. 2002. http://www.w3.org/TR/2000/REC-DOM-Level-2-
Core-20001113/core.html#ID-1950641247
6. Koch, Peter – Paul. Ejemplos JavaScript. http://www.quirksmode.org/
7. Cover, Robin.Recursos en linea para lenguajes de marca.2003. http://xml.coverpages.org/dom.html
8. Frishberg Ryan. W3C DOM. http://www.pageresource.com/dhtml/ryan/part4-1.html
9. JavaScriptKit. Complete JavaScript Reference. http://www.javascriptkit.com/jsref/index.shtml
10. PHP en Castellano. Tutorial PHP y MySql. http://www.programacion.net/php/tutorial/php/4/
11. Manual de PHP. http://www.php.net/manual/es/index.php
12. Codewalkers. PHP Manual. http://codewalkers.com/phpdocs/index.html.
13. Estudio Hosting. Tutorial PHPmyadmin. http://www.estudiohosting.com/tutorialphpmyadmin.html .
14. Rodríguez José. Tutorial PHP y MySql. http://es.tldp.org/Manuales -
LuCAS/manual_PHP/manual_PHP/index.htm
15. MySql Ya . http://www.mysqlya.com.ar/ .

29