Guia Diseño Web UTPL

UNIVERSIDAD TCNICA PARTICULAR DE LOJA
La Universidad Catlica de Loja
EDUCACIN CONTINUA
MODALIDAD ONLINE
Curso de
WEB Y MULTIMEDIA
Creacin de sitios web
Gua didctica
1. DATOS INFORMATIVOS
AUTOR:
Franco Guamn Bastidas
ABRIL 2012
Reciba asesora virtual en: www.utpl.edu.ec
CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web
2. INDICE
UNIDAD 1: Puesta en marcha de un servidor web local
UNIDAD 2: XHTML Y CSS
UNIDAD 3: PHP Y MYSQL
Mi primer script
Comenzando con mySql
Conectar a mySql desde Php
Mostrar datos de una consulta
UNIDAD 4: FLASH (interaccin con datos externos)
Carga de imgenes
Carga de sonidos
Carga de animaciones
Carga de vdeos
Recuperacin de datos desde archivo TXT
Recuperacin de datos desde un archivo XML
Flash, php y bases de datos
UNIDAD 5: CMS DRUPAL
Instalacin
Configuracin
Instalacin de mdulos
Creacin de contenido
Personalizacin
ANEXO 1: El modelo de caja de CSS
ANEXO 2: Componer un diseo de 3 columnas en XHTML y CSS
3. INTRODUCCION
"No hay ms que asomarse a las puertas de la tecnologa y la ciencia contemporneas para
preguntarnos si es posible vivir y conocer ese mundo del futuro sin un enorme caudal de
preparacin y conocimientos".
La World Wide Web permite una manera ms organizada de acceder a la informacin
disponible en Internet, presentando una interfaz amigable con el usuario mediante
navegadores como Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, etc.
El surgimiento de la World Wide Web ha ayudado a un crecimiento considerable de Internet
en la actualidad. Compaas pequeas, empresas grandes, ayuntamientos, estados, gobiernos
de distintos pases, universidades, bibliotecas, estn presentes en Internet.
El presente curso tiene como objetivo el adentrarnos en el desarrollo de este tipo de
herramientas, las cuales en la actualidad estn siendo muy utilizadas para la comparticin e
intercambio de informacin, as como tambin en desarrollar habilidades y criterios a tener en
cuenta en el diseo para que un sitio Web tenga xito.
Este curso trata de dar un enfoque actual y personal, tratando de ser til a quien est
interesado en el tema.
El sistema de estudios on-line, implica grandes sacrificios y retos, que

al final proporcionan satisfacciones personales, familiares y
profesionales, dedquese al aprendizaje y aplicacin de los
conocimientos impartidos en este curso, es la nica forma de obtener
los rditos pretendidos
Sea usted bienvenido y xitos !
4. OBJETIVO
GENERAL:
Capacitar al estudiante para el desarrollo y modificacin de sitios web interactivos
mediante la utilizacin de herramientas como: Xhtml, Css, Php, mySql, ActionScrip y
Flash.
5. ORIENTACIONES GENERALES
PARA EL ESTUDIO
Teniendo en cuenta las caractersticas de la asignatura, se ofrecen algunas estrategias para

favorecer su comprensin y lograr un aprendizaje significativo.
Organizar el tiempo de manera que pueda avanzar secuencialmente en cada una
de las unidades y temas para no dejar acumulado el contenido para el final del
bimestre.
Leer comprensivamente la gua las veces que se requiera.
Es muy importante resolver los ejercicios y las actividades recomendadas en la gua
didctica.
Dedicar un horario estable para el desarrollo de las actividades de la asignatura.
Realizar los trabajos y ejercicios a distancia, los cuales debe ser entregados segn
el cronograma programado por la Universidad.
Participar activamente en el EVA (Entorno Virtual de Aprendizaje), en donde podr
interactuar con el docente tutor y los compaeros de la materia.
Utilizar los recursos web disponibles como videos, presentaciones, podcast, que se
encuentren en lnea.
UNIDAD 1
PUESTA EN MARCHA DE UN SERVIDOR WEB
LOCAL
El servidor web, es un programa encargado de realizar la ejecucin continua de tareas, las
cuales estn a espera de peticiones realizadas por el cliente, en este caso el browser o
navegador. Estas peticiones son interpretadas y respondidas en forma adecuada, ya sea
mediante la presentacin de un sitio web, alguna funcionalidad o mediante la presentacin de
algn mensaje de error en el caso de existirlo.
Para obtener este servicio es necesaria la contratacin de Hosting y la obtencin de un
dominio bajo el cual funcionar nuestro sitio web, servicio que deber ser proporcionado por
alguna empresa con la infraestructura necesaria para gestionar tales peticiones a nivel externo
(Internet).
Adems el servicio de hosting deber prestarnos otros servicios necesarios como:
MYSQL: Sistema de base de datos relacional, encargado de la comunicacin entra las bases de
datos y los usuarios o aplicaciones.
PHP: Que es un lenguaje de programacin, diseado originalmente para la creacin de sitios
web dinmicos. Su funcin principal ser la de realizar peticiones a la base de datos.
El disponer de un servidor web local nos permitir entre otras cosas, el montar, disear y
testear nuestros trabajos sin necesidad de contratar un hosting y dominio.
Todos estos servicios estarn a nuestra disponibilidad sin necesidad de una conexin a internet.
Existen algunos programas de libre distribucin en Internet, los cuales nos permiten la
instalacin de un servidor local con todos los servicios involucrados, usted puede utilizar el que
le parezca ms cmodo ya que su forma de trabajo es bastante similar. Para el desarrollo de
este curso, personalmente he decidido utilizar el programa Xampp el cual es de libre
distribucin y fcil instalacin.
Para descargar el programa puede valerse de su browser preferido para buscarlo en Internet,
existen algunos lugares que nos lo facilitan. En todo caso me permito adjuntar la siguiente
direccin web: http://www.apachefriends.org/en/xampp-windows.html desde la cual puede
descargar el instalador necesario.
Img. 1.1. cono de instalacin de XAMPP
No es recomendable la instalacin de la ltima versin,

generalmente estn clasificadas como Beta, y estn siendo
puestas a prueba. Tratemos de instalar una versin ya estable.
Este tipo de aplicaciones, nos permiten de una manera fcil la instalacin de todos los servicios
necesarios para el funcionamiento de un servidor Web.
Una vez instalado y dejando sus opciones por defecto, ya podemos decir que tenemos un
servidor web instalado en modo local. Se habr generado una carpeta xampp de instalacin
del programa y dentro de ella podremos observar que existe una carpeta llamada htdocs, la
cual ser nuestro sitio local. Dentro de este directorio deberemos colocar todos nuestros
proyectos de trabajo.
Img. 1.2. Directorio raz para aplicaciones Web

Antes de empezar a trabajar debemos activar nuestro servidor local. Para ello debemos ir al
men: Inicio->Programas->XAMPP for Windows->XAMPP Control Panel y ejecutarlo. Lo que
nos llevar a la siguiente ventana.
Img. 1.3. Puesta en marcha del servidor Web
9
En la cual debemos activar los servicios Apache y MySql.
Ahora ejecutamos en el browser de nuestra preferencia la direccin 127.0.0.1. Si la
instalacin ha sido correcta y no tenemos ningn inconveniente, podremos visualizar una
ventana similar a la siguiente, caso contrario debemos revisar la instalacin del programa.
Img. 1.4. Funcionamiento correcto del servidor Web
10
UNIDAD 2
XHTML Y CSS
XHTML es una reformulacin del HTML con aplicaciones XML, es una versin ms estricta y
limpia del HTML, y ya que est basado en XML, es posible su lectura e interpretacin en
dispositivos mviles que soporten XML.
Por ser un estndar, nuestros documentos XHTML deber respetar ciertas reglas bsicas como:
El DOCTYPE
Todos los documentos XHTML vlidos deben llevar un elemento llamado DOCTYPE, el cual
define el tipo de DTD (Definicin de tipo de Documento) a emplear en nuestros documentos,
es obligatorio y puede ser de uno de los siguientes:
Strict: este tipo de documento est principalmente ideado para su utilizacin con CSS,
separando completamente el contenido y la presentacin. Para ello no permite la
utilizacin de etiquetas y atributos ya en desuso orientados a la presentacin, como font,
center y otros. Escribiendo pginas en XHTML 1.0 Strict se consiguen pginas bien
estructuradas y fcilmente adaptables mediante CSS, pero tiene la desventaja de crear
incompatibilidades con ciertos navegadores.
Transitional: incluye todas las caractersticas de XHTML 1.0 Strict, pero aade
caractersticas orientadas a la presentacin ya en desuso.
Frameset: es una variante del Transitional para las pginas que utilizan frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Elementos debidamente jerarquizados
11
Es comn que utilicemos incorrectamente las etiquetas, ej:
<p>Bienvenidos al curso de <b><i>XHTML...<p><i><b>
Este cdigo es entendido por los navegadores pero no sera considerado como XHTML, ya que
no se est realizando correctamente la utilizacin de las etiquetas.
La forma correcta debera ser:
<p>Bienvenidos al curso de <b><i>XHTML...<i><b><p>
Respetndose el orden de apertura y cerrado de etiquetas.

Todo documento deber estar bien formado
Todo documento deber tener como mnimo la siguiente estructura:
<html>
<head> </head>
<body> </body>
</html>
Las etiquetas debern estar escritas en minscula

Al ser XHTML una aplicacin XML, existe la diferencia entre minsculas y maysculas.
Todas las etiquetas deben ser cerradas
En XHTML es obligatorio que todas las etiquetas sean correctamente cerradas, an aquellas
consideradas como unarias como <br>, <hr>, <img> en las cuales se incluir el cierre dentro de
la misma etiqueta, ej:
Este texto hace un<br /><b>Salto de lnea</b>

despus pone una lnea abajo<br /><hr />
Los nombres de los atributos deben ir en minsculas

Como ya lo habamos mencionado, existen diferencias entre maysculas y minsculas, as que
es invlido poner:
<img SCR=imagen.gif>
12
Lo correcto sera:
<img src=imagen.gif />
Los valores de los atributos deben ir entre comillas

Es incorrecto utilizar:
<div align=center>
Lo correcto sera:
<div align=center>
El atributo id reemplaza al atributo name

El atributo name est descontinuado, en su lugar use el atributo id:
<input type=text id=txt_nombre size=25 />
UTILIZACIN DE DIVs y CSS

Para la creacin de sitios web en un inicio slo se dispona de dos opciones, la utilizacin de
tablas, o marcos. El elemento div ofrece una tercera alternativa, ya que un div puede contener
alguno o cualquier otro tipo de elemento HTML entre sus etiquetas de inicio y fin.
<div id="menu" align="right" >

