ApuntesPW3

INF302- Programación Web Prof. Diego Santimateo G.

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

1

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



2

Ejemplo Descripción <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>Aquí el titulo de tu página</title> </head> <body> <! - - Comentario - - > </body> </html>

*Dibujar árbol DOM

<HTML> Indica que la página web esta usa ese idioma y marca los límites del documento. <HEAD> Es el área de definición del documento HTML donde se especifica el título de la página y otra información destinada a buscadores. <TITLE> Esta etiqueta será utilizada para los marcadores del navegador y definirá un nombre para tu página.

<BODY> Cuerpo o contenido con otros elementos HTML.

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



3

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



4

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

• 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

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



5

A continuación ejemplificamos los tipos más utilizados de descriptores, con comentarios explicativos en cada caso.

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



6

Descripción de Selector Ejemplo Comentario

Etiqueta o elemento HTML h2 {color : #00ff00;} td {font-weight: 900;}

Todos los contenidos de h2 tendrán color verde y los td estarán resaltados tipo negrita.

Clase: selector abstracto aplicable a cualquier elemento. Usa un punto(.).

.unaclase {font-family: Verdana, sans-serif; margin-top: 8em; margin-bottom: 3em;} h3.color {color: #0000ff;} h3.otra {color: #ccddcc;}

Para usar una clase hay que especificarla en el elemento que se desea, así: <p class=”unaclase”> Varios elementos pueden tener la misma clase. En este segundo ejemplo, solo los h3 que tengan la clase color tendrán fuente azul. Esta es una clase para el elemento h3, no obstante, una misma etiqueta puede tener varias clases.

Selectores contextuales

div p { font-family: Arial, sans-serif; font-size: 100%;} div.xxx h1 { font-size: 100%; } .poeta pre {color:#ff0000;}

Los párrafos (p)incluidos en div tendrán las características indicadas. En este segundo ejemplo, los h1 incluidos en los div con clase xxx tendrán las características especificadas. Las etiquetas pre dentro de la clase poeta tendrán color rojo.

Selector identidad:usa numeral (#)

#especial {margin: 5px 50px 5px 50px;}

Podemos asociar el atributo id con un selector de identidad única. <p id=”especial”> Ningún otro elemento puede tener este id.

Pseudo clases para el elemento <a>

a:link enlace que no ha sido explorado por el usuario. a:visited se refiere a los enlaces ya visitados. a:active enlace seleccionado con el ratón a:hover enlace con el puntero del ratón encima, pero no seleccionado a:focus enlace con el foco del sistema

Se utilizan para especificar la visualización de los enlaces. Las pseudoclases pueden ser usadas con selectores contextuales o combinarse con clases normales. Es importante guardar el orden o secuencia de presentación de estas pseudoclases.



7

¿Dudas sobre border, padding o margin?

http://www.ignside.net/man/css/bloques.php

¿Quiere usar varias hojas de estilo en el mismo documento? http://www.mailxmail.com/curso/informatica/css/capitulo4.htm

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

Sabemos que de la exploración de la web

anterior usted pudo intuir los efectos que se logran al 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

Practica #3

Dedique un tiempo a la maquetación con CSS, revise y proponga un modelo o plantilla para su web: • 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



8

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

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

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



9

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

se puede representar como un árbol, en cuyo caso estamos hablando del DOM del documento, cuya raíz es window y contiene 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

DHTML podría definirse como Javascript + DOM + CSS Recomendación: Ø http://www.maestrosdelweb.com/editorial/dom/ Ø http://www.tierradenomadas.com/tw006b.html Ø http://www.howtocreate.co.uk/tutorials/javascript/do

mbasics



10

appendChild: añade un hijo. insertBefore: inserta un hijo antes que otro. cloneNode: devuelve duplicado de nodo actual. removeChild: elimina un hijo. replaceChild :substituye un hijo por otro. hasAttributes: indica si tiene atributos. hasChildNodes: indica si tiene hijos. 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

// Clonar primer elemento y ponerlo al final function clona() {

var raiz = document.documentElement; var cuerpo = raiz.getElementsByTagName("body")[0]; var texto = cuerpo.firstChild; var textoNuevo = texto.cloneNode(true); cuerpo.appendChild(textoNuevo);

}



11

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

documento HTML utilice las siguientes etiquetas: Para incluir un

código externo use: A continuación presentamos ejemplos que le permitirán ejercitarse en el uso de

JavaScript y DOM.

<script type="text/javascript"> // código JavaScript </script>

<script type="text/javascript" src="[URL]"></script>



12

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>

13

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

14

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.

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

<HTML> <HEAD> <TITLE>Uso de LOCATION y captura de dato</TITLE>  <SCRIPT LANGUAGE="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>

15

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>

 <SCRIPT LANGUAGE="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>



16

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]; } function enfoca() { //coloca cursor en el campo xpro para capturar otra cédula document.captura.xpro.focus(); } </script> </head> <body> <form name="captura"> <div class="paraced"> <fieldset> <legend>Indique su cédula</legend> <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>

Con este ejemplo se muestra el uso de CSS dent ro del documento HTML, se usa un formulario para capturar la cédula y otro para desplegar los componentes de la misma. Se incluye un arreglo para los nombres de las provincias, se limpia el campo de cédula para capturar otra y se coloca el cursor en el campo deseado.



17

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



18

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

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.

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

19

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>  <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>  <form> <label for="you">Cédula</label> <input type="text" name="ced" id="ced"> <fieldset id="fs"> <legend>Indique la materia</legend>



20

<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 contenido 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';



21

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



22

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>



23

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



24

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



25

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>



26

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.

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");

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



27

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>'; } ?>



28

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

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 .

<?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 />'; } ?>



29

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

ApuntesPW3

Documents

Transcript of ApuntesPW3