Apuntes PW3

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
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
<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ínea <br /> en otra línea siguen ejemplos de
enlaces o ví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á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ágina</a>
</BODY>
</HTML>
3
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
<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
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
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
• 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
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
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
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
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
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>


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

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>


</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
Ejemplo 4a: Similar al anterior pero incluye CSS.

<html>
<head>
<title>Captura datos y Despliega en otro formulario</title>
.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
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
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>
function clona() {
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
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>

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>

<form>
<label for="you">Cédula</label>
<input type="text" name="ced" id="ced">
<fieldset id="fs">
<legend>Indique la materia</legend>
19
<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>
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
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>
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
publica(dd,mm,aa);
}
function publica(dd,mm,aa) {
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
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
• 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
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
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>
function publica() {
nuevodiv=document.getElementById("edad");
26
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
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
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

Apuntes PW3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apuntes PW3

Uploaded by

Copyright:

Available Formats

INF302- Programación Web

Prof. Diego Santimateo G.

Los documentos del sistema de hipertexto necesitaban un formato que fuera

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

En la actualidad el mundo moderno se maneja fundamentalmente mediante el

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

Elementos básicos HTML2

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

<h1> Primera página</h1>

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

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

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

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

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

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

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

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

Descripción de Selector Ejemplo Comentario

En este segundo ejemplo, los

Las etiquetas pre dentro de la

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

Importante, aclare sus dudas sobre el posicionamiento de elementos utilizando

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

Ejemplos para disfrutar en casa:

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

Cuando haya finalizado su trabajo haga un breve comentario en

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

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

Reglas básicas para elaborar un documento XHTML:

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

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

Guía para el manejo de componentes DOM con JavaScript

Nodos del documento

Funciones para acceder a elementos en el documento5

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

appendChild: añade un hijo.

Navegar a partir de un elemento

Atributos y funciones para un elemento particular

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

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

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

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

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

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

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

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

Ejemplo 4a: Similar al anterior pero incluye CSS.

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

Todo sobre formularios

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

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

Ejemplo 7: Manejo dinámico de un formulario.

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

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

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

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

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

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

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

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

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

Posible resultado de la práctica #2

<a href="otrapagina.html">Ir a otra página</a><br /><br />