<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Artculo de contenido</h5>
<p>Este prrafo ser un contenedor
de todo el material legible.</p>
</div>
13
El resultado de ste cdigo sera:
14
HOME | CONTACT | ABOUT

Artculo de contenido
Este prrafo ser un contenedor de todo el material legible.
Antes de comenzar con el CSS quiero exponer aqu la importancia de usar los divs, un div es
bsicamente un contenedor, en el podemos meter cualquier clase de contenido, con la gran
ventaja de que los podemos manipular a nuestro antojo con CSS, colocarlo en cualquier parte
de la pagina, de cualquier tamao, de cualquier color, con bordes o sin ellos, con imgenes de
fondo o sin ellas, a diferencia de las tablas, los divs no se dividen por dentro, pero podemos
anidarlos y organizarlas casi como las tablas (en caso de ser necesario).
Para una mejor comprensin de la utilizacin de los divs con CSS,

dirjase al Anexo 1 (El modelo de caja de CSS), lalo y realice el
ejercicio citado en el mismo.
Ahora que ya tenemos una mejor comprensin de la utilizacin de estas herramientas, vamos
a ampliar un poco estos conocimientos realizando un ejercicio que nos acerca ms a la
estructura de un sitio web.
Dirjase al Anexo 2 (Componer un diseo de 3 columnas en XHTML y

CSS), lalo y realice el ejercicio citado en el mismo.
TABLAS
Las tablas nos sern de gran utilidad para la presentacin de informacin de una forma
tabulada
Las etiquetas que utilizaremos para la ceracin de tablas son:
<table> : crea la tabla.
<caption> : pone ttulo a la tabla.
<tr>: crea una fila.
<td>: crea una celda.
<th>: crea una celda de encabezamiento.
15
16
En el siguiente ejemplo realizaremos la creacin de una tabla de 2X2
<table>
<caption>Videojuegos</caption>
<tr>
<th>Ttulo</th>
<th>Gnero</th>
</tr>
<tr>
<td>Sonic</td>
<td>Plataformas</td>
</tr>
</table>
El resultado sera:
Ttulo
Sonic
Gnero
Plataformas
Es muy conveniente tener especial cuidado en las sangras ya que

nos ayudan a verificar que cada etiqueta abierta sea correctamente
cerrada.
Por cada fila que queramos, abrimos una etiqueta <tr> e insertamos all las celdas que
correspondan. Dentro de cada celda podemos meter prcticamente cualquier cosa, pero
debemos tener siempre en mente que el objetivo de las tablas es tabular informacin.
Las tablas tienen algunos atributos que nos permiten modificar su visualizacin, entre los
principales tenemos: width, border, cellpacing, cellpadding. Es recomendable que usted
consulte y ample sus conocimientos acerca de ellos.
FORMULARIOS
Nos permiten recoger y procesar informacin introducida por visitantes de nuestro sitio web.
Esta informacin, a travs de PHP podra interactuar dinmicamente, ya sea con una base de
datos o con alguna direccin de correo electrnico. Dependiendo de los requerimientos
previos.
La etiqueta FORM
La etiqueta <form> es la encargada de definir lo que ser un formulario. Dentro de ella irn los
campos del que podremos organizarlos a nuestra conveniencia.
17
<form action="consulta.php" method="post">

...
campos...
...
</form>
El atributo action recoge la accin a realizarse una vez que se haya pulsado el botn submit. En
ese ejemplo, el formulario ejecuta el script consulta.php.
El atributo method especifica cmo va a ser enviada la informacin.
La mayora de los campos de un formulario se crea con una sola etiqueta, <input>, y mediante
su parmetro type especificamos el tipo de campo que queremos.
Campos de texto
Este tipo de campo lo utilizaremos para recoger informacin desde el visitante de nuestro sitio
web. Un campo de texto bsico quedara as:
<input type="text" id="nombre" name="nombre" size="20" />
type="text" nos indica que se trata de un campo de texto.

Size determina el ancho del campo, medido en caracteres.
id es un identificador. Implica que nada en todo el documento puede llamarse igual
que este elemento.
name da nombre a la variable de ese campo.
Es recomendable escribir el mismo valor para id y name.
Campos de contrasea
Funcionan de igual manera que un campo de texto, solamente que la informacin que en l se
ingrese aparecer en forma de asteriscos. Su definicin sera:
<input type="password" id="pass" name="pass" size="20" />
reas de texto
Nos permiten la insercin de varias lneas de texto. A diferencia de los campos antes
estudiados, aqu utilizamos la etiqueta <textarea>.
18
En este campo, adems de los atributos id, name y title, disponemos de dos para indicar
dimensiones: cols establece el ancho en caracteres y rows el alto en lneas.
<p>
<label for="comentario">
Algn comentario?
</label>
<br />
<textarea name="comentario" id="comentario" cols="30" rows="5">
Bla bla bla
</textarea>
</p>
Este campo tiene etiqueta de cierre. El texto que hay entre la etiqueta de apertura y la de
cierre es el valor por defecto que contendr el campo; en este caso "Bla bla bla.
Casillas de verificacin (checkbox)
Es una casilla que el usuario puede activar y desactivar. En este tipo de campo, el atributo
value funciona de manera algo distinta. Lo que escribamos en value es lo que nos saldr
como el valor de la variable indicada en el atributo name. Ej:
<p>
Has jugado a ...
<br />
<input type="checkbox" name="monkey1" id="monkey1" value="si" />
<label for="monkey1">
Monkey Island I
</label>
</p>
Al activarse este checkbox, el resultado ser: monkey1 = si.
19
Tambin podemos hacer que una casilla est activada por defecto, si aadimos el atributo
checked="checked". As:
<p>
Has jugado a ...
<br />
<input type="checkbox"
checked="checked" />
<label for="monkey1">
Monkey Island I
</label>
name="monkey1"
id="monkey1"
value="si"
<input type="checkbox" name="xwing" id="xwing" value="si" />

<label for="xwing">
X- Wing Alliance
</label>
</p>
Botones de seleccin
Los radio buttons son casillas circulares agrupadas, en las que slo una puede estar activada a
la vez. Sirven para cuando queremos que el visitante slo seleccione una opcin de las
mltiples que se le dan.
Este tipo de campos se agrupan dando el mismo nombre de variable a cada botn. El atributo
name es el mismo para todo el grupo, el id en cada botn debe ser distinto, es el nombre
dado a ese botn especficamente. En otras palabras, los radio buttons son los nicos campos
en los que la id y name deben ser diferentes. El atributo value contiene el texto que tendr la
variable en caso de que se seleccione ese botn. Disponemos adems del atributo checked por
si queremos marcar alguna opcin por defecto.
20
<p>
Ecuador est ubicado en:<br />
<input type="radio" name="ubicacion" id="bt_america" value="amer"
checked="checked" />
<label for="bt_america">
Amrica
</label><br />
<input type="radio" name="ubicacion" id="bt_asia" value="asia" />
<label for="bt_asia">
Asia
</label><br />
<input type="radio" name="ubicacion" id="bt_africa" value="afri" />
<label for="bt_africa">
Africa
</label>
</p>
Listas de seleccin
De manera similar a los radio buttons, nos permiten presentar varias opciones de las cuales el
usuario deber escoger solamente una. Este tipo de elementos nos presenta la ventaja de que
aparece plegada y no ocupa mayor espacio en nuestro sitio.
Se crea con la etiqueta <select> </select>. Entre ellas, insertamos las opciones que tenemos
con la etiqueta <option>. Pongamos el mismo ejemplo utilizado anteriormente.
<p>
<label for="ubicacion">
Ecuador est ubicado en :
</label><br />
<select name="ubicacion" id="ubicacion">
<option value="amer" selected="selected"> Amrica </option>
<option value="asia"> Asia </option>
<option value="afri" > Africa </option>
</select>
</p>
Con selected="selected" indicamos cul es la opcin por defecto, en este caso Amrica.
21
Botones de enviar y reestablecer
Ya hemos visto todos los campos de formulario que podemos crear, ahora slo nos falta
comentar dos botones especiales: el de enviar (submit) y el de reestablecer (reset).
Ambos se crean con <input>. El atributo id no tiene mucho sentido, a menos que usemos CSS
para cambiar su aspecto de un modo concreto y exclusivo. Asmismo, name tampoco nos ser
til si no empleamos algn tipo de script para tratar la informacin.
En value indicaremos el texto que aparecer en el botn. El botn de enviar se encarga de
mandar la informacin del formulario, segn lo que hayamos especificado en <form>. Para
crear el botn, simplemente indicamos type="submit":
<input type="submit" value="Enviar" />
El botn de reestablecer borra el formulario y vuelve a poner los valores por defecto. til para
formularios largos. Lo conseguimos con type="reset":
<input type="reset" value="Borrar" />
22
UNIDAD 3
PHP y MYSQL
Mi primer script
Una vez que ya tenemos instalados PHP y MySQL, y el servidor Apache configurado para
usarlos, podemos comenzar a escribir nuestro primer Script en PHP.
Ejemplo script php
<html>
<body>
<?php
$ myvar = "Hola Mundo. Este es mi primer script en PHP";
// Esto es un comentario
echo $myvar;
?>
</body>
</html>
Una vez escrito esto lo guardamos en un fichero con la extensin .php, y lo colocamos en
nuestro servidor bajo una carpeta llamada ejemphp, http://127.0.0.1/ejemphp/test.php.
Ahora si ponemos esta URL en nuestro navegador veremos una lnea con el texto "Hola
Mundo. Este es mi primer script en PHP".
Lo primero que apreciamos en el script son sus delimitadores. En la primera lnea del script
vemos <?php que nos indica que comienza un script en PHP, y en la ltima colocamos ?>
para indicar el final del script. Hay que destacar que todas las lneas que se encuentre entre
estos delimitadores deben acabar en punto y coma, excepto las sentencias de control (if,
swich, while, etc.).
Como en toda programacin, es importante poner muchos comentarios, para lo cual si
queremos comentar una sola lnea tenemos que poner al principio de la lnea //, si lo que
queremos es comentar varias utilizaremos los delimitadores /* */.
Para que el servidor enve texto utilizaremos la instruccin echo, aunque tambin podemos
utilizar printf.
Finalmente, vemos que la palabra myvar comienza con el signo dlar ($). Este smbolo le
indica a PHP que es una variable. Nosotros le hemos asignado un texto a esta variable, pero
tambin pueden contener nmeros o arrays. Es importante recordar que todas las variables
comienzan con el signo dlar.
23
Comenzando con MySQL

Antes de seguir con PHP, vamos a preparar la base de datos (BD) que vamos a utilizar como
ejemplo. Como servidor de BD, usaremos MySQL un pequeo y compacto servidor de BD, ideal
para pequeas y medianas aplicaciones. MySQL soporta el estndar SQL (ANSI), y adems est
disponible para distintas plataformas, incluido "windows".
Vamos a valernos de la herramienta phpMyAdmin que viene junto al programa Xampp que ya
instalamos en la primera unidad para realizar la creacin de una nueva base de datos y sus
tablas. Existen otras herramientas pero no suelen ser de libre utilizacin.
Realizamos la creacin de nuestra base de datos, en este caso le pondr de nombre mydb.
Recuerde que la creacin de esta base de datos y las diferentes tablas podramos realizarlas en
modo de consola, pero para facilitarnos las cosas he decidido utilizar el entorno grfico
proporcionado por la aplicacin.
Ahora realizaremos la creacin de una tabla y algunos registros.
Realizamos la creacin de los diferentes campos.
24
El campo id no puede estar vacio y es autoincrementable, lo cual deberemos tener en

cuenta a la hora de actualizar y aadir registros.
Ingrese algunos datos en la tabla creada para tener informacin con

la cual trabajar.
Conectar a MySQL desde PHP

Con el siguiente script nos conectaremos a la BD del servidor MySQL.
Conexin al MySQL
<?php
class variables{
var $usuario=root;
var $clave=;
var $ip=127.0.0.1;
var $base_de_datos=mydb;
}
function conectarse(){
$ob=new variables;
$usuario=$ob->usuario;
$clave=$ob->clave;
$ip=$ob->ip;
$base=$ob->base_de_datos;
if(!($conn=mysql_connect($ip, $usuario, $clave))){
echo Error de conexin al servidor;
exit();
}
if(!$conn=mysql_select_db($base, $conn)){
echo Error de conexin a la base de datos;
exit();
}
return $conn;
}
?>
25
En este script (conexin.php), primeramente hemos creado la clase variables en la cual
deberamos poner todos los datos para realizar la conexin a la base de datos. Algunos de
estos datos como usuario y clave deberan venir desde nuestra aplicacin en ejecucin.
En la funcin conectarse, luego de recoger las variables ya ingresadas, hacemos un llamado a
la funcin mysql_connect(), que abre una conexin con el servidor MySQL en el Host
especificado (en este caso la misma mquina en la que est alojada el servidor MySQL,
localhost). Tambin debemos especificar un usuario root, y si fuera necesario un password
para el usuario indicado. El resultado de la conexin es almacenado en la variable $conn.
Con la funcin mysql_select_db() PHP le dice al servidor que en la conexin $conn nos
queremos conectar a la base de datos mydb.
Si no hemos tenido ningn error en realizar la conexin al servidor indicado o seleccionar la
base de datos escogida, se nos enva la conexin realizada bajo la variable $conn.
Mostrar los datos de una consulta

Ahora que ya sabemos conectar con el servidor de BD, veremos cmo mostrar algunos datos
por pantalla.
Consulta de la BD
<?php
include("conexion.php");
extract($_POST);
$conn=conectarse();
$consulta="SELECT nombre, direccion FROM agenda";
echo "<table border = '1'> \n";
echo "<tr><td align='center'><strong>Nombre</strong></td><td
align='center'><strong>Direccion</strong></td></tr> \n";
$resultado=mysql_query($consulta);
while($fila=mysql_fetch_array($resultado)){
echo "<tr><td>$fila[0]</td><td>$fila[1]</td></tr> \n";
}
echo "</table> \n";
mysql_free_result($resultado);
$conn="";
?>
En este script, primeramente hacemos un llamado al script anteriormente creado desde donde
recogemos la conexin en la variable $conn, luego en una variable en este caso $consulta
almacenamos la consulta de tipo SQL que haremos a la base de datos.
La siguiente funcin mysql_query(), es la que hace el trabajo duro, usando el identificador de
la conexin ($consulta), enva la instruccin SQL al servidor MySQL para que ste la procese. El
resultado de sta operacin es almacenado en la variable $resultado.
26
En este script hemos introducido dos novedades, la ms obvia es la sentencia de control
while(), que tiene un funcionamiento similar al de otros lenguajes, ejecuta una cosa mientras
la condicin sea verdadera. En esta ocasin while() evala la funcin mysql_fetch_array(), que
devuelve un array con el contenido del registro actual (que se almacena en $fila) y avanza una
posicin en la lista de registros devueltos en la consulta SQL.
La funcin mysql_fetch_array() admite referencias numricas a los campos obtenidos de la
consulta, as como podemos tambin referenciar a los campos por su nombre. El primer
campo referenciado es el 0, el segundo el 1 y as sucesivamente.
Para realizar una consulta relacionando dos tablas, he realizado la creacin de otra tabla que la
he llamado empleo en la cual tenemos un campo que permite relacionar los registros de
ambas tablas.
Realice la creacin de una segunda tabla llamada empleo con los
campos a continuacin mostrados. Inserte algunos registros
relacionados con la tabla anteriormente creada. (Utilice el campo
dni para relacionar ambas tablas)
En esta consulta deseo presentar los datos personales extrados desde la tabla agenda,
adems del cargo y sueldo extrados de la tabla empleo de acuerdo con el dni solicitado.
<?php
extract($_POST);
$conn=conectarse();
$dni_empleado="0978654312";
$a="agenda a";
$e="empleo e";
$consulta="SELECT a.nombre, a.direccion, a.email, e.cargo, e.basico
FROM $a, $e WHERE a.dni = e.dni AND e.dni=$dni_empleado";
echo "<table border = '1'> \n";
echo "<tr><td align='center'><strong>Nombre</strong></td><td
align='center'><strong>Direccion</strong></td><td
align='center'><strong>Correo</strong></td><td
27
align='center'><strong>Cargo</strong></td><td
align='center'><strong>Sueldo</strong></td></tr> \n";
echo
"<tr><td>$fila[0]</td><td>$fila[1]</td><td>$fila[2]</td><td
>$fila[3]</td><td>$fila[4]</td></tr> \n";
}
echo "</table> \n";
$conn="";
?>
Como usted podr ver, he realizado la creacin de unas variables que harn la vez de alias a
las tablas de nuestra base de datos. Esto nos permite facilitar la relacin que haremos al
solicitar la consulta.
Es muy conveniente que usted revise la forma de utilizar las
sentencias INSERT INTO, UPDATE, DELETE y otras necesarias en el
tratamiento de bases de datos.
Vamos a realizar un ejercicio en el cual vamos a aplicar estos tres tipos de sentencias en las
tablas de nuestra base de datos.
Primeramente necesitar un archivo que me permita presentar las diferentes opciones de
administracin a realizar. En este caso lo llamar demo.html.
<html>
<body>
<p><a href="formInserta.php" target="_self">Insertar registros</a></p>
<p><a href="formModifica.php" target="_self">Modificar registros</a></p>
<p><a href="formElimina.php" target="_self">Eliminar registros</a></p>
</body>
</html>
1. La primera opcin para insercin de registros realiza un llamado al archivo

formInserta.php en el cual veremos el siguiente cdigo.
<html>
<body>
<form method="post" action="inserta.php">
Nombre
: <input type="Text" name="nombre"><br>
Direccin: <input type="Text" name="direccion"><br>
Telfono : <input type="Text" name="telefono"><br>
E-mail
: <input type="Text" name="email"><br>
28
Dni
: <input type="Text" name="dni" /><br>
Cargo
: <input type="Text" name="cargo"><br>
Sueldo
: <input type="Text" name="sueldo"><br>
<input type="Submit" name="enviar" value="Aceptar informacin">
</form>
</body>
</html>
Este cdigo se encarga de recoger la informacin a ser almacenada y por medio de un

formulario lo enva al archivo inserta.php.
<html>
<body>
<?php
A
$nombre=$_POST['nombre'];
$direccion=$_POST['direccion'];
$telefono=$_POST['telefono'];
$email=$_POST['email'];
$dni=$_POST['dni'];
$cargo=$_POST['cargo'];
$sueldo=$_POST['sueldo'];
C
$conn=conectarse();
$consulta="INSERT INTO agenda (nombre, direccion, telefono, email,
dni) VALUES ('$nombre', '$direccion', '$telefono', '$email',
'$dni')";
E
$consulta="INSERT INTO empleo (dni, cargo, basico) VALUES ('$dni',
'$cargo', '$sueldo')";
echo "Gracias! Hemos recibido sus datos.\n";
$conn="";
?>
</body>
</html>
Este archivo est encargado de:

A. Realiza un llamado al archivo de conexin con la base de datos.
B. Lee las variables tradas desde el formulario de insercin.
C. Establece la conexin.
D. Establece la consulta de insercin de campos en la primera tabla.
E. Ejecuta la consulta.
Repite los dos pasos anteriores pero con la segunda tabla.
F. Cierra la conexin.
29
2. La opcin de modificar registros hace un llamado al archivo "formModifica.php" en el
cual solamente estamos recogiendo el campo dni del registro que queremos
modificar.
<html>
<body>
<form method="post" action="modifica.php">
Dni : <input type="Text" name="dni" /><br />
<input type="Submit" name="enviar" value="Aceptar informacin">
</form>
</body>
</html>
Luego de recogida esta variable, se hace un llamado a modifica.php, en el cual se realizarn

los siguientes pasos.
<html>
<body>
<?php
B
D
F
?>
A
$dni=$_POST['dni'];
$conn=conectarse();
C
$a='agenda a';
E
$e='empleo e';
$consulta="SELECT a.nombre, a.direccion, a.telefono, a.email,
e.cargo, e.basico FROM $a, $e WHERE a.dni=e.dni AND e.dni=$dni";
$fila=mysql_fetch_array($resultado);
G
<form method="post" action="actualiza.php">
Nombre
: <input type="Text" name="nombre" value="<?php echo
$fila[0] ?>" /><br />
Direccin: <input type="Text" name="direccion" value="<?php
echo $fila[1] ?>" /><br />
Telfono : <input type="Text" name="telefono" value="<?php echo
$fila[2] ?>" /><br />
E-mail
: <input type="Text" name="email" value="<?php echo
$fila[3] ?>" /><br />
Dni
: <input type="Text" name="dni" value="<?php echo $dni
?>" /><br />
Cargo
: <input type="Text" name="cargo" value="<?php echo
$fila[4] ?>" /><br />
Sueldo
: <input type="Text" name="sueldo" value="<?php echo
$fila[5] ?>" /><br />
<input type="Submit" name="enviar" value="Aceptar informacin"
/>
</form>
<?php
$conn="";
?>
</body>
</html>
30
A. Realiza un llamado al archivo de conexin con la base de datos.

B. Lee la variable trada desde el formulario de modificacin.
C. Establece la conexin.
D. Se establece los alias para las tablas involucradas.
E. Establece la consulta de seleccin de campos relacionados con la variable trada del
formulario anterior.
F. Ejecuta la consulta.
G. Se almacena el resultado de la consulta en un arreglo llamado fila.
H. Se rellena los nuevos campos de texto a modificar, con los datos recogidos desde la
base de datos.
I. Se presenta el botn que enviar la informacin al archivo actualiza.php.
J. Cierra la conexin.
Una vez realizados los cambios necesarios en los campos anteriormente mostrados, estas
variables son recogidas por el script actualiza.php y se enva a realizar las modificaciones en
la base de datos en los registros de las tablas involucradas. Usted puede ver los pasos en el
siguiente cdigo (pasos bastante similares a los descritos en un script anterior).
<html>
<body>
<?php
$nombre=$_POST['nombre'];
$direccion=$_POST['direccion'];
$telefono=$_POST['telefono'];
$email=$_POST['email'];
$dni=$_POST['dni'];
$cargo=$_POST['cargo'];
$sueldo=$_POST['sueldo'];
$conn=conectarse();
$consulta="UPDATE agenda SET nombre='$nombre',
direccion='$direccion', telefono='$telefono', email='$email' WHERE
dni=$dni";
$consulta="UPDATE empleo SET cargo='$cargo', basico='$sueldo'
WHERE dni=$dni";
echo "Gracias! Hemos modificado sus datos.\n";
$conn="";
?>
</body>
</html>
3. La opcin de eliminar registros hace un llamado al script formElimina.php, cuyo

funcionamiento es similar al del archivo formModifica.php, solamente cambia el
archivo de destino del formulario.
31
<html>
<body>
<form method="post" action="elimina.php">
Dni
: <input type="Text" name="dni" /><br />
<input type="Submit" name="enviar" value="Buscar">
</form>
</body>
</html>
Este nuevo script se encargar de presentar en pantalla los datos a ser eliminados segn sea el
pedido del script anterior.
<html>
<body>
<?php
$dni=$_POST['dni'];
$conn=conectarse();
$a='agenda a';
$e='empleo e';
e.cargo, e.basico FROM $a, $e WHERE a.dni=e.dni AND e.dni=$dni";
?>
<form method="post" action="borra.php">
Nombre
: <input type="Text" name="nombre" value="<?php echo
$fila[0] ?>" /><br />
Direccin: <input type="Text" name="direccion" value="<?php echo
$fila[1] ?>" /><br />
Telfono : <input type="Text" name="telefono" value="<?php echo
$fila[2] ?>" /><br />
E-mail
: <input type="Text" name="email" value="<?php echo
$fila[3] ?>" /><br />
Dni
: <input type="Text" name="dni" value="<?php echo $dni ?>"
/><br />
Cargo
: <input type="Text" name="cargo" value="<?php echo
$fila[4] ?>" /><br />
Sueldo
: <input type="Text" name="sueldo" value="<?php echo
$fila[5] ?>" /><br />
<input type="Submit" name="enviar" value="Eliminar informacin" />
</form>
<?php
$conn="";
?>
</body>
</html>
Una vez de que el usuario verifique que son los datos que desea eliminar, llama al script
borra.php que se encargar de eliminar el registro de la base de datos.
32
<html>
<body>
<?php
$dni=$_POST['dni'];
$conn=conectarse();
$consulta="DELETE FROM agenda WHERE dni=$dni";
$consulta="DELETE FROM empleo WHERE dni=$dni";
echo "Gracias! Hemos eliminado sus datos.\n";
$conn="";
?>
</body>
</html>
33
UNIDAD 4
FLASH (INTERACCIN CON DATOS EXTERNOS)
Como hemos visto en el primer vdeo explicativo, flash adems de ser utilizado para la creacin
de animaciones, interpolaciones, movimientos y dems efectos, puede ser tambin utilizado
para interactuar con archivos externos como imgenes vectoriales, mapa de bits, sonidos,
vdeos, o algunas otras aplicaciones creadas tambin en Flash.
As tambin puede interactuar con archivos externos para el intercambio de datos. Como
ejemplos vamos a realizar la recuperacin y utilizacin de datos importados desde archivos de
tipo txt, xml, y desde bases de datos a travs de aplicaciones tipo php ya estudiadas.
Vamos a ir observando cada uno de estos casos, cuyos ejemplos podrn ser descargados del
Entorno Virtual de Aprendizaje.
Aunque el cdigo de los programas puede ser implementado en
Macromedia Flash 8, es recomendable que usted tenga instalado
mnimo el Adobe Flash CS3, ya que originalmente sern creados en
Adobe Flash CS4 y este programa puede cambiar el formato de sus
archivos solamente hasta la versin anterior.
Para realizar la interaccin y para organizar nuestros archivos, he realizado la siguiente

creacin de carpetas, dentro de las cuales los ubicaremos segn su tipo.
34
CARGA DE IMGENES
La carga de imgenes se realiza por medio del comando loadMovie para ser aplicada a un
movieClip que en nuestro ejemplo tendr el nombre de mc_imagenes como instancia y en su
interior no tendr nada.
Este comando puede ser utilizado de algunas maneras como:
1. Cargar a un movieClip desde un fotograma. (ver cargaImagenes1.fla)
loadMovie("imagenes/Mustang01.jpg", mc_imagenes);
Ejemplo 1. Carga de imagen en movieClip
mc_imagenes.loadMovie("imagenes/Mustang01.jpg");
Ejemplo 2. Carga de imagen en movieClip
2. Desde la lnea de comando de un botn. (ver cargaImagenes2.fla)

on (release){
mc_imagenes.loadMovie("imagenes/Mustang01.jpg" );
}
Ejemplo 3. Carga de imagen desde botn
Esta carga de imgenes puede ser parte de un programa que interactivamente actu sobre
algunas imgenes como lo veremos en el siguiente ejemplo. (ver cargaImagenes3.fla)
En el ejemplo adjunto usted podr ver en la librera que se ha utilizado un solo movieClip
llamado imgenes, del cual he puesto una copia con el nombre de mc_imagenes1 en la
primera capa y otra con el nombre mc_imagenes2 en la segunda capa.
Tambin se ha creado una capa con el nombre acciones en la cual se desarrollara toda la
programacin que a continuacin explicar.
var contador:Number=1;
loadMovie("imagenes/Mustang0"+contador+".jpg", mc_imagenes1);
Cdigo fotograma 1 cargaImagenes3.fla
En este primer fotograma realizamos la creacin de una variable que me permitir generar
nmeros del 1 al 4 que es el nmero imgenes que se desea presentar.
Tambin se realiza la carga de la primera imagen en el primer movieClip.
35
if(contador==4){
contador=1;
}else{
contador++;
}
mc_imagenes2._alpha=0;
En este fotograma primeramente generamos el siguiente valor para la variable contador, luego
cargamos la imagen que toca en el segundo movieClip pero le damos una transparencia total
para que ya se encuentre presente pero an no la veamos.
mc_imagenes2._alpha+=5;
mc_imagenes1._alpha-=5;
Con estas sentencias aumentamos la visibilidad al segundo movieClip mientras que el primero
va aumentando su transparencia.
if(mc_imagenes2._alpha<=95){
gotoAndPlay(8);
}else{
mc_imagenes1._alpha=100;
gotoAndPlay(2);
}
Si el segundo movieClip an no ha logrado su completa opacidad, volvemos al fotograma que

aumenta su opacidad y aumenta la transparencia del primer movieClip.
En el caso contrario, cargamos en el primer movieClip la imagen que ya est cargada en el
segundo y le damos una opacidad completa para volver a realizar las acciones con las
siguientes imgenes.
Por ltimo regresamos al fotograma anterior a la carga del segundo movieClip, lo que nos
permitir evitar que se vea la transicin y carga de la siguiente imagen y empezar la nueva
interaccin con la imagen que toca presentar.
36
Para aumentar o disminuir el nmero de imgenes, solamente deber crearlas con el nombre
que les corresponde, adjuntarlas en el directorio indicado y aumentar o disminuir el nmero al
cual debe llegar la variable en el proceso condicional del tercer fotograma.
Para aumentar el tiempo de duracin de las imgenes presentes, deber insertar ms
fotogramas (f5) entre el fotograma tres y el fotograma ocho, y luego modificar en el ltimo
fotograma de cdigo la posicin en donde se encuentra ahora el fotograma que aumenta o
disminuye opacidad.
CARGA DE SONIDOS
La carga de sonidos se realiza creando una nueva variable que ser de tipo objeto de sonido
en la cual cargaremos el sonido importado desde alguna URL especfica como lo vemos en el
cdigo adjunto. (ver cargaSonidos.fla)
var mi_sonido:Sound = new Sound();

mi_sonido.loadSound("sonidos/audio"+contador+".mp3", true);
Cdigo fotograma 2 cargaSonidos.fla
Como usted puede ver, he realizado algunas modificaciones a un ejemplo anterior y he

agregado el cdigo anteriormente citado en el segundo fotograma de la animacin, tambin
he debido realizar la modificacin del tiempo de presentacin de las imgenes para poder
apreciar el sonido que se est importando con cada una de ellas.
Hemos utilizado adems los mismos valores que se generan en el cdigo visto en la animacin
anterior para generar un orden especfico en la presentacin de los sonidos.
Para ejecutar este ejemplo debe guardar los archivos de sonido
subidos al EVA en la carpeta correspondiente.
CARGA DE ANIMACIONES
Para la carga de animaciones utilizaremos los mismos comandos que se utilizan para la carga
de imgenes. (ver cargaSwfs.fla)
Para ilustrar este ejemplo he modificado el archivo antes utilizado para interactuar con
imgenes, en el cual solamente he realizado el cambio del tipo de archivo a cargar.
37
"swfs/animacion"+contador+".swf"
Cdigo para cambio de elemento a importar. cargaSwfs.fla
As, he creado cuatro animaciones en flash que han sido almacenadas en la carpeta swfs
desde donde sern importadas a la animacin que los solicite.
Para ejecutar este ejemplo debe guardar los archivos
animacion1.swf,
animacion2.swf,
animacion3.swf
y
animacion4.swf de flash subidos al EVA en la carpeta
correspondiente.
Estas nuevas animaciones como usted podr ver, han sido creadas insertando la imagen
directamente en la animacin. Este tipo de elaboracin de animaciones es ms fcil de
elaborar pero como usted ver en el siguiente ejemplo, representa aumentar el peso de sus
archivos.
Las animaciones, podran ser ms livianas si la imagen que utilizo en ellas fuera llamada
dinmicamente desde la carpeta contenedora. (ver cargaSwfsb.fla)
Para ejecutar este ejemplo debe guardar los archivos
animacion1b.swf, animacion2b.swf, animacion3b.swf y
animacion4b.swf de flash subidos al EVA en la carpeta
correspondiente.
Si usted analiza cada una de las animaciones ltimamente citadas, podr ver que son un poco
ms difciles de realizar, pero en comparacin con las antes realizadas representan un 8% del
peso total y por consiguiente una mayor ventaja al ser utilizadas en Web.
En las dos clases de animaciones antes utilizadas (ej: animacion1.swf y animacion1b.swf),
usted podr ver que dentro de la carpeta contenedora el primero se ejecuta sin ningn
problema, pero el segundo no nos presenta nada.
Esto se da porque el segundo ejemplo utiliza una ruta para localizar el archivo de imagen a
insertar.
imagen.loadMovie("imagenes/Mustang01.jpg");
El momento que esta animacin es llamada por el programa principal cargaSwfsb.swf, esta
se vuelve parte de l y por lo tanto la ruta se evala a partir de la ubicacin del archivo padre,
en este caso cargaSwfsb.fla.
38
En el caso de que nosotros deseemos que funcione en el directorio contenedor, la ruta debera
ser:
imagen.loadMovie("../imagenes/Mustang01.jpg");
Las rutas de carga de archivos en Flash son tratadas al igual que en HTML, en este caso ../
significa que deber primero subirse un nivel para continuar con la bsqueda de la carpeta
correspondiente.
Como usted puede ver, por medio de este tipo de carga de elementos externos, podemos
crear animaciones bastante livianas para la web, las cuales dependiendo de la programacin,
harn los llamados a los diferentes elementos solamente en el momento en que vayan a ser
utilizados, los mismos que se descargarn luego de ello.
Esta forma de programacin nos permite tener aplicaciones mucho ms sencillas de depurar y
de insertar en nuestros sitios web.
Al contrario, si nosotros realizamos toda la programacin, inclusin de archivos y animaciones
en un solo archivo o animacin, nos generar un producto bastante pesado para ser cargado
en web y muy poco recomendable ya que como usuarios casi nunca tenemos la paciencia para
esperar que se cargue algo pesado para poder visualizarlo.
CARGA DE VDEOS
La insercin de vdeos es relativamente sencilla, ya que el mismo programa nos lo puede dar
realizando y cuenta con algunos skins para ser utilizados en su reproduccin.
Para ello vamos a seguir las siguientes instrucciones:
Con un nuevo archivo de flash vamos a ir al men: Archivo -> Importar -> Importar vdeo
39
Luego debemos examinar la direccin en donde tenemos almacenado nuestro video.
Escogemos el video a insertar (debe ser en formato .flv), y pasaremos a la ventana anterior a
digitar el botn siguiente.
40
En esta ventana se nos permite escoger el skin o modo de presentacin como deseamos ver
nuestro vdeo.
Luego pulsamos siguiente y finalizar y ya tendremos nuestro archivo de video cargado.
41
Luego de esto solamente debemos configurar el tamao como queremos se nos presente, y
guardarlo en la carpeta correspondiente. (ver video.fla)
Este archivo al igual que las animaciones anteriormente vistas, puede ser llamado por algn
archivo principal (ver cargaVideo.fla), y si tenemos algn problema con las rutas de acceso al
archivo del vdeo, podemos modificarlas pulsando las teclas (Shift f7) para modificar las
propiedades del componente.
42
Recuerde modificar las rutas de acceso tanto para el archivo que importa el vdeo como para el
archivo que se crea para el control del mismo.
RECUPERACIN DE DATOS DESDE ARCHIVO TXT

Una de las funcionalidades de Flash es la de poder interactuar con datos importados desde
otros medios.
La forma ms sencilla de realizar este proceso, es la carga de variables desde un archivo de
tipo txt. Estas variables para ser reconocidas por flash deben estar precedidas por el smbolo
&.
Ejemplo: doc01.txt
&titulo=UNIVERSIDAD TCNICA PARTICULAR DE LOJA
&misvis=Desde el humanismo cristiano, formar al hombre a travs
de la ciencia para que sirva a la sociedad.

&resumen=La universidad trata de llegar a todos los rincones del
pas, a todas aquellas personas que por una u otra razn no
pueden acceder a una educacin de modalidad presencial.
Para ello cuenta con 84 centros universitarios en todo el pas y
cuatro en el exterior.
43
Estos archivos de tipo txt, deben ser grabados con el formato de texto de tipo unicode para
que los caracteres especiales como y tildes sean reconocidas sin problemas. El lmite de
contenido en estas variables ser cuando encuentre un nuevo smbolo &, no cuando
encuentre un salto de lnea o comillas como en el ejemplo anterior en el cual tenemos tres
variables.
As tambin, estas variables pueden contener algunas etiquetas bsicas de HTML, las cuales
sern interpretadas por flash.
Ejemplo: doc01Css.txt
&titulo=<p class='tituloSup'>UNIVERSIDAD TCNICA PARTICULAR DE
LOJA</p>
&misvis=<p class='titulo'>Desde el humanismo cristiano, formar al
hombre a travs de la ciencia para que sirva a la sociedad</p>
&resumen=<p>La universidad trata de llegar a todos los rincones
del pas, a todas aquellas personas que por una u otra razn no
pueden acceder a una educacin de modalidad presencial.<p><br><p
class='concepto'>Para ello cuenta con 84 centros universitarios
en todo el pas y cuatro en el exterior.</p><br><li>Escuelas<br
/>Facultades<br />Cittes</li><br><p><a
href="http://www.utpl.edu.ec">http://www.utpl.edu.ec</a></p>
Para realizar la carga de variables desde un archivo de texto, debemos crear un moviClip que
contenga los campos de texto que deseamos cargar en los cuales configuraremos entre sus
propiedades el nombre de variables como el de aquellas que vienen del archivo de texto. (ver
cargatxt.fla)
Estos campos de texto debern ser de tipo texto dinmico.
En nuestro ejemplo he creado un movieClip que tiene el nombre mc_texto como instancia,
dentro de l tenemos tres campos de texto sin nombre como instancia pero nombrados como
variables con los nombres de los campos que vienen del archivo doc01.txt. Adems
dependiendo del contenido que se vaya a almacenar en ellos debern tener o no un
comportamiento de lnea nica o multilnea.
Para finalizar, ingresamos en un fotograma el cdigo que me permite cargar los datos.
mc_texto.loadVariables("txts/doc01.txt");
Cdigo para importar variables de archivo de texto.
El resultado debera mostrarse de esta manera.
44
RECUPERACIN DE DATOS DESDE UN ARCHIVO XML

Este tipo de carga de datos requiere un poco ms de esfuerzo en la importacin de sus datos.
Primeramente debemos tener presente como es la organizacin de datos en nuestro archivo
de tipo xml.
Ejemplo: doc01.XML
<?xml version="1.0" encoding="iso-8859-1"?>
< informacion>
<info1>UNIVERSIDAD TCNICA PARTICULAR DE LOJA</info1>
<info2>Desde el humanismo cristiano.....</info2>
<info3>La universidad trata de llegar a .....</info3>
<color>0x6CC5E7</color>
<cuantos>5</cuantos>
<menu>
<opcion>Presentacin</opcion>
<opcion>Ponencias</opcion>
<opcion>Comunicaciones</opcion>
<opcion>Entrevistas</opcion>
<opcion>Galera</opcion>
</menu>
</informacion>
45
La organizacin se realiza en forma de rbol, en donde para acceder a ciertos datos debemos
partir de la raz y seguir una ruta determinada.
informacion
info1
info2
iInfo3
color
cuantos
menu
opcion
opcion
opcion
opcion
opcion
Organizacin de etiquetas en el archivo XML.
As, cada una de estas ramas, tendr su nombre determinado y la continuidad por ellas nos
permitir acceder a sus datos.
firstChild
childNodes[0]
childNodes[1]
childNodes[2]
childNodes[3]
childNodes[4]
childNodes[5]
childNodes[0]
childNodes[1]
childNodes[2]
childNodes[3]
childNodes[4]
Organizacin de nodos de acceso a etiquetas del archivo XML.
As, vamos a revisar esta recuperacin de informacin en el primer fotograma de la capa

acciones de nuestro ejemplo (cargaxml.fla)
46
ruta="xmls/doc01.xml";
var vars_xml:XML = new XML();
vars_xml.ignoreWhite = true;
vars_xml.load(ruta);
vars_xml.onLoad = function(exito){
if (exito){
_global.var01=vars_xml.firstChild.childNodes[0].firstChild.nodeValue;
_global.exa_color=vars_xml.firstChild.childNodes[3].firstChild.nodeValue;
_global.cantidad=Number(vars_xml.firstChild.childNodes[4].
firstChild.nodeValue);
for(i=0; i<_global.cantidad; i++){
_global["men"+i]=vars_xml.firstChild.childNodes[5].childNodes[i].
firstChild.nodeValue;
}
}
nextFrame();
}
stop();
Cdigo para importar datos de archivo de tipo XML.
En la primera lnea de cdigo guardamos en la variable ruta la direccin donde tenemos

almacenado nuestro archivo XML.
Creamos una variable vars_xml de tipo objeto XML.
La sentencia ignoreWhite permitir que los valores recuperados desde el archivo XML, sean
tratados por separado.
vars_xml.load(ruta), carga el archivo XML en la variable creada para ello.
Luego tenemos una funcin que estar encargada de cumplir dos tareas principales, la
distribucin de los datos importados en variables individuales y dar la orden de avanzar al
siguiente fotograma.
En la primera tarea, se crea variables globales para que sean utilizadas desde cualquier punto
de nuestro programa y les asigna uno de los valores importados, ej:
Con esta sentencia, y fijndonos en la descripcin de rbol antes detallada, vemos que en la
variable _global.var01 se almacena lo que originalmente habamos almacenado entre las
etiquetas <info1> de nuestro archivo XML.
La parte de la sentencia que dice .firstChild.nodeValue me permite extraer la
informacin desde el lugar en donde nos ubicamos.
47
El proceso repetitivo generar valores para la variable i, segn la cantidad tambin trada
desde el archivo XML. En este caso se generarn nmeros del 0 al 4 que son los subndices que
necesitamos para acceder a las opciones de la etiqueta <menu>.
As mismo, se generan dinmicamente variables para almacenar los valores.
En flash la generacin dinmica de nombres se la realiza con la utilizacin de corchetes para
reemplazar al punto. Para acceder a ellas podramos utilizar la misma notacin o la tradicional.
Ej: Si i = 2 y segn nuestro archivo XML.
_global["men"+i] = _global["men"+2] = _global.men2 = Comunicaciones
Una vez que ya tenemos en nuestro programa los datos, pasamos al siguiente fotograma en
donde encontramos el siguiente cdigo.
mc_texto.titulo=_global.var01;
mc_texto.misvis=_global.var02;
mc_texto.resumen=_global.var03;
Previamente en nuestro programa ejemplo hemos creado un movieClip llamado mc_texto el

cual tendr las mismas funciones que el utilizado para la carga de datos de un archivo txt.
Con las sentencias previas lo que hacemos es pasar a las variables del movieClip los valores
correspondientes importados desde el XML y almacenados en las variables globales para ser
presentados.
En esta ubicacin tambin se muestra un botn cuya funcin es la de pasar al siguiente
fotograma.
Las sentencias que van a ir ubicadas en los botones deben ejecutarse de acuerdo a alguna
accin que se ejerza sobre ese botn, en nuestro caso la accin que utilizaremos es release
que quiere decir cuando hagamos clic sobre l y liberemos el mouse. Para detectar este tipo
de eventos, utilizamos la palabra on.
on(release){
nextFrame();
}
Cdigo en botn
Como podr usted ver en este tercer fotograma no se ha insertado manualmente ningn
elemento, solamente tenemos un fotograma de cdigo en la capa acciones, el cual estar
encargado de la generacin dinmica de elementos, que en este caso son copias de un
48
movieClip almacenado en la biblioteca y que entre sus propiedades tiene activada la opcin de
Exportar para ActionScript.
posX=100;
posY=50;
for(i=0; i<_global.cantidad; i++){
this.attachMovie("mc_duplicar", "opcion"+i, this.getNextHighestDepth(),
{_x:posX, _y:posY});
this["opcion"+i].descripcion.text=_global["men"+i];
posY+=30;
}
Cdigo para generacin dinmica de elementos
Primeramente he declarado dos variables con valores iniciales para las posiciones de los
nuevos elementos.
Luego en un proceso repetitivo generaremos los subndices necesarios segn el nmero trado
desde el archivo XML
La sentencia attachMovie trae en este caso una nueva copia del movieClip que tenemos en
la librera mc_duplicar, da un nuevo nombre como instancia a esa nueva copia opcin+i, le
asigna un nivel y por ltimo una posicin en la pantalla.
La siguiente sentencia pone el nombre correspondiente trado desde el XML al campo de texto
que se encuentra dentro de este movieClip.
Por ltimo se incrementa la posicin Y para el ingreso del nuevo elemento a generarse.
Como usted puede ver, la lgica para la generacin iterativa de elementos es relativamente
sencilla.
Previamente debemos haber preparado el movieClip a duplicar.
En nuestro caso, ste consta de dos capas, la primera descripcin en la cual hemos colocado un
campo de texto dinmico llamado descripcion y que ya lo utilizamos en el cdigo antes visto
para actualizar el nombre que le corresponde.
La segunda capa fondo que en este caso podra ser cualquier elemento (grafico, animacin,
botn, etc), en nuestro caso es otro movieClip que ser utilizado por la siguiente sentencia
para personalizar su color de acuerdo al provisto por el archivo XML.
onClipEvent(load){
botonColor = new Color(this);
botonColor.setRGB(_global.exa_color);
}
Cdigo para asignacin dinmica de color
49
Est cdigo deber necesariamente ponerse en el clip de pelcula. Como usted puede apreciar,
a diferencia del cdigo que se asigna a un botn, en un movieClip se solicita atender a otro
tipo de eventos, en este caso la sentencia nos dice que cuando el movieClip se cargue en el
escenario, se cree una variable de tipo objeto de color y luego se le asigne el color que fue
enviado desde el archivo XML.
Usted puede ingresar las capas que desee en el clip a duplicarse, estos clips podran tener
botones, animaciones, etc.
La presentacin de datos en flash podra ser optimizada con la utilizacin de estilos, los cuales
pueden ser llamados desde un archivo externo.
Vamos a ver su aplicacin en el ejemplo original de presentacin desde un archivo de texto.
(Ver cargatxtCss.fla)
Para realizar este ejemplo, hemos tenido que hacer una pequea modificacin en el movieClip
mc_texto, ahora cada uno de los campos de texto debern tambin tener un nombre de
instancia, en este caso le hemos puesto texto1, texto2 y texto3.
El cdigo antes utilizado cambia al siguiente:
var ej_CSS = new TextField.StyleSheet();

var cssURL = "estilos/estilos.css";
ej_CSS.load(cssURL);
mc_texto.loadVariables("txts/doc01Css.txt");
ej_CSS.onLoad = function(success) {
if (success) {
mc_texto.Texto1.styleSheet = ej_CSS;
}else {
trace("Algo paso, no carga nada");
}
}
Aqu primeramente declaramos una variable en la cual cargaremos nuestra hoja de estilos,
declaramos la ruta en donde se encuentra la y pasamos a cargarla.
Cargamos el archivo de texto con cdigos html. (archivo detallado en la carga de archivos de
texto)
Si no hemos tenido ningn inconveniente, aplico la hoja de estilos a cada uno de los textos
dentro del movieClip, caso contrario presento un mensaje de error.
50
FLASH, PHP Y BASES DE DATOS

Adobe Flash nos presta la facilidad de poder comunicarnos e intercambiar datos con un script
de tipo PHP, el cual a su vez se encargar de realizar las respectivas consultas a las bases de
datos.
Para la realizacin de este ejercicio, vamos a utilizar la base de datos que hemos creado en la
unidad anterior, pero ahora las consultas las haremos desde un entorno de tipo Flash.
Ya que las consultas se harn a una base de datos, estos programas debern correr bajo un
entorno de servidor, para ello active el servidor local y corra estos programas desde su carpeta
de trabajo en htdocs si usted est utilizando XAMPP o www si utiliza el WAMP.
En nuestro primer ejemplo realizaremos la consulta de un registro en especfico, para ello
haremos la recepcin por teclado de un DNI y enviaremos a la base de datos. Dependiendo de
su respuesta mostraremos la informacin relacionada o un mensaje que nos indica que tal
registro no existe en nuestra base de datos. (Ver db.fla)
En el primer fotograma de nuestro archivo de flash he colocado tres elementos principales, el
primero es un rea de texto de tipo Introduccin de texto a la cual la he llamado id y la
cual tambin entre sus propiedades tiene activado el mostrar borde alrededor del texto. Esta
rea est destinada para que el usuario ingrese el Id correspondiente al registro que queremos
consultar.
El segundo elemento es un rea de texto de tipo texto dinmico, que tiene como nombre de
variable mensaje y est destinada a indicarnos que no existen elementos con el Id
correspondiente, en el caso de no haberlos.
El tercer elemento es un botn cuya nica funcin es la de llevarnos al siguiente fotograma de
cdigo.
id.text="";
mensaje="";
stop();
Cdigo para iniciacin de variables
En el siguiente fotograma tenemos el cdigo que se encargar de enviar la variable Id desde

flash hacia el script de php y as mismo de recuperar aquella informacin que el script ha
importado desde la base de datos.
51
Flash_a_Php= new LoadVars();

Php_a_Flash=new LoadVars();
Flash_a_Php.dni=id.text;
Php_a_Flash.onLoad=function(){
if(Php_a_Flash.cuantos >= 1){
_global.reg=new Array();
_global.reg[0]=Php_a_Flash.nombre;
_global.reg[1]=Php_a_Flash.direccion;
_global.reg[2]=Php_a_Flash.telefono;
_global.reg[3]=Php_a_Flash.email;
_global.reg[4]=Php_a_Flash.cargo;
_global.reg[5]=Php_a_Flash.sueldo;
nextFrame();
}else{
mensaje="NO EXISTE TAL REGISTRO";
}
}
Flash_a_Php.sendAndLoad("http://127.0.0.1/guia/phps/consulta.php",
Php_a_Flash, "POST");
stop();
Cdigo para intercambio de variables
En este cdigo primeramente hemos creado dos variables de tipo objeto LoadVars(), cada
una de ellas almacenar las variables que enviemos o recuperemos de nuestro escript de PHP.
Estas variables u objetos son de tipo compuestos, es decir que dentro de ellas pueden
almacenar algunas variables ms.
En la tercera lnea de cdigo recogemos en la subvariable Flash_a_Php.dni lo que antes
habamos ingresado en el campo de texto Id. Luego se ejecuta la penltima lnea de cdigo
la cual est encargada de enviar dicha variable al archivo consulta.php y recoger una
respuesta en la variable Php_a_Flash.
La secuencia de eventos nos lleva hasta el archivo consulta.php en donde se ejecutan las
siguientes acciones:
Archivo consulta.php
<?php
$dni=$_POST['dni'];
$conn=conectarse();
$a='agenda a';
$e='empleo e';
e.cargo, e.basico FROM $a, $e WHERE a.dni=e.dni AND

e.dni=$dni";
$numero_reg=mysql_num_rows($resultado);
$contenido="&cuantos=".$numero_reg;
52
$contenido=$contenido."&nombre=".$fila['nombre']."&direccion
=".$fila['direccion']."&telefono=".$fila['telefono']."&em
ail=".$fila['email']."&cargo=".$fila['cargo']."&sueldo=".
$fila['basico'];
echo $contenido;
$conn="";
?>
Primeramente incluye el cdigo de conexin a la base de datos que tenemos en el archivo

conexion.php ya visto antes.
Almacena en la variable $dni el contenido de la variable dni enviada desde la animacin de
flash.
Se realiza la conexin a la base de datos.
Generamos variables alias para las tablas y establecemos la consulta a realizar a nuestra base
de datos. El resultado de la consulta es almacenado en la variable $resultado.
La variable $numero_reg almacenar el nmero de registros que cumplan con la consulta
hecha previamente. De esta variable depender el presentar datos en pantalla o presentar un
mensaje de error.
La variable $contenido almacenar toda la informacin que ser pasada desde la base de
datos hacia la animacin de tipo flash.
La variable $fila almacenar en forma de un arreglo el resultado de la consulta y luego ser
pasada como parte de la informacin de la variable $contenido.
Con la sentencia echo $contenido; pasamos la informacin recopilada hacia la animacin
que es la que previamente hizo la peticin.
Por ltimo simplemente liberamos la base de datos y volvemos a la parte previamente vista de
flash.
Una vez ejecutadas estas acciones volvemos al script de flash exactamente a la funcin
onLoad.
Aqu evaluamos si existe o no resultados de la consulta. De no existir se presentar el mensaje
correspondiente, caso contrario se declara un arreglo y se almacena cada campo trado de la
base de datos en uno de los campos del arreglo que en este caso es de tipo _global para que
pueda ser utilizado desde cualquier punto de la animacin. Por ltimo pasamos al siguiente
fotograma.
En este fotograma hacemos la utilizacin de un clip de pelcula que lo he llamado campos.
Dentro de l existe un campo de texto por cada variable a presentar, estos han sido
nombrados como instancias con nombres similares a las variables, adems de ser de tipo
53
texto dinmico. Con el siguiente cdigo simplemente ingresamos en estos campos de texto
los valores que tenemos en el arreglo y que han sido trados desde la base de datos.
campos.dni.text=Flash_a_Php.dni;
campos.nombre.text=_global.reg[0];
campos.direccion.text=_global.reg[1];
campos.telefono.text=_global.reg[2];
campos.email.text=_global.reg[3];
campos.cargo.text=_global.reg[4];
campos.sueldo.text=_global.reg[5];
Cdigo para mostrar datos en campos de texto.
Como segundo ejemplo vamos a realizar la consulta de algunos registros que cumplan cierta
condicin. Para ello he realizado algunas pequeas modificaciones al ejemplo anteriormente
visto, como el campo que utilizamos para buscar que en este caso necesito sea uno que pueda
repetirse en algunos registros, en mi caso he utilizado el campo relacionado al sueldo.
Voy a centrar la explicacin solamente en aquellos partes del cdigo que tengan una variacin
significativa con el ejemplo anteriormente citado. (Ver db0.fla)
Para este ejemplo utilizaremos una conexin por medio del archivo consulta0.php
Archivo consulta0.php
<?php
$basico=$_POST['sueldo'];
$conn=conectarse();
$a='agenda a';
$e='empleo e';
$consulta="SELECT a.dni, a.nombre, a.direccion, a.telefono, a.email,
e.cargo, e.basico FROM $a, $e WHERE a.dni=e.dni AND
e.basico=$basico";
$numero_reg=mysql_num_rows($resultado);
$contenido="&cuantos=".$numero_reg;
$contador=0;
$contenido=$contenido."&dni".$contador."=".$fila['dni']."&nombre".
$contador."=".$fila['nombre']."&direccion".$contador."=".$fila
['direccion']."&telefono".$contador."=".$fila['telefono']."&em
ail".$contador."=".$fila['email']."&cargo".$contador."=".$fila
['cargo'];
$contador++;
}
echo $contenido;
$conn="";
?>
54
En este script, difiere la variable que recibimos desde flash, as como la consulta que se realiza
a la base de datos, adems se ha hecho la creacin de una variable contador la cual la he
inicializado en 0 y que ser el subndice del los primeros elementos del arreglo.
Con el procedimiento while, vamos asignando un registro a la vez a la variable $fila y por
medio de la variable $contador creamos una secuencia de variables que se irn sumando con
un nombre secuencial al contenido de la variable as tambin llamada.
Finalmente incrementamos la variable contador para proceder con el siguiente registro.
Flash_a_Php= new LoadVars();
Php_a_Flash=new LoadVars();
Flash_a_Php.sueldo=sueldo.text;
Php_a_Flash.onLoad=function(){
_global.numReg=Php_a_Flash.cuantos;
if(_global.numReg >= 1){
for(i=0; i<_global.numReg; i++){
_global["reg"+i]=new Array();
_global["reg"+i][0]=Php_a_Flash["dni"+i];
_global["reg"+i][1]=Php_a_Flash["nombre"+i];
_global["reg"+i][2]=Php_a_Flash["direccion"+i];
_global["reg"+i][3]=Php_a_Flash["telefono"+i];
_global["reg"+i][4]=Php_a_Flash["email"+i];
_global["reg"+i][5]=Php_a_Flash["cargo"+i];
}
nextFrame();
}else{
mensaje="NO EXISTEN REGISTROS";
}
}
Flash_a_Php.sendAndLoad("http://127.0.0.1/guia/phps/consulta0.php",
Php_a_Flash, "POST");
stop();
Cdigo para intercambio de variables
La variacin con el ejemplo anterior radica en que ahora generaremos dinmicamente tantos
arreglos en flash como registros hayamos encontrado que cumplan con la condicin. As
mismo la creacin de las variables de los arreglos se realiza dinmicamente segn el arreglo al
cual correspondan.
Una vez ya generados todos los arreglos y almacenada toda la informacin pasamos al
siguiente fotograma en donde tambin generaremos dinmicamente los clips
correspondientes.
Previamente hemos modificado el movieClip campos de manera que pueda presentar la
informacin de un registro a la vez y con el fin de que nos permita duplicarlo, entre sus
propiedades hemos activado la opcin de Exportar para ActionScript.
55
posX=20;
posY=10;
for(i=0; i<_global.numReg; i++){
this.attachMovie("campos", "regis"+i,
this.getNextHighestDepth(), {_x:posX, _y:posY});
this["regis"+i].dni.text=_global["reg"+i][0];
this["regis"+i].nombre.text=_global["reg"+i][1];
this["regis"+i].direccion.text=_global["reg"+i][2];
this["regis"+i].telefono.text=_global["reg"+i][3];
this["regis"+i].email.text=_global["reg"+i][4];
this["regis"+i].cargo.text=_global["reg"+i][5];
posY+=85;
}
Cdigo para generacin dinmica de registros
De manera similar a la de un ejemplo anteriormente citado, y de acuerdo a la cantidad de

elementos que se me solicite, genero copias del movieClip campos y las llamo regis ms el
subndice del contador, que en este caso ser la variable i.
En los campos de texto de estas copias generadas, voy almacenando la informacin que
previamente la tena en los arreglos generados dinmicamente.
Para terminar incremento la posicin Y para mostrar los elementos y finalizo el programa.
56
ANEXO 1
El modelo de caja de CSS
La utilizacin del estndar de marcado CSS (en espaol Hojas de Estilo en Cascada) definido
por el World Wide Web Consortium (W3C) permite a diseadores y programadores definir
estilos coherentes para pginas web y aplicar la plantilla a varias pginas. Un aspecto
especialmente relevante de CSS es el Modelo de Caja.
Este artculo brinda una primera aproximacin a su arquitectura y a las distintas posibilidades
que ofrece.
Una primera aproximacin visual
Tarde o temprano, todo libro o taller prctico de CSS queda bajo la influencia del Modelo de
Caja. Es uno de los elementos bsicos de las Hojas de Estilo en Cascada y por lo tanto su
correcta interpretacin resulta fundamental a la hora de lograr los resultados deseados en un
diseo, por ms simple que ste resulte.
Para entrar en tema, vamos a construir un sencillo ejemplo utilizando un nico elemento <div>
al que aplicaremos un estilo. El resultado producido ser analizado con la ayuda de una figura
en la que hemos modelado el orden de apilado de los elementos del <div> en una disposicin
tridimensional que nos ayudar a comprenderlo.
Supongamos el siguiente cdigo (lo mostramos fuera de su contexto, restringindonos a lo
significativo para el ejemplo):
El elemento <div>
<div>
<p>Este es el contenido de nuestra caja.</p>
</div>
El estilo
div {
background-color: #be4061; /*color bord para el fondo*/
background-image: url('cabeza.jpg');
border: 10px solid #e7a219; /*color naranja para el borde*/
margin: 10px;
padding: 20px;
}
p {
margin: 0 0 20px 0; /*margen inferior de 20 px para el prrafo*/
padding: 0;
}
57
El cdigo anterior generar una caja como la que muestra la figura siguiente, en la que
adicionalmente se ha dado color a los elementos transparentes (margen y relleno) solo para
hacerlos visibles.
Un detalle interesante que puede apreciarse en la representacin tridimensional en que la
capa superior del apilamiento no es el borde, como podra suponerse intuitivamente.
La capa situada encima de todas las dems es la de Contenido.
Aunque el caso especfico sea materia de otro artculo, comentaremos que esta disposicin fue
utilizada por el diseador Douglas Bowman de Stopdesign para el rediseo del sitio de Blogger,
logrando las armoniosas lneas curvas de sus pginas mediante CSS, ubicando imgenes en la
capa de Contenidos de modo que oculten el borde anguloso de las cajas.
reas y propiedades
Cada caja posee, adems de su rea de Contenido, otras tres reas opcionales:
rea de Margen - Margin
rea de Relleno - Padding
rea de Borde - Border
58
Cada rea, a su vez, puede dividirse en cuatro segmentos segn su posicin: izquierdo (left),
derecho (right), superior (top) e inferior (bottom). El tamao de cada rea o de sus segmentos
est dado por el valor de las respectivas propiedades, definidas en forma global o discriminada
por segmento.
Por ejemplo, la siguiente sentencia asignar un margen homogneo de 20 pxeles alrededor de
la caja:
div { margin: 20px }
Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden reflejarse
los cuatro valores numricos siguiendo el orden top - right - bottom - left.
El siguiente ejemplo asigna 10 pxeles arriba, 5 a la derecha, 20 abajo y nada a la izquierda:
div { margin: 10px 5px 20px 0 }
Pueden especificarse valores tambin con la siguiente notacin, en la que ya no es necesario

mantener el orden:
div {
margin-top: 10px ;
margin-right: 5px ;
margin-bottom: 20px ;
}
En cualquier caso puede obviarse el valor 0 ya que es el valor que toman las propiedades por
defecto.
La lista completa de propiedades es la siguiente:
Propiedades del Margen

"margin-top", "margin-right", "margin-bottom", "margin-left" y "margin"
Propiedades del Relleno

"padding-top", "padding-right", "padding-bottom", "padding-left" y "padding"
Propiedades del Borde

1. Ancho (width)
"border-top-width", "border-right-width", "border-bottom-width", "border-left-width"
y "border-width". Pueden ser valores especficos o los valores "thin" (fino), "medium"
(medio) y "thick" (grueso)
2. Color (color)
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color" y
"border-color"
3. Estilo (style)
59
"border-top-style", "border-right-style", "border-bottom-style", "border-left-style" and
"border-style". Toma una serie de posibles valores, tales como: none, hidden, dotted,
dashed, solid, double, groove, ridge, inset y outset. Es una propiedad algo conflictiva
ya que no todos los navegadores interpretan sus valores de la misma manera.
Como corolario de esta aproximacin al modelo de caja resta analizar qu es lo que se ver en
cada rea cuando la pgina se muestre en un navegador:
En el rea de Contenido y en la de Relleno se ver aquello que se determine en la
propiedad "background" del elemento (un color o una imagen, segn el orden de
apilado).
En el rea de Borde se ver aquello que se determine en las propiedades del Borde
(ancho, color y estilo).
El rea de Margen es siempre transparente.
El Secreto
Hay un solo secreto para comprender cabalmente cada una de las propiedades y su utilizacin:
probar, probar y probar. ;-)
60
UNIDAD 5
CMS DRUPAL
Como hemos visto en el primer vdeo explicativo, flash adems de ser utilizado para la creacin
de animaciones, interpolaciones, movimientos y dems efectos, puede ser tambin utilizado
para interactuar con archivos externos como imgenes vectoriales, mapa de bits, sonidos,
vdeos, o algunas otras aplicaciones creadas tambin en Flash.
As tambin puede interactuar con archivos externos para el intercambio de datos. Como
ejemplos vamos a realizar la recuperacin y utilizacin de datos importados desde archivos de
tipo txt, xml, y desde bases de datos a travs de aplicaciones tipo php ya estudiadas.
Vamos a ir observando cada uno de estos casos, cuyos ejemplos podrn ser descargados del
Tomado de: Cristalab.com, tutoriales. El modelo de caja de CSS, [En lnea]. Disponible en:
http://www.cristalab.com/tutoriales/el-modelo-de-caja-de-css-c180l/
61
62
ANEXO 2
Componer un diseo de 3 columnas en XHTML y CSS
Vamos a intentar hacer la base de una pgina web en XHTML 1.0 Strict & CSS con 5 apartados,
dos son los tpicos: header y footer, pero los otros tres varan un poco, normalmente se suelen
hacer las pginas con dos columnas, pero otras muchas veces es necesario usar 3, por ejemplo
en algunas bitcoras, pginas de periodismo, o simplemente por cualquier cosa que creas que
puede tener mayor navegabilidad con 3 columnas en vez de dos.
Para hacer este tutorial es necesario que tengas algunos conocimientos de CSS y XHTML,
aunque no demasiado porque considero que es fcil de entender, pero algunas cosas no las
explico porque doy por hecho que se deben saber.
Para empezar vamos a estructurar nuestro XHTML, para ordenar bien todas las "piezas", en
este caso las divs.
Cdigo:
/*Esta parte es la que se encarga de decirle al navegador qu tipo de
lenguaje est usando*/
<html xmlns="http://www.w3.org/1999/xhtml">
/*Aqu nos dice el ttulo de la pgina, el codificado y las
vinculaciones a las hojas de estilo externas, en este caso ya hemos
creado una llamada base.css*/
<head>
<title>Base3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" />
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
/*Aqu empieza la manteca*/
<body>
/*Creamos las primeras divs, la primera ser la div "container",
que se encargar de albergar a todas las dems, seguidamente creamos la
div header, que es donde ir el encabezado principal de nuestra pgina.
Despus de stas creamos, por este orden, las divs "izquierda",
"derecha" y "principal"
Por ltimo creamos footer*/
<div id="container">
<div class="header"></div>
<div class="izquierda"></div>
<div class="derecha"></div>
<div class="principal"></div>
<div class="footer"></div>
</div>
</body>
</html>
Ahora mismo no aparecera nada en el navegador porque an no hemos definido los estilos de
las mismas, pero es justo lo que vamos a hacer ahora mismo.
Creamos un nuevo documento CSS y lo guardamos como "base.css", y empezamos a escribir,
en primer lugar las caractersticas generales que tendr nuestra pgina, una vez terminadas
esas caractersticas ya podemos empezar con las especficas de cada div.
63
As que tendramos que escribir esto:
Cdigo:
/*Aqu vamos a definir las propiedades de la pgina en general, ms
adelante definiremos las de las cajas principales*/
/*formatos de prrafo, linea de separacion, encabezados 1 al 6, tablas,
vnculos (en sus 4 estados) y body respectivamente*/
body {
font:11px Verdana, Arial, Helvetica, sans-serif;
background-color:#FFF;
text-align : justify;
line-height: 10px;
}
p {
font-size:11px;
color: #586885;
line-height: 120%;
}
hr {
display:none;
}
h1 {
font-size:25px;
text-align : left;
color : #666666;
margin:0;
}
h2 {
font-size:20px;
text-align : left;
color:#486895;
text-transform: capitalize;
}
h3 {
font-size:18px;
text-align : left;
color : #666666;
}
h4 {
font-size:15px;
text-align : left;
color : #666666;
}
h5 {
font-size: 13px;
text-align : left;
color : #666666;
}
h6 {
font-size:12px;
text-align : left;
color : #666666;
}
td {
font-size: 12px;
text-align : center;
color : #586885;
}
a {
font-size:12px;
color:#325FA0;
}
a:link {
text-decoration: none;
64
}
a:visited {
color:#325FA0;
}
a:hover {
color:#000066;
}
a:active {
color:#0099CC;
}
Por tanto ya quedan definidas las caractersticas ms generales.

Ahora podemos empezar con las caractersticas especficas de cada div.
1- "div container: " Cdigo:

#container {
background-color:#DDE6AC;
border-style:solid;
border-color:#000000;
margin: 0 auto;
width:700px;
height:auto;
}
Con el valor de margin quedar centrado, no hace falta repetir otra vez 0 auto porque ahora
mismo el 0 se refiere a arriba y abajo, y el auto a los lados.
2- En header le damos el mismo ancho que al contenedor (si queremos podemos darle
menos), la altura que queramos, colores etc...
Lo que ms nos interesa es que debe estar centrado con el contenedor, por eso mirad las
propiedades de margin, tiene cero arriba, a la derecha tambin, abajo tiene 10 px, y a la
65
izquierda de nuevo cero pxeles, por el mismo orden que los he mencionado. Slo he definido
el borde de abajo porque los dems tocan a los del contenedor y resulta feo, y al dejarlos as
no aparecen por defecto.
Cdigo:
.header{
width:700px;
height:140px;
background-color:#CC9933;
border-bottom-style:solid;
border-bottom-color:#000000;
margin:0 0 10px 0;
}
3- En la div "izquierda" vamos a ajustar los valores para que tenga una anchura de 100
pxeles, una altura que dependa del contenido que tenga dentro, y le vamos a dar un margen
de 5px a la izquierda, adems de hacer que se site a la izquierda mediante "float".
Cdigo:
.izquierda{
width:100px;
height:auto;
background-color:#EFEFEF;
border-style:solid;
border-width:1px;
margin:0 0 0 5px;
float:left;
padding:3px;
}
Como en esa div he pensado que pondr una lista de links, voy a definir las propiedades de la
lista:
Cdigo:
.izquierda ul {
font:bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#586885;
line-height: 140%;
text-transform:capitalize;
}
4- En la div "derecha" vamos a ajustar los valores para que tenga una anchura de 150 pxeles,
una altura que tambin dependa del contenido que tenga dentro, y le vamos a dar un margen
de 5 px, adems de hacer que se site a la derecha.
Cdigo:
.derecha{
width:150px;
height:auto;
background-color:#FFFFDD;
66
border-style:solid;
border-width:1px;
margin:0 5px 0 0;
float:right;
padding:5px;
}
5- Ahora le toca a la caja que contendr la informacin principal de nuestra pgina (la div
"principal") en este caso queremos que se ajuste al espacio que sobra a lo ancho del
contenedor, por qu calculamos, 700px (anchura del mismo) - 100px (anchura de la div
"izquierda") - 150px (anchura de la div "derecha") - 20px (total de los margins) - 34px (total de
los paddings) - 6px (total de los borders) = 390px.
Adems de esto, tambin queremos que quede situado entre las cajas que la rodean, por lo
que calcularemos el espacio que debera quedar a su izquierda y despus poner el mismo valor
en su "margin-left."
**Repito, hay que prestar especial atencin a contar TODOS los valores que se utilizarn,
incluidos, mrgenes, padding, bordes...**
Cdigo:
.principal{
width:390px;
height:auto;
border-style:solid;
border-width:1px;
margin:0 5px 0 117px;
padding:10px;
}
6- Ahora le toca al footer, sobran explicaciones...

Cdigo:
.footer{
width:auto;
height:30px;
border-style:solid;
border-width:1px;
margin:5px;
}
...y a su "h6"
Cdigo:
.footer h6{
text-align:center;
text-transform:uppercase;
margin:5px auto;
67
color:#666666;
font-size:10px;
}
Bueno, ya est todo definido, ahora tendramos que ver una pgina mas o menos formada en
nuestro navegador, digo ms o menos por que aun no hemos puesto nada de informacin, si
queris, podis sustituir el XHTML de antes por ste, o si no, lo rellenis como queris, pero
por lo menos ya tenis este de ejemplo, que adems es correctamente semntico, ok??
Resultado final
Quedara as... Cdigo:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Base3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-88591" />
<link href="base.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="header"><h1>Base3</h1></div>
<div class="izquierda">
<ul>
<li><a>vinculo</a></li>
</ul>
</div>
<div class="derecha">
68
<p>aqu se podra colocar una imgen, anuncios, ms
vnculos, las tpicas imagenes de Sindicar RSS, odio a neo_jp,
etc...</p>
<a href="http://jigsaw.w3.org/css-validator/"><img
style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"
/></a>
<hr/>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict"
height="31" width="88" /></a>
</div>
<div class="principal">
<h2>Ttulo del contenido</h2>
<h3>Subapartado</h3>
<p>Escribo algo para rellenar...</p>
</div>
<div class="footer">
<h6>base3 2005, todo el C_C reservado</h6>
</div>
</div>
</body>
</html>
Tomado de: Cristalab.com, tutoriales. Componer un diseo de 3 columnas en XHTML y CSS, [En
lnea]. Disponible en: http://www.cristalab.com/tutoriales/componer-un-diseno-de-3columnas-en-xhtml-y-css-c131l/

Guia Diseño Web UTPL

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Diseño Web UTPL

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD TCNICA PARTICULAR DE LOJA

La Universidad Catlica de Loja

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

El sistema de estudios on-line, implica grandes sacrificios y retos, que

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Teniendo en cuenta las caractersticas de la asignatura, se ofrecen algunas estrategias para

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Img. 1.1. cono de instalacin de XAMPP

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

No es recomendable la instalacin de la ltima versin,

Img. 1.2. Directorio raz para aplicaciones Web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Img. 1.3. Puesta en marcha del servidor Web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Img. 1.4. Funcionamiento correcto del servidor Web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

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

Elementos debidamente jerarquizados

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

<p>Bienvenidos al curso de <b><i>XHTML...<p><i><b>

<p>Bienvenidos al curso de <b><i>XHTML...<i><b><p>

Respetndose el orden de apertura y cerrado de etiquetas.

Las etiquetas debern estar escritas en minscula

Este texto hace un<br /><b>Salto de lnea</b>

Los nombres de los atributos deben ir en minsculas

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Los valores de los atributos deben ir entre comillas

El atributo id reemplaza al atributo name

<input type=text id=txt_nombre size=25 />

UTILIZACIN DE DIVs y CSS

<div id="menu" align="right" >

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

El resultado de ste cdigo sera:

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

HOME | CONTACT | ABOUT

Para una mejor comprensin de la utilizacin de los divs con CSS,

Dirjase al Anexo 2 (Componer un diseo de 3 columnas en XHTML y

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Es muy conveniente tener especial cuidado en las sangras ya que

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

<form action="consulta.php" method="post">

<input type="text" id="nombre" name="nombre" size="20" />

type="text" nos indica que se trata de un campo de texto.

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Al activarse este checkbox, el resultado ser: monkey1 = si.

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

<input type="checkbox" name="xwing" id="xwing" value="si" />

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Comenzando con MySQL

Realizamos la creacin de los diferentes campos.

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

El campo id no puede estar vacio y es autoincrementable, lo cual deberemos tener en

Ingrese algunos datos en la tabla creada para tener informacin con

Conectar a MySQL desde PHP

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

Mostrar los datos de una consulta

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web

CURSO DE WEB Y MULTIMEDIA.- Creacin de sitios web