Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Modulo1 - Introduccion Al Comercio Electronico y PHP PDF
Modulo1 - Introduccion Al Comercio Electronico y PHP PDF
Coordinador General
Torres
de Educacin Virtual:
Magster Leandro D.
Curso:
Una pgina web la vemos en nuestro navegador, o cliente web, y parece una sola entidad, pero
no es as, est compuesta por multitud de diferentes archivos, como son las imgenes, los
posibles vdeos y lo ms importante, el cdigo fuente que dice donde colocar cada texto, cada
imagen o cada video y la forma que tendrn estos al ser colocados en la pgina. No es
problema que las webs estn compuestas por tantos elementos, ya que rpidamente veremos
que su organizacin es fcil y que no se nos van a perder o escapar ninguno.
Como hemos podido imaginar y a modo de resumen, para publicar en Internet necesitaremos
construir unos documentos hipertexto, o hipermedia, con sus correspondientes archivos de
imagen o video y colocarlos en unos computadores que son servidores de pginas web. Pero
esto es algo que vamos a tratar de explicar poco a poco en los siguientes captulos.
Aunque signifique adelantarse a los acontecimientos, es interesante sealar que con una simple
accin podemos ver el cdigo fuente de de las pginas, es decir, cmo estn hechas por dentro.
Para ello en Internet Explorer se ha de pulsar sobre el men de Ver > Cdigo fuente y en
Netscape se ha de seleccionar Ver > Origen de la pgina.
Pasos previos
1. Pensar un tema
Para publicar una pgina en Internet debemos seguir unos pasos, primero una planificacin,
luego la construccin de las pginas y ms tarde la promocin y constante actualizacin de
las pginas. En este captulo vamos a ver cules son los pasos previos que debemos realizar
para que nuestro esfuerzo y resultados sean lo ms ptimos posibles, es decir, vamos a ver
cul es la planificacin que hay que hacer antes de ponerse manos a la obra.
Puede ser el ms importante de los pasos para la creacin de un web. Hay que elaborar la
idea y documentarse sobre el tema que has elegido para tu pgina en Internet.
Cuando hacemos incluso una pgina personal podemos hablar de algn tema interesante
como nuestro equipo de ftbol o nuestro cantante favorito, o de un tema que nos conmueva
profundamente, como el ecologismo o la historia de nuestra regin.
Tambin podemos construir una pgina que trate de nuestra familia o de nuestros perros, o
todo junto, pero tenemos que tener en cuenta que el valor de este tipo de pginas es
mucho menor y que a los dems usuarios seguramente no les va a interesar. Si deseamos
construir una pgina que algn da sea popular, debemos abordar, como digo, temas que
sean de inters para un grupo de gente.
Una vez pensado el tema es muy importante documentarse lo ms posible sobre l, aunque
muchas de las ideas pueden estar en nuestra cabeza, es importante tomar notas,
fotografas u opiniones de otras personas que tambin conocen el asunto que nos traemos
en la cabeza. Insisto, es importante que el material que vamos a publicar tenga el mayor
valor posible, as conseguiremos los mejores resultados.
2. Estructura del sitio
Es importante tambin que pensemos en la estructura de los contenidos de todo el sitio
antes de ponernos a disearlo. En este punto tenemos que pensar sobre varias cosas, como
las distintas secciones que va a contener el sitio, el rbol de las pginas que vamos a tratar,
etc.
La manera de que este punto sea realmente til, es preparar todas estas ideas sobre el
papel. Con toda la tranquilidad del mundo y con toda la determinacin posible vamos a
preparar una serie de diagramas y listados que nos permitan dirigir nuestros esfuerzos de la
manera ms ptima.
Secciones del sitio: Podremos pensar en qu secciones vamos a poner en el sitio. Una con
informacin general, otra con informacin de contacto, otra con una visita grfica a nuestras
instalaciones, etc.
rbol del sitio: Podemos dibujar en un papel cules son las distintas secciones del sitio,
metidas dentro de cuadrados y representar tambin los enlaces que hay entre cada seccin,
mediante lneas que unen esos cuadrados. Es algo muy simple y divertido de hacer, adems
podemos tener nuevas ideas para el web a medida que lo vamos dibujando.
Esquema de una pgina: podemos dibujar en papel tambin una pgina del sitio que
vamos a construir, para que veamos donde colocar la barra de navegacin, el logotipo del
sitio o la empresa, un posible banner publicitario, etc. Este esquema puede ser tambin de
utilidad a la hora de construir las pginas y siempre es ms fcil disear sobre el papel que
disear directamente con el computador.
Estos pasos son opcionales, cualquiera puede ponerse a construir una pgina nada ms
decidir que desea tener una web, pero no todo el mundo es capaz de plantearse bien cules
son sus objetivos y formar un proyecto con todos los puntos desarrollados de antemano.
Los resultados finales son lo ms importante y empezar la casa por el tejado no va a ser lo
ms positivo para nuestra pgina y los resultados finales mejorarn si hacemos primero una
planificacin.
Qu necesitas para empezar
Para ponernos a disear pginas web nos hace falta realmente poco material. En la mayora de
los equipos que se instalan con Windows se encuentran todos los materiales necesarios para
empezar sin necesidad de obtener nuevos programas.
En concreto, los materiales necesarios son un editor de textos, con el que programaremos
nuestras pginas y un cliente del web como Internet Explorer o Netscape Navigator. Como un
computador Windows por defecto siempre tiene instalado el Block de Notas y tambin el
Internet Explorer se puede empezar a construir una pgina web sin ms necesidades que lo que
ya tenemos.
En otros sistemas distintos de Windows ser tambin muy fcil obtener un editor de textos
sencillo y un navegador con el que ver las pginas que vamos a crear, si es que no estn
instalados ya. Sitios en la web desde donde se pueden descargar estos programas son Tucows
o Download.com, donde tienen software de todos los sistemas operativos como Windows, Mac
OS, o Linux.
Sin duda, en nuestra aventura con el desarrollo del web vamos a necesitar muchos ms
programas como por ejemplo programas de retoque fotogrfico o editores complejos de
pginas web, pero no es necesario que los introduzcamos todava en este manual porque no
son necesarios para dar nuestros primeros pasos.
Qu es HTML
HTML es el lenguaje con el que se definen las pginas web. Bsicamente se trata de un
conjunto de etiquetas que sirven para definir la forma en la que presentar el texto y otros
elementos de la pgina.
El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser
un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a
todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en
un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando
modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han
presentado ya. El HTML 4.01 es el ltimo estndar a febrero de 2004.
El HTML es un lenguaje de programacin muy fcil de aprender, lo que permite que cualquier
persona, aunque no haya programado en la vida pueda enfrentarse a la tarea de crear una
web. HTML es fcil y pronto podremos dominar el lenguaje. Ms adelante se conseguirn los
resultados profesionales gracias a nuestras capacidades para el diseo y nuestra vena artstica.
Una vez que conozcamos el concepto de HTML vamos a adelantar algunas cosas ms. Este
lenguaje se escribe en un documento de texto, por eso necesitamos un editor de textos para
escribir una pgina web. As pues, el archivo donde est contenido el cdigo HTML es un
archivo de texto, con una peculiaridad, que tiene extensin .html o .htm (es indiferente cul
utilizar). De modo que cuando programemos en HTML lo haremos con un editor de textos, lo
ms sencillo posible y guardaremos nuestros trabajos con extensin .html, por ejemplo
mipagina.html.
Por adelantar un poco cmo se utiliza el HTML os diremos que el lenguaje consta de etiquetas
que tienen esta forma <B> o <P>. Cada etiqueta significa una cosa, por ejemplo <B> significa
que se escriba en negrita (bold) o <P> significa un prrafo, <A> es un enlace, etc. Casi todas
las etiquetas tienen su correspondiente etiqueta de cierre, que indica que a partir de ese punto
no debe de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de escribir
en negrita. As que el HTML no es ms que una serie de etiquetas que se utilizan para definir la
forma o estilo que queremos aplicar a nuestro documento. <B>Esto est en negrita</B>.
Editores de HTML
Para las personas que no deseen complicarse la vida con el lenguaje HTML, porque no tengan
tiempo de aprenderlo o porque se sientan incapaces de hacerlo, hay una posibilidad distinta a
programar directamente el HTML a base de texto. Se trata de utilizar un tipo de programas que
nos permiten disear la pgina como si estuviramos escribiendo un documento con un editor
del tipo de Word. El editor de HTML es el encargado de vrselas con el lenguaje y programar
internamente la pgina con el cdigo HTML segn lo que nosotros estamos diseando.
Con el editor HTML podemos colocar imgenes, definir estilos, utilizar negritas o cursivas, etc.
sin preocuparnos de las etiquetas correspondientes a cada estilo o elemento. Es el editor el que
sabe estas etiquetas y las utiliza convenientemente. Este tipo de editores HTML se denominan
habitualmente WYSIWYG (What You See Is What You Get) porque cuando trabajas con ellos lo
que ves que ests creando con el editor es lo que obtienes luego cuando grabas la pgina.
Existe entre las personas que se dedican a realizar las pginas web dos tendencias. Por un lado
tenemos a las personas que prefieren crear las pginas programando el HTML y por otro las
personas que utilizan editores HTML. Algunas diferencias entre hacerlo de un modo u otro son
las siguientes:
Escribiendo el HTML
Es ms complicado el aprendizaje, ms
Es muy rpido.
Cada uno debe escoger el camino que ms le convenga o el que le parezca ms atractivo. De
todos modos siempre se puede empezar de un modo y luego pasar al otro modo sin ningn tipo
de problema. Incluso, por adelantarnos a los acontecimientos, diramos que cuando una
persona profundiza en el diseo de pginas web llega un momento en el que le hace falta
conocer las dos maneras de construir webs. A los programadores en HTML les har falta
aprender un editor porque eso aumentar su productividad y los que utilizan editores
necesitarn aprender un poco de HTML para arreglar alguna cosa que el editor ha hecho mal o
realizar alguna cosa que el editor no puede hacer.
En el mercado existen multitud de editores de HTML WYSIWYG, es importante elegir un editor
bueno porque nuestros trabajos van a depender de sus resultados. Actualmente el rey de los
editores y el que os aconsejaramos sin duda es el Dreamweaver, fabricado por Macromedia.
Otras posibilidades son editores como GoLive de Adobe o Frontpage de Microsoft.
Editores de texto preparados para escribir HTML
Las personas que despus de estas lneas han decidido aprender el lenguaje HTML tambin
tienen herramientas muy interesantes para aumentar su productividad sin dejar de escribir
ellos mismos el HTML que desean. Se trata de unos editores de texto, como cualquier otro, que
estn preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los
diseadores
Y un montn de cosas ms que sera demasiado complejo de enumerar aqu. Estos editores son
por ejemplo Home Site o UltraEdit y es muy recomendable utilizarlos para sentirnos ms a
gusto al programar las pginas y poder hacerlas ms rpido. Posiblemente sea aconsejable
empezar con el Block de notas, por que es lo ms sencillo, pero utilizar un programa de estos
ser imprescindible con el tiempo.
Construir las pginas
Por fin empezamos a trabajar en la pgina y vamos a ver algunos consejos tiles para hacerlo
bien.
Es el momento en el que nos ponemos manos a la obra de una forma ms dedicada y tenemos
que trabajar ms duramente. El programar o disear las pginas podr gustar ms o menos
que otras acciones como planearlas o promocionarlas ms tarde, pero no cabe duda que es el
momento ms excitante porque nuestros sueos y nuestras ideas empiezan a concretarse en
los resultados que esperbamos conseguir.
Si hemos proyectado un sitio compuesto por un gran nmero de pginas lo ms habitual es
empezar diseando una pgina con el marco del sitio, que luego vamos a repetir a modo de
plantilla en todas las pginas. Pero esto son tcnicas que aprenderemos con el tiempo.
Para ahorrarnos errores cuando hacemos las pginas podemos seguir una serie de consejos
tiles.
Autor: Ing. Oscar R. Espeche
No utilizar espacios en los nombres de los archivos de las pginas o las imgenes.
Tampoco utilizar caracteres raros como la o los acentos.
Tener cuidado con las maysculas y las minsculas en los nombres de los archivos que
tratamos. Si las utilizamos equivocadamente la pgina podr funcionar en nuestro
Windows (por que le dan igual las maysculas y las minsculas), pero al subirla al
servidor Linux o Unix podra ser que no funcionase (porque estos sistemas si que
distinguen entre maysculas y minsculas).
Enterarse de cmo funciona el documento por defecto, que nos permitiris que lo
expliquemos en captulos posteriores.
Trabajar siempre con una extensin del archivo HTML especfica. No mezclar en un
mismo proyecto pginas con extensin .html y .htm.
Hay una forma muy til de obtener pistas acerca del fallo de una imagen, consiste en pulsar
con el botn derecho del ratn sobre ella y seleccionar propiedades. Esto nos muestra
informacin sobre la imagen y nos informa sobre el sitio donde se est intentando encontrarla.
Alojar las pginas
Como hemos dicho, cualquier servicio que se quiere ofrecer en Internet tiene que brindarlo un
servidor, que es un computador que se encuentra encendido las 24 horas del da y conectado a
Internet tambin permanentemente. En el caso de una pgina web, existen unos servidores
que son los encargados de mandarla cuando se la solicita, son los servidores web. Nuestras
pginas tienen que estar alojadas en un servidor web para que puedan estar accesibles desde
Internet.
Lo que tendremos que hacer entonces es buscar un lugar para alojar la pgina que est acorde
con nuestras necesidades, por suerte en muchos de los casos el alojamiento lo podremos
conseguir de manera gratuita, sin embargo si nuestro sitio es algo serio debemos buscar uno
que sea pago.
Subir los archivos al servidor
Es una de las tareas que parecen ms difciles cuando te pones a construir las pginas. Igual
que cualquier cosa en este mundo, cuando lo haces unas cuantas veces el problema se
desvanece.
Bsicamente lo que tenemos que hacer es tomar todos los archivos que componen nuestro sitio
web, incluidas imgenes, animaciones, etc. y subirlas a nuestro servidor web. Para ello primero
es tarea imprescindible el identificar dnde estn todos los archivos de nuestro web. Si hemos
escrito la pgina con cdigo HTML seguramente sabremos perfectamente donde estn nuestros
archivos, pero si la pgina la hemos hecho con un editor HTML como Frontpage es probable que
estn un poco ms difciles de identificar.
Dependiendo del alojamiento que tengamos, la manera de subir los archivos cambiar. Existen,
de todos modos, dos maneras de subir los archivos al servidor, por FTP o a travs de una
interfaz web, de modo que podremos ver aqu todas las formas.
Subir archivos por FTP
La forma ms tradicional de subir archivos es por FTP, que es un servicio ms de Internet que
se utiliza para transferir archivos por la red. Como lo que queremos hacer es transferir los
archivos desde nuestro computador al servidor, este es el servicio que debemos utilizar.
Cuando tenemos un alojamiento profesional para nuestras webs lo ms seguro es que nos
proporcionen un acceso por FTP a los servidores para subir las pginas.
Autor: Ing. Oscar R. Espeche
Como otros servicios de Internet, para utilizar FTP necesitamos un programa especial que se
denomina cliente de FTP. Podemos encontrar en el mercado muchos de estos clientes, algunos
populares son Cute FTP o FTP Voyager. Si queremos ver una gama muy amplia de clientes FTP
podemos acercarnos por Tucows o Donwload.com y encontraremos muchas opciones
interesantes, algunas de ellas gratuitas.
Todos los programas de FTP son parecidos (igual que Internet Explorer es parecido a
Netscape), bsicamente consisten en una ventana que est partida en dos partes. En una parte
podemos ver nuestro disco duro, con sus distintas unidades y carpetas. En la otra parte se
puede ver el sistema de archivos del servidor, con sus correspondientes carpetas. Para mover
los archivos de un lugar a otro suele bastar con arrastrarlos de una parte de la ventana a la
otra.
Una tarea que tambin puede ser complicada en un principio puede ser el configurar el
programa de FTP para que acceda al espacio que tenemos asignado. Los datos de configuracin
los debes obtener en el lugar donde te ofrecieron el espacio, son estos:
Nombre del servidor FTP: suele tener una forma como ftp.tudominio.com
Usuario: tu nombre de usuario.
Password: tu palabra de clave
Podra haber algn dato adicional, como el directorio por defecto, que es el directorio en el que
deseas abrir la sesin, pero no es habitual que te den este dato porque los accesos por FTP
suelen estar configurados para que se acceda directamente al directorio donde estn tus
pginas.
Acceso con interfaz web
Es muy tpico que los proveedores de alojamiento gratuito provean de una herramienta de muy
fcil uso para subir las pginas. Esta herramienta se accede a travs de la web alojador y no es
ms que un formulario donde se puede elegir los archivos que se desea subir al servidor, se
pulsa un botoncito, y todo listo.
Documento por defecto
Es importante conocer este concepto, incluso antes de ponerse ha disear la pgina. El
documento por defecto es el archivo que enva el servidor cuando el cliente no especifica que
archivo es el que solicita. Esto se puede ver muy fcilmente con un ejemplo.
Cuando escribimos la direccin http://www.pepe.com/ no estamos especificando ningn
nombre de archivo en concreto, entonces el servidor web donde est alojado este sitio web le
devolver el documento por defecto del directorio raz del dominio. Cada directorio puede tener
un documento por defecto, por ejemplo, cuando escribimos www.pepe.com/documentos se
enva el documento por defecto del directorio documentos.
Cada servidor web puede ests configurado de una manera distinta para el documento por
defecto, es decir, en cada servidor web el documento por defecto puede ser distinto. Lo ms
habitual es que se llame index.html, pero en otros casos puede variar el documento por defecto
y ser lo que los administradores de cada servidor decidan. Otros nombres para el documento
por defecto podran ser default.html o ind.html, etc.
Nota: En la mayora de los sitios web el documento por defecto es en realidad index.php.
Esto es porque el sitio est programado con pginas dinmicas PHP, que son un poco ms
complejas, pero que tambin nos permiten hacer cosas ms avanzadas.
10
Decimos que es importante saber cul es nuestro documento por defecto porque es necesario
que llamemos a la primera pgina de nuestro sitio web con ese nombre de archivo, de modo
que no tengamos que saber el nombre de ningn archivo de nuestra pgina para acceder y la
direccin ser ms corta.
Promocin de las pginas
Con el diseo y la publicacin del sitio web en el servidor no se termina el trabajo. Una de las
tareas ms importantes para el xito de la web es promocionarla adecuadamente, de manera
que su direccin figure en el mayor nmero de sitios.
Las acciones que se pueden realizar para promocionar una pgina son muchas y variadas, como
hacer que figure su direccin en nuestros correos electrnicos o intercambiar banners, pero la
ms importante es el registro en los buscadores.
Estas tareas de promocin no son nada complicadas y cualquiera puede realizarlas sin ningn
problema, pero conseguir que nuestra web se encuentre situada entre los primeros resultados
de la bsqueda reviste ms dificultad.
Actualizar las pginas
El ltimo "truco" para que nuestra pgina sea muy visitada y que los visitantes entren una y
otra vez se trata de mantenerla siempre bien actualizada. Hay algunas webs que se prestan
ms que otras a tener los contenidos actualizados, como son las pginas donde se pueden ver
contenidos de actualidad, pero en general todas las pginas pueden mantener secciones con
contenidos actualizables.
Este es un aspecto muy importante, pues si el navegante se percata de que los contenidos se
renuevan constantemente volver con el tiempo unas cuantas veces. Para dar una imagen de
web actualizada se pueden utilizar imgenes o textos que resalten donde ponga "nuevo" o
"new". Tambin ser adecuado poner un rea en un sitio visible donde se enumeren las
novedades del sitio.
Por lo general habr que volver siempre sobre este punto para ver qu hay de nuevo y dnde
se puede renovar el contenido del web. No es bueno tener un enlace que no lleva a ningn
sitio, igual que no es bueno tener una direccin de correo que no existe ya. Adems, si
tenemos un rea de noticias no ser bueno que la ltima noticia sea de hace tres meses porque
da la impresin de que nunca renovamos los contenidos.
Si no mantenemos nuestro sitio actualizado el visitante entrar una vez a la pgina pero no lo
volver a hacer nunca, con lo que habremos perdido una oportunidad de hacernos con un
cliente o un visitante asiduo. Supongo que habr quedado claro lo importante de esta tarea,
aunque salta a la vista, creo, para la mayora de las personas.
Actualizar pginas web
Es un tema bastante trivial para una persona que tenga ya un poco de experiencia en el
desarrollo de webs pero merece la pena abordar el asunto.
Obtener los archivos a actualizar
El primer paso sera disponer de los archivos de la pgina web que queremos actualizar en
nuestro computador de trabajo. Generalmente tendremos que editar un texto o una fotografa,
as que este primer paso ser obtener los archivos con el cdigo de la pgina, con extensin
.html o las fotografas, que sern archivos en formato GIF (.gif) o JPG (.jpg).
11
Puede ocurrir que la pgina la hayamos programado nosotros u otra persona. En el primer caso
posiblemente ya tengamos esos archivos en nuestro computador, en caso contrario, o si era
otra persona la que haba desarrollado el sitio a actualizar, deberemos conectarnos por FTP al
servidor web para obtener los archivos.
Para conectarse por FTP al servidor de la pgina necesitaremos la direccin de dicho servidor,
algo como ftp.tudominio.com. Adems necesitaremos los datos de usuario y contrasea con
permiso para acceder al FTP. Estos datos los debemos obtener, si es que no los tenemos ya,
pidindoselos al proveedor del espacio o a la persona que lo ha contratado. Para conectarse al
servidor deberemos configurar un programa FTP con esos datos.
Editar las pginas
Una vez disponemos de los archivos que deseamos editar en nuestro computador podemos
empezar el trabajo de actualizacin propiamente dicho. Para trabajar ser importante disponer
de algunos conocimientos en la edicin de pginas web o en el diseo grfico.
El proceso, ya sea tanto para editar un grfico como un texto, ser el mismo. Bsicamente
abriremos el archivo donde se encuentra la informacin a editar, lo actualizaremos y
guardaremos los cambios.
Subir los archivos otra vez al servidor
Para que las actualizaciones tengan validez y sean visibles por todos los visitantes de nuestras
pginas, hay que colocar los archivos que hemos editado en el servidor.
Para eso basta con conectarse de nuevo al servidor por FTP y subir los archivos, realizando un
proceso similar al realizado al descargar los archivos, pero en direccin contraria, es decir,
arrastrando esta vez los archivos desde nuestro computador local hasta el servidor remoto.
Ser suficiente con subir los archivos que hemos actualizado. Los que no hayamos tocado son,
en teora, iguales que los del servidor, por lo que ser indiferente que los volvamos a colocar,
porque no estaramos alterando nada.
Comprobar las actualizaciones
Ya est el trabajo realizado, as que slo faltara acceder a nuestra pgina web con nuestro
navegador en su direccin de la web y comprobar que los cambios se han realizado
satisfactoriamente.
Nota: Si no vemos los cambios realizados en la pgina posiblemente sea porque estaremos
recibiendo los datos desde la cach de nuestro navegador. Para saltarnos esta cach y
solicitar los archivos directamente al servidor podemos utilizar la tecla Control (CTRL). Con la
tecla apretada, pulsamos sobre el enlace de la pgina que deseamos que se obtenga desde el
servidor sin pasar por la cach. Tambin podemos actualizar la pgina, evitando la cach, con
la tecla CTRL apretada y pulsando el botn recargar de la barra de herramientas de nuestro
navegador o con la tecla rpida correspondiente (F5 en Internet Explorer).
12
Ambos
Vendedor
Puede
elegir
los Cobertura global
productos (sean bienes
o
servicios)
independientemente del
13
lugar
que
estos
provengan;
de
esta
manera contar con
mayores
alternativas
para tomar una sabia
decisin.
Al tener comunicacin Personalizacin
directa con el proveedor
garantiza
que
los
productos son lo que
usted espera de ellos,
abriendo la posibilidad
de
adecuacin
de
productos y asegurando
que las dudas que le
surjan
puedan
ser
resueltas de manera
clara y pronta.
Los
catlogos
y Actualidad
especificaciones
de
productos sern los ms
actuales, garantizando
informacin precisa y
existencias
de
productos.
Seguridad
La seguridad es un punto medular para el comercio electrnico. Por un lado ambas partes
(consumidor y proveedor) deben estar seguros de que el otro es quien dice ser, pues de lo
contrario, en el momento de un desacuerdo no sabrn con quin deban solucionarlo.
El cliente requiere que se le garantice que su informacin personal no ser difundida ni
empleada por terceros, esto queda ms claro si pensamos en el caso de pago con tarjeta de
crdito: ni el NIP, nombre, direccin, lmite de crdito o nmero de tarjeta deber ser
compartido o interceptado.
14
Adems, necesita garanta de que el producto que se le ofrece es igual al que se le entrega, y
que de lo contrario contar con los instrumentos e instancias jurdicas para hacer valer sus
derechos.
El vendedor necesita tener la certeza de que independientemente de la forma de pago se le
entregar la cantidad acordada por la mercanca, y que si no sucediera, tambin tendr los
instrumentos y mecanismos para hacer valer sus derechos.
Protocolos de Seguridad
Puesto que los datos que se transmiten por internet son susceptibles de ser "capturados" por
terceras personas que podran hacer mal uso de ellos, Netscape Communications Corporation
desarroll un mecanismo, ssl (secure sockets layer), mediante el cul la informacin es
sometida a operaciones matemticas especializadas que la hacen ilegible a simple vista
(cifrado).
Para cada transaccin se genera un "paquete de frmulas matemticas" que nicamente son
manejadas por el emisor y el receptor; por esto, ssl es ampliamente recomendado para
operaciones en las que nicamente intervienen dos partes.
Diferencia entre Comercio Electrnico y Negocio Electrnico
El trmino negocio electrnico hace referencia al uso de internet en las diferentes fases del ciclo
de vida de una empresa; es decir, incluye tanto la compra-venta de productos, facturacin,
gestin de la informacin, atencin al cliente, publicidad, intercambio de informacin entre
clientes y proveedores, etc; en tanto el comercio electrnico nicamente hace referencia a la
compra, venta (intercambio de bienes) de productos empleando internet.
Planificar un negocio en lnea
9
Plan de Negocio
Desarrollar un plan comercial para tu sitio es una tarea medular, pues te permitir tener ms
claras tus necesidades y alcances, organizar tiempos y presupuesto, empatar acciones en el
mundo fsico y el virtual y, de ser necesario, establecer fases claras y rentables para tu negocio.
Todo se ver reflejado en un mayor beneficio de tu sitio y capital.
Para realizar tu plan primero debes analizar las ventajas (oportunidad, la presin competitiva y
la presin de la demanda) y los riesgos; posteriormente plantearte el objetivo (el qu) y
alcance (el para qu); y por ultimo, decidir la estrategia (el cmo) estableciendo los tiempos
necesarios (el cundo). Con esto, tendrs definido un plan y un modelo de negocio que te
reflejarn el nivel de comercio electrnico ptimo para tus necesidades, las caractersticas para
seleccionar el software completo, las medidas de seguridad que debes considerar y el
presupuesto requerido.
Este plan debe presentar claramente tu negocio y la forma en la que lo llevars, es importante
que en l incluyas:
15
Catlogo en Lnea
A travs de l, los compradores potenciales podrn ver tus productos o servicios y revisar sus
caractersticas.
Los catlogos pueden tener diversas presentaciones y estar estructurados de diferentes formas,
algunos son prcticamente rplicas de los existentes en el mundo fsico, en tanto otros
aprovechan las ventajas de la red permitiendo realizar bsquedas segn una descripcin o
palabra clave y enlaces a las diferentes categoras de productos.
De una u otra manera finalmente se llega a la pgina de descripcin completa en la que se
ofrece la informacin (tanto bsica como complementaria) y en ocasiones una representacin
grfica o multimedia (video, imagen o sonido) del producto o servicio.
Antes de realizar el catlogo es necesario definir el grado de detalle y estructura que resulte
ptima para cumplir con los objetivos planteados, y preparar la informacin con la que se
conformar.
9
Tienda Virtual
En trminos comunes, una tienda virtual tiene por finalidad ofrecer a los usuarios finales un
sistema para poder realizar los pedidos y los pagos de forma fcil, segura y acorde a sus
necesidades y costumbres.
Tcnicamente es un conjunto de pginas Web normalmente generadas dinmicamente a partir
de una base de datos, un grupo de plantillas y un conjunto de recursos.
Es recomendable dar a la tienda una estructura y diseo con el que desde un inicio el visitante
tenga una clara idea de lo que es la tienda y del tipo de productos que ofrece. Asimismo,
resulta muy til contar con un buscador para localizar rpidamente los productos en los que
esta interesado el cliente.
La caracterstica bsica de una tienda es el carrito de compras, un dispositivo que permite al
visitante ir seleccionado productos ponerlos en su carrito de compras- que en cualquier
momento puede cambiar por otros o eliminar. Al terminar su eleccin el programa calcula
automticamente el total a pagar y le permite seleccionar el medio de pago a utilizar.
Una vez seleccionados los productos y la forma de pago el proveedor recibe, gracias al propio
carrito de compras, el pedido al que dar el tratamiento pertinente para hacerlo llegar al
cliente.
Un aspecto muy importante es determinar la ubicacin (hosting) de la tienda virtual, que bien
puede ser en tu propia empresa, con un proveedor de servicios o soluciones en internet (ISP o
ASP), o dentro de un centro comercial virtual. La decisin del lugar para albergar la tienda debe
ir n funcin de tu plan de negocios, grado de seguridad y objetivos.
9
Protocolos de Seguridad
16
Para recibir los pagos seguros es preciso tener instalada una aplicacin de comercio electrnico
que genere identificadores nicos de pedido y cantidad total a pagar para los mismos, a esta se
le llama terminal punto de venta virtual (Vpos o Tpv).
Todo Vpos debe funcionar sobre un servidor seguro utilizando mecanismos para codificar la
informacin antes de viajar y un conjunto de reglas que determinan cmo se realizar el
intercambio de informacin entre dos computadoras (protocolo) para garantizar que slo
emisor y receptor podrn entender la informacin.
Actualmente en Mxico los pagos en lnea slo se pueden realizar con tarjetas de crdito,
empleando alguno de estos protocolos:
Al igual que en el mundo fsico, para ofrecer la alternativa de pago con tarjeta de crdito es
necesario contar con una afiliacin a una institucin bancaria para garantizar la operacin de
cargo a la cuenta del cliente y abono a la tuya.
Independientemente del banco que selecciones para afiliarte y contar con tu terminal punto de
venta virtual, los requisitos que debers cumplir son:
Servicio de Entrega
Si el producto que quieres mercadear debe ser entregado fsicamente, ser necesario integrar a
tu sitio herramientas que faciliten la logstica de entrega. Estas pueden ser tan sencillas como
contratar una compaa que se encargue exclusivamente de recibirte los productos y hacerlos
llegar al cliente; que te almacene los productos, que almacene y controle el inventario de los
productos e incluso, que permita a tu cliente contar con la visibilidad necesaria desde el
momento del pedido de sus productos, hasta la entrega final.
La decisin del tipo de servicio que desees contratar depender de:
La naturaleza de tu producto
Tus necesidades de almacenaje
La infraestructura con la que cuentes para mantener un inventario al da
17
Mercadotecnia y Publicidad
Para garantizar que nuestra tienda ser visitada es recomendable realizar un plan de
mercadotecnia completo.
Toda accin en materia de mercadotecnia estar determinada por tu plan de negocio, el perfil
de tu mercado y las caractersticas propias de los productos o servicios que venders. Las
estrategias a emplear pueden ser en el mundo fsico, en internet o, lo ms recomendable, una
conjuncin de ambos.
Para los fines concretos de tu tienda virtual, la estrategia de mercadotecnia debe enfatizar sus
esfuerzos en incrementar el nmero de visitantes a tus pginas y lograr que sus visitas sean
repetidas. Los canales que emplees para ello dependern del posicionamiento que tu compaa
y productos tengan, los productos que vendas y el pblico al que te diriges.
Las estrategias en lnea tienen como finalidad lograr que, a travs de los propios canales de
bsqueda de informacin la gente pueda encontrarte fcilmente; es decir, que tu tienda
aparezca entre los 5 o 6 primeros resultados al realizar una bsqueda. Lograrlo depende, en
gran medida, en la seleccin de las palabras claves que hagas; entre ms se ajusten a la
descripcin de tu tienda, mayor probabilidad de que te encuentren tendrs.
Mercadotecnia en Internet
"El enfoque globalizado es la frmula del xito en Internet"
El comercio electrnico en Internet es uno de los aspectos ms relevantes en la evolucin que
pueda experimentar en los negocios va Internet. Abre, para particulares y empresas, un
fantstico mundo de posibilidades que les permitirn obtener los objetos de consumo habituales
sin efectuar desplazamientos innecesarios, con servicio a domicilio y probablemente con una
interesante reduccin de precio. Para los comerciantes, significa alcanzar la globalidad a un
costo insignificante, la apertura a mercados antes impensables y la posibilidad de una eficaz
gestin de sus recursos e inventarios.
Sabemos que resulta difcil distinguirse de entre los dems. Es por eso que contar con un sitio
en Internet es solamente un primer paso hacia una mercadotecnia exitosa en lnea.
Por lo tanto necesitamos considerar algunos aspectos importantes para que realmente
tengamos un sitio exitoso.
9
Estrategias
Una estrategia de mercadotecnia bien establecida nos ayudar, aparte de colocar nuestro sito
en un nivel competitivo a:
18
El principal objetivo de una buena mercadotecnia es el de reducir costos y por ende, aumentar
las utilidades, para ello Internet nos a eliminado fronteras eliminando las distancias y
acelerando transacciones para poder ofrecer a nuestros clientes una mejor satisfaccin
instantnea.
9
Consejos
1. Procure que el nombre de su sitio tienda sea muy breve y fcil de recordar.
2. Hay que utilizar todos los medios de promocin posible.
3. El contenido es lo que hace a su sitio. La informacin de su empresa y productos deben
de estar actualizados segn su rotacin.
4. Responda rpidamente. Trate de responderles de manera inmediata. Una pronta
respuesta es un factor imprescindible para retener a sus visitantes y hacerlos regresar a
su sitio.
5. Sea constante. Mantenga una presencia constante para construir una reputacin slida y
seria en el universo de Internet.
6. Anuncie su sitio web en otros medios. La promocin de un sitio deber efectuarse dentro
y fuera del medio de Internet, por el volumen informativo que este medio maneja.
9
El cliente
Visin
La revolucin que esta iniciando el comercio electrnico es sin duda, un acontecer que esta
marcando una transformacin similar a cmo lo hizo la revolucin industrial en su poca, solo
que ahora promete modificar la forma en las decisiones que se toman incluso en el plano
gubernamental.
Conforme se vayan automatizando procesos y queden correlacionados entre s, se ir
conjuntando el mundo fsico con el virtual; las distancias se abatirn y los traslados poco a poco
disminuirn. Con esto, el trabajo mediante este nuevo avance tecnolgico en muy poco tiempo
ser la forma laboral por excelencia de las empresas.
19
20
21
Con todo lo que conocemos ya sobre HTML podemos construir una pgina web que ya tiene
bastante sentido. Vemos un ejemplo a continuacin.
<html>
<head>
<title>Cocina Para Todos</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>Ests en la pgina <b>Comida para Todos</b>.</p>
<p>Aqu aprenders recetas fciles y deliciosas.</p>
</body>
</html>
Las que se presentan sin movimiento y sin funcionalidades ms all de los enlaces
Las pginas que tienen efectos especiales y en las que podemos interactuar.
22
Las primeras pginas son las que denominamos pginas estticas, se construyen con el
lenguaje HTML, que no permite grandes cosas para crear efectos ni funcionalidades ms all
de los enlaces.
Estas pginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a los
desarrolladores como a los visitantes, ya que slo se pueden presentar textos planos
acompaados de imgenes y a lo sumo contenidos multimedia como pueden ser videos o
sonidos.
El segundo tipo de pginas se denomina pgina dinmica. Una pgina es dinmica cuando se
incluye cualquier efecto especial o funcionalidad y para ello es necesario utilizar otros lenguajes
de programacin, aparte del simple HTML.
Mientras que las pginas estticas todo el mundo se las puede imaginar y no merecen ms
explicaciones, las pginas dinmicas son ms complejas y verstiles. Para aclarar este
concepto, veremos con detalle a continuacin qu son las pginas dinmicas.
Pginas dinmicas
Como hemos visto, una pgina es dinmica cuando realiza efectos especiales o implementa
alguna funcionalidad o interactividad.
Adems, hemos visto que para programar una pgina dinmica necesitaremos otros lenguajes
aparte del HTML. Sin embargo, nunca hay que olvidarse del HTML, ya que ste es la base del
desarrollo web: generalmente al escribir una pgina dinmica el cdigo de los otros lenguajes
de programacin se incluye embebido dentro del mismo cdigo HTML.
Una razn por la que construiremos una pgina dinmica es la simple vistosidad que pueden
alcanzar los trabajos, ya que podemos hacer presentaciones ms entretenidas de las que se
consiguen utilizando nicamente HTML. Pero vamos a ver con calma algunas razones menos
obvias pero ms importantes.
Supongamos que hemos decidido realizar un portal de televisin donde una de las
informaciones principales a proveer podra ser la programacin semanal. Efectivamente, esta
informacin suele ser dada por las televisiones con meses de antelacin y podra ser muy
fcilmente almacenada en una base de datos. Si trabajsemos con pginas HTML, tendramos
que construir una pgina independiente para cada semana en la cual introduciramos "a mano"
cada uno de los programas de cada una de las cadenas. Asimismo, cada semana nos
tendramos que acordar de descolgar la pgina de la semana pasada y colgar la de la actual.
Todo esto podra ser fcilmente resuelto mediante pginas dinmicas. En este caso, lo que
haramos sera crear un programa (solo uno) que se encargara de recoger de la base de datos
de la programacin aquellos programas que son retransmitidos en las fechas que nos interesan
y de confeccionar una pgina donde apareceran ordenados por cadena y por hora de
retransmisin. De este modo, podemos automatizar un proceso y desentendernos de un
aspecto de la pgina por unos meses.
Este hecho lo podramos aplicar a otras situaciones: podemos preparar el horscopo de todos
los das, las promociones de un sitio de e-comercio...
Podemos hacer una clasificacin a las pginas dinmicas en funcin de dnde se lleva a cabo el
procesamiento de la pgina, es decir, el computador que cargar con el peso adicional que
supone que la pgina realice efectos y funcionalidades.
23
24
Luego es el servidor el que maneja toda la informacin de las bases de datos y cualquier otro
recurso, como imgenes o servidores de correo y luego enva al cliente una pgina web con los
resultados de todas las operaciones.
Para escribir pginas dinmicas de servidor existen varios lenguajes, que veremos ms
adelante. Common Gateway Interface (CGI) comnmente escritos en Perl, Active Server Pages
(ASP), Hipertext Preprocesor (PHP), y Java Server Pages (JSP).
Las ventajas de este tipo de programacin son que el cliente no puede ver los scripts, ya que se
ejecutan y transforman en HTML antes de enviarlos. Adems son independientes del navegador
del usuario, ya que el cdigo que reciben es HTML fcilmente interpretable.
Como desventajas se puede sealar que ser necesario un servidor ms potente y con ms
capacidades que el necesario para las pginas de cliente. Adems, estos servidores podrn
soportar menos usuarios concurrentes, porque se requerir ms tiempo de procesamiento para
cada uno.
Javascript
Javascript es un lenguaje de programacin utilizado para crear pequeos programitas
encargados de realizar acciones dentro del mbito de una pgina web.
Se trata de un lenguaje de programacin del lado del cliente, porque es el navegador el que
soporta la carga de procesamiento. Gracias a su compatibilidad con la mayora de los
navegadores modernos, es el lenguaje de programacin del lado del cliente ms utilizado.
Con Javascript podemos crear efectos especiales en las pginas y definir interactividades con el
usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y
ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y tal
vez el nico, con que cuenta este lenguaje es el propio navegador.
Javascript es el siguiente paso, despus del HTML, que puede dar un programador de la web
que decida mejorar sus pginas y la potencia de sus proyectos. Es un lenguaje de programacin
bastante sencillo y pensado para hacer las cosas con rapidez, a veces con ligereza.
Incluso las personas que no tengan una experiencia previa en la programacin podrn aprender
este lenguaje con facilidad y utilizarlo en toda su potencia con slo un poco de prctica.
Entre las acciones tpicas que se pueden realizar en Javascript tenemos dos vertientes. Por un
lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos
de la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro,
javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo
que podemos crear pginas interactivas que contengan programas como calculadoras,
agendas, o tablas de clculo.
avascript es un lenguaje con muchas posibilidades, permite la programacin de pequeos
scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones,
estructuras de datos complejas, etc. Adems, Javascript pone a disposicin del programador
todos los elementos que forman la pgina web, para que ste pueda acceder a ellos y
modificarlos dinmicamente.
Con Javascript el programador, que se convierte en el verdadero dueo y controlador de cada
cosa que ocurre en la pgina cuando la est visualizando el cliente.
Visual Basic Script
25
Es un lenguaje de programacin de scripts slo compatible con Internet Explorer. Es por ello
que su utilizacin est desaconsejada a favor de Javascript.
Est basado en Visual Basic, un popular lenguaje para crear aplicaciones Windows. Tanto su
sintaxis como la manera de trabajar estn muy inspirados en l. Sin embargo, no todo lo que
se puede hacer en Visual Basic lo podremos hacer en Visual Basic Script, pues este ltimo es
una versin reducida del primero.
El modo de funcionamiento de Visual Basic Script para construir efectos especiales en pginas
web es muy similar al utilizado en Javascript y los recursos a los que se puede acceder tambin
son los mismos: el navegador.
Como decimos, no debemos utilizar este lenguaje en la mayora de las ocasiones, aunque un
caso donde tendra sentido utilizar Visual Basic Script sera la construccin de una Intranet
donde sepamos con toda seguridad que los navegadores que se van a conectar sern siempre
Internet Explorer. En este caso, un programador habitual de Visual Basic tendra ms
facilidades para realizar los scripts utilizando Visual Basic Script en lugar de Javascript.
Nota: El popular ASP (Active Server Pages) es una tecnologa de programacin del lado del
servidor. Habitualmente, los scripts ASP se escriben con Visual Basic Script tambin. Visual
Basic Script, por tanto, es un lenguaje que se puede utilizar para la programacin en el cliente,
pero tambin para la programacin en el servidor.
DHTML
DHTML no es precisamente un lenguaje de programacin. Ms bien se trata de una nueva
capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor
control sobre la pgina que antes.
Cualquier pgina que responde a las actividades del usuario y realiza efectos y funcionalidades
se puede englobar dentro del DHTML, pero en este caso nos referimos ms a efectos en el
navegador por los cuales se pueden mostrar y ocultar elementos de la pgina, se puede
modificar su posicin, dimensiones, color, etc.
DHTML nos da ms control sobre la pgina, gracias a que los navegadores modernos incluyen
una nueva estructura para visualizar en pginas web denominada capa. Las capas se pueden
ocultar, mostrar, desplazar, etc.
Para realizar las acciones sobre la pgina, como modificar la apariencia de una capa, seguimos
necesitando un lenguaje de programacin del lado del cliente como Javascript o VBScript.
Aclaracin: DHTML tambin puede englobar la programacin en el servidor.
Depende del autor que est describiendo lo que es DHTML, muchas veces hace tambin
referencia a la programacin en el servidor y no slo a la del cliente, como hemos apuntado en
este
artculo.
En
cierto
modo
debera
incluirse
ese
tipo
de
programacin.
Dicho de otro modo y para que quede claro. Las fronteras del DHTML quedan poco definidas.
Las que marcamos en el presente artculo son slo las que engloban a los procesos en el
cliente, pero tambin podramos decir que DHTML es cualquier cosa que hace una pgina
dinmica, ya sea en el cliente, el servidor o las dos cosas.
26
Dentro del concepto de DHTML se engloban tambin las Hojas de Estilo en Cascada o CSS
(Cascade Style Sheets), que veremos a continuacin.
Qu es CSS
CSS, es una tecnologa que nos permite crear pginas web de una manera ms exacta. Gracias
a las CSS somos mucho ms dueos de los resultados finales de la pgina, pudiendo hacer
muchas cosas que no se poda hacer utilizando solamente HTML, como incluir mrgenes, tipos
de letra, fondos, colores...
CSS son las siglas de Cascading Style Sheets, en espaol Hojas de estilo en Cascada. En este
captulo vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de
conocer la tecnologa entera.
Las Hojas de Estilo en Cascada se escriben dentro del cdigo HTML de la pgina web, solo en
casos avanzados se pueden escribir en un archivo a parte y enlazar la pgina con ese archivo.
En un principio vamos a utilizar la manera ms directa de aplicar estilos a los elementos de la
pgina, mas adelante veremos la declaracin en archivos externos. Para ello vamos a conocer
un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.
Ejemplo:
<p style="color:green;font-weight:bold">El prrafo saldr con color verde y en negrita</p>
Dentro del atributo style se deben indicar los atributos de estilos CSS separados por punto y
coma (;). Durante este captulo vamos a conocer muchos atributos de CSS, los dos primeros
que hemos visto aqu son:
Color: indica el color del contenido la etiqueta donde estemos utilizndolo, generalmente indica
el color del texto.
Font-weight: indica el grosor del texto. Bold sirve para poner en negrita.
Color en los enlaces
Con HTML definimos el color de los enlaces en la etiqueta <body>, con lo atributos link, vlink y
alink. Esto nos permite cambiar el color de los enlaces para todo el documento, pero Y si
queremos cambiar el color de un enlace en concreto, para que tenga otro color que el definido
en la etiqueta <body>?
Para hacer esto utilizaremos el atributo style dentro del enlace:
<a href="mienlace.html" style="color:red">
As saldr el enlace en color rojo, independientemente de lo definido para todo el documento.
Espaciado entre lneas
Con CSS podemos definir el espacio que hay entre cada lnea del documento, utilizando el
atributo line-height. Por ejemplo, podemos definir que para todo un prrafo el espacio entre
cada una de sus lneas sea 25 pixels:
<p style="line-height: 25px;">
Autor: Ing. Oscar R. Espeche
27
Un prrafo normal en el que cada una de las lneas est separada 25 pixels de la otra.
Hay que poner suficiente texto como para que se vean 2 lneas, as saldrn separadas
</p>
Espaciado entre caracteres
Se puede definir tambin el espacio entre cada carcter. Esto se hace con el atributo de CSS
letter-spacing. Veamos un ejemplo:
<p style="letter-spacing:12cm">
Este prrafo tiene las letras espaciadas por 1 centmetro.
</p>
Este atributo, al igual que ocurre con muchos otros de CSS, no est soportado por todos los
navegadores. En concreto Netscape, en su versin 4 todava no lo incluye.
Enlaces sin subrayado
Uno de los efectos ms significativos y fciles de realizar con CSS es eliminar el subrayado de
los enlaces de una pgina web. Existe un atributo que sirve para definir la decoracin de un
texto, si est subrayado, tachado, o si no tiene ninguna de estas "decoraciones". Es el atributo
text-decoration, en este caso indicaremos en un enlace que no queremos decoracin:
<a href="mipagina.html" style="text-decoration:none">
Incluir estilos para todo un sitio web
Una de las caractersticas ms potentes de la programacin con hojas de estilo consiste en
definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan slo
colocamos las declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con
ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos y,
por tanto, si la cambiamos, cambiarn todas las pginas.
Veamos
ahora
todo
el
proceso
para
incluir
estilos
con
un
archivo
externo.
P{
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
text-decoration : underline;
text-align : center;
background-color : Teal;
Autor: Ing. Oscar R. Espeche
28
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
2- Enlazamos la pgina web con la hoja de estilos
Para ello vamos a colocar la etiqueta <LINK> con los atributos
Veamos una pgina web entera que enlaza con la declaracin de estilos anterior:
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
<title>Pgina que lee estilos</title>
</head>
<body>
<h1>Pgina que lee estilos</h1>
<p>
Esta pgina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es
muy fcil.
</p>
</body>
</html>
Las Hojas de Estilo en Cascada son un estndar muy amplio, con unas especificaciones y
posibilidades muy grandes. Hasta aqu solo vimos unos cuantos efectos interesantes que
realizar aunque no tengamos ningn conocimiento previo. Sin embargo, lo mejor para trabajar
con esta tecnologa es conocerla bien, gracias a ello, los resultados sern mucho ms
sorprendentes.
Para ampliar esta informacin y conocer ms sobre CSS le dedicaremos un tpico especial en
este captulo.
Qu son los Applets de Java
Es otra manera de incluir cdigo a ejecutar en los clientes que visualizan una pgina web. Se
trata de pequeos programas hechos en Java, que se transfieren con las pginas web y que el
navegador ejecuta en el espacio de la pgina.
Los applets de Java estn programados en Java y precompilados, es por ello que la manera de
trabajar de stos vara un poco con respecto a los lenguajes de script como Javascript. Los
applets son ms difciles de programar que los scripts en Javascript y requerirn unos
conocimientos bsicos o medios del lenguaje Java.
La principal ventaja de utilizar applets consiste en que son mucho menos dependientes del
navegador que los scripts en Javascript, incluso independientes del sistema operativo del
29
computador donde se ejecutan. Adems, Java es ms potente que Javascript, por lo que el
nmero de aplicaciones de los applets podr ser mayor.
Como desventajas en relacin con Javascript cabe sealar que los applets son ms lentos de
procesar y que tienen espacio muy delimitado en la pgina donde se ejecutan, es decir, no se
mezclan con todos los componentes de la pgina ni tienen acceso a ellos. Es por ello que con
los applets de Java no podremos hacer directamente cosas como abrir ventanas secundarias,
controlar Frames, formularios, capas, etc.
Cmo es posible la multiplataforma en Java
Java es compatible con todos los sistemas porque basa su funcionamiento en los Byte Codes,
que no es ms que una precompilacin del cdigo fuente de Java.
Estos Byte Codes no son el programa en Java propiamente dicho, sino un archivo que contiene
un cdigo intermedio que puede manejar la Mquina Virtual de Java. Cada sistema operativo
dispone de una Maquina Virtual de Java que puede interpretar los Byte Codes y transformarlos
a sentencias ejecutables en el sistema en cuestin.
Ejemplos de Applets de Java
En la web podemos encontrar muchos ejemplos de applets de Java muy tiles y complejos.
Nosotros aqu vamos a mostrar un par de ejemplos que no tienen demasiada importancia, pero
que pueden aclarar un poco ms de qu se tratan estos applets.
Ejemplo de Reloj 3D. Efecto visual para incorporar un reloj digital el 3D en tu pgina
web.
Cdigo HTML:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 2.0">
<title>Clock3D.class (2)</title>
</head>
<body background="../imagenes/jeans.gif" bgcolor="#FFFFFF">
<div align="center"><center>
<table border="0">
<tr>
<td>.<applet code="Clock3D.class" align="baseline"
30
width="200" height="200">
<param name="12hour" value="0">
<param name="a1" value="12500">
<param name="bgcolor" value="#0066FF">
<param name="color" value="#000000">
<param name="fps" value="20">
<param name="irotx" value="0">
<param name="iroty" value="0">
<param name="irotz" value="00">
<param name="pixangle" value="5">
<param name="pixd" value="25">
<param name="radius" value="20">
<param name="rotx" value="0">
<param name="roty" value="-4">
<param name="rotz" value="0.401">
<param name="style" value="1">
Your browser is without java support</applet>
</td>
</tr>
</table>
</center></div>
</body>
</html>
Vemos que se hace referencia al archivo Clock3D.class que es applet en si. La imagen es la
siguiente que consiste en una cadena de caracteres que muestra la imagen del reloj que va
rotando.
31
CGI
Es el sistema ms antiguo que existe para la programacin de las pginas dinmicas de
servidor. Actualmente se encuentra un poco desfasado por diversas razones entre las que
destaca la dificultad con la que se desarrollan los programas y la pesada carga que supone para
el servidor que los ejecuta.
Los CGI se escriben habitualmente en el lenguaje Perl, sin embargo, otros lenguajes como C,
C++ o Visual Basic pueden ser tambin empleados para construirlos.
El funcionamiento bsico de un programa CGI es parecido al apuntado para el conjunto de las
pginas dinmicas del servidor, con algunas particularidades.
1. Se realiza una peticin http, a la que pueden acompaar datos llegados o bien por un
formulario o bien a travs de la URL.
2. El servidor ejecuta los programas CGI a los que se accede y trabaja con los recursos
necesarios para llevar a cabo las acciones, como por ejemplo bases de datos.
3. El programa CGI va escribiendo en la salida estndar el resultado de la ejecucin del
CGI, que incluye etiquetas HTML, ya que lo que se escribe es una pgina web.
Algunas desventajas de la programacin en CGI son las siguientes:
Los resultados se escriben directamente con el CGI, as que el cdigo del programa se
mezcla con el del HTML haciendo difcil su comprensin y mantenimiento.
Cada programa CGI que se pone en marcha lo hace en un espacio de memoria propio.
As, si tres usuarios ponen en marcha un CGI a la vez se multiplicar por tres la cantidad
de recursos que ocupe ese CGI. Esto significa una grave ineficiencia.
Perl
Es un lenguaje de programacin muy utilizado para construir aplicaciones CGI para el web. Perl
es un acrnimo de Practical Extracting and Reporting Languaje, que viene a indicar que se trata
de un lenguaje de programacin muy prctico para extraer informacin de archivos de texto y
generar informes a partir del contendido de los archivos.
Es un lenguaje libre de uso, eso quiere decir que es gratuito. Antes estaba muy asociado a la
plataforma Unx, pero en la actualidad est disponible en otros sistemas operativos como
Windows.
Perl es un lenguaje de programacin interpretado, al igual que muchos otros lenguajes de
Internet como Javascript o ASP. Esto quiere decir que el cdigo de los scripts en Perl no se
compila sino que cada vez que se quiere ejecutar se lee el cdigo y se pone en marcha
interpretando lo que hay escrito. Adems es extensible a partir de otros lenguajes, ya que
desde Perl podremos hacer llamadas a subprogramas escritos en otros lenguajes. Tambin
desde otros lenguajes podremos ejecutar cdigo Perl.
Perl est inspirado a partir de lenguajes como C, sh, awk y sed (algunos provenientes de los
sistemas Unx), pero est enfocado a ser ms prctico y fcil que estos ltimos. Es por ello que
32
un programador que haya trabajado con el lenguaje C y los otros, tendr menos problemas en
entenderlo y utilizarlo rpidamente. Una diferencia fundamental de Perl con respecto a los otros
lenguajes es que no limita el tamao de los datos con los que trabaja, el lmite lo pone la
memoria que en ese momento se encuentre disponible.
Si queremos trabajar con Perl ser necesario tener instalado el interprete del lenguaje. A partir
de ese momento podemos ejecutar CGIs en nuestros servidores web. El proceso para
conseguirlo puede variar de unos servidores a otros, pero se suelen colocar en un directorio
especial del servidor llamado cgi-bin donde hemos colocado los correspondientes permisos CGI.
Adems, los archivos con el cdigo tambin debern tener permiso de ejecucin.
ASP
ASP (Active Server Pages) es la tecnologa desarrollada por Microsoft para la creacin de
pginas dinmicas del servidor. ASP se escribe en la misma pgina web, utilizando el lenguaje
Visual Basic Script o Jscript (Javascript de Microsoft).
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de
que se enve la pgina a travs de Internet al cliente. Las pginas que se ejecutan en el
servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear
la pgina final que ver el cliente. El cliente solamente recibe una pgina con el cdigo HTML
resultante de la ejecucin de la PHP. Como la pgina resultante contiene nicamente cdigo
HTML, es compatible con todos los navegadores.
El tipo de servidores que emplean este lenguaje son, evidentemente, todos aquellos que
funcionan con sistema Windows NT, aunque tambin se puede utilizar en un PC con windows 98
si instalamos un servidor denominado Personal Web Server. Incluso en sistemas Linux podemos
utilizar las ASP si intalamos un componente denominado Chilisoft, aunque parece claro que ser
mejor trabajar sobre el servidor web para el que est pensado: Internet Information Server.
Con las ASP podemos realizar muchos tipos de aplicaciones distintas. Nos permite acceso a
bases de datos, al sistema de archivos del servidor y en general a todos los recursos que tenga
el propio servidor. Tambin tenemos la posibilidad de comprar componentes ActiveX fabricados
por distintas empresas de desarrollo de software que sirven para realizar mltiples usos, como
el envio de correo, generar grficas dinmicamente, y un largo etc.
Actualmente se ha presentado ya la segunda versin de ASP, el ASP.NET, que comprende
algunas mejoras en cuanto a posibilidades del lenguaje y rapidez con la que funciona. ASP.NET
tiene algunas diferencias en cuanto a sintaxis con el ASP, de modo que se ha de tratar de
distinta manera uno de otro.
PHP
PHP es el acrnimo de Hipertext Preprocesor. Es un lenguaje de programacin del lado del
servidor gratuito e independiente de plataforma, rpido, con una gran librera de
funciones y mucha documentacin.
Un lenguaje del lado del servidor es aquel que se ejecuta en el servidor web, justo antes de
que se enve la pgina a travs de Internet al cliente. Las pginas que se ejecutan en el
servidor pueden realizar accesos a bases de datos, conexiones en red, y otras tareas para crear
la pgina final que ver el cliente. El cliente solamente recibe una pgina con el cdigo HTML
resultante de la ejecucin de la PHP. Como la pgina resultante contiene nicamente cdigo
HTML, es compatible con todos los navegadores.
33
Una vez que ya conocemos el concepto de lenguaje de programacin de scripts del lado del
servidor podemos hablar de PHP. PHP se escribe dentro del cdigo HTML, lo que lo hace
realmente fcil de utilizar, al igual que ocurre con el popular ASP de Microsoft, pero con algunas
ventajas como su gratuidad, independencia de plataforma, rapidez y seguridad. Cualquiera
puede descargar a travs de la pgina principal de PHP http://www.php.net/ y de manera
gratuita, un mdulo que hace que nuestro servidor web comprenda los scripts realizados en
este lenguaje. Es independiente de plataforma, puesto que existe un mdulo de PHP para casi
cualquier servidor web. Esto hace que cualquier sistema pueda ser compatible con el lenguaje y
significa una ventaja importante, ya que permite portar el sitio desarrollado en PHP de un
sistema a otro sin prcticamente ningn trabajo.
PHP, en el caso de estar montado sobre un servidor Linux u Unix, es ms rpido que ASP, dado
que se ejecuta en un nico espacio de memoria y esto evita las comunicaciones entre
componentes COM que se realizan entre todas las tecnologas implicadas en una pgina ASP.
Por ltimo sealbamos la seguridad, en este punto tambin es importante el hecho de que en
muchas ocasiones PHP se encuentra instalado sobre servidores Unix o Linux, que son de sobra
conocidos como ms veloces y seguros que el sistema operativo donde se ejecuta las ASP,
Windows NT o 2000. Adems, PHP permite configurar el servidor de modo que se permita o
rechacen diferentes usos, lo que puede hacer al lenguaje ms o menos seguro dependiendo de
las necesidades de cada cual.
Fue creado originalmente en 1994 por Rasmus Lerdorf, pero como PHP est desarrollado en
poltica de cdigo abierto, a lo largo de su historia ha tenido muchas contribuciones de otros
desarrolladores. Actualmente PHP se encuentra en su versin 4, que utiliza el motor Zend,
desarrollado con mayor meditacin para cubrir las necesidades de las aplicaciones web
actuales.
34
Este lenguaje de programacin est preparado para realizar muchos tipos de aplicaciones web
gracias a la extensa librera de funciones con la que est dotado. La librera de funciones cubre
desde clculos matemticos complejos hasta tratamiento de conexiones de red, por poner dos
ejemplos.
Algunas de las ms importantes capacidades de PHP son: compatibilidad con las bases de
datos ms comunes, como MySQL, mSQL, Oracle, Informix, y ODBC, por ejemplo. Incluye
funciones para el envo de correo electrnico, upload de archivos, crear dinmicamente
en el servidor imgenes en formato GIF, incluso animadas y una lista interminable de
utilidades adicionales.
Este es el lenguaje que abordaremos en nuestro curso.
JSP
JSP es un acrnimo de Java Server Pages, que en castellano vendra a decir algo como Pginas
de Servidor Java. Es, pues, una tecnologa orientada a crear pginas web con programacin en
Java.
Con JSP podemos crear aplicaciones web que se ejecuten en variados servidores web, de
mltiples plataformas, ya que Java es en esencia un lenguaje multiplataforma. Las pginas JSP
estn compuestas de cdigo HTML/XML mezclado con etiquetas especiales para programar
scripts de servidor en sintaxis Java. Por tanto, las JSP podremos escribirlas con nuestro editor
HTML/XML habitual.
Motor JSP
El motor de las pginas JSP est basado en los servlets de Java -programas en Java destinados
a ejecutarse en el servidor-, aunque el nmero de desarrolladores que pueden afrontar la
programacin de JSP es mucho mayor, dado que resulta mucho ms sencillo aprender que los
servlets.
En JSP creamos pginas de manera parecida a como se crean en ASP. Generamos archivos con
extensin .jsp que incluyen, dentro de la estructura de etiquetas HTML, las sentencias Java a
ejecutar en el servidor. Antes de que sean funcionales los archivos, el motor JSP lleva a cabo
una fase de traduccin de esa pgina en un servlet, implementado en un archivo class (Byte
codes de Java). Esta fase de traduccin se lleva a cabo habitualmente cuando se recibe la
primera solicitud de la pgina .jsp, aunque existe la opcin de precompilar en cdigo para evitar
ese tiempo de espera la primera vez que un cliente solicita la pgina.
Ejemplo de pgina JSP
En la imagen siguiente se puede ver un ejemplo extremadamente simple de una pgina JSP y el
esquema de conversin de esa pgina en un servlet.
Prerequisitos
Para aprender JSP, aparte de conocer HTML, ser necesario comprender y tener algo de
experiencia en la programacin en Java, que es un lenguaje de programacin Orientado a
Objetos por completo. Una vez conocida la programacin en Java se puede estudiar por encima
el sistema de Servlets, lo que nos dar una mejor idea del funcionamiento interno del motor
JSP.
Adems, necesitaremos descargar e instalar Tomcat, el contenedor de servlets usado en la
referencia oficial de implementacin de JSP.
35
componentes
JSP
son
reusables
en
distintas
plataformas
(UNIX,
Windows).
La ventaja Java
La tecnologa JSP usa Java como lenguaje de Script mientras que ASP usa VBScript o Jscript.
Java es un lenguaje mas potente y escalable que los lenguajes de Script. Las pginas JSP son
compilados en Servlets por lo que actan como una puerta a todos los servicios Java de
Servidor y libreras Java para aplicaciones http. Java hace el trabajo del desarrollador ms fcil
p. e. ayuda a proteger el sistema contra las "cadas" mientras que las aplicaciones ASP sobre
sistemas NT son ms susceptibles a sufrirlas, tambin ayuda en el manejo de la memoria
protegiendo contra fallos de memoria y el duro trabajo de buscar los fallos de perdida de
punteros de memoria que pueden hacer mas lento el funcionamiento de una aplicacin.
Mantenimiento
Las aplicaciones que usan JSP tiene un mantenimiento ms fcil que las que usan ASP.
Los lenguajes de Script estn bien para pequeas aplicaciones, pero no encajan bien
para aplicaciones grandes. Java es un lenguaje estructurado y es ms fcil de construir y
mantenimientos grandes como aplicaciones modulares.
La tecnologa JSP hace mayor nfasis en los componentes que en los Scripts, esto hace
que sea ms fcil revisar el contenido sin que afecte a la lgica o revisar la lgica sin
cambiar el contenido.
La arquitectura EJB encapsula la lgica de p. e.: acceso a BD, seguridad, integridad
transaccional y aislamiento de la aplicacin.
Debido a que la tecnologa JSP es abierta y multiplataforma, los servidores web,
plataformas y otros componentes pueden ser fcilmente actualizados o cambiados sin
que afecte a las aplicaciones basadas en la tecnologa JSP.
36
Conclusin
Las ventajas sobre utilizar la tecnologa Java con respecto a la propietaria de Microsoft (ASP)
son, como se ha podido ver, diversas e interesantes. Sin embargo, podemos apuntar una
ventaja de la programacin en ASP, pues resulta bastante ms fcil de aprender que JSP, por lo
menos si no se tiene una experiencia previa en programacin. Esto es debido a que Java es un
lenguaje muy potente, pero un poco ms complicado de usar porque es orientado a objetos y la
manera de escribir los programas es ms rgida.
XML
XML es una tecnologa en realidad muy sencilla que tiene a su alrededor otras tecnologas que
la complementan y la hacen mucho ms grande y con unas posibilidades mucho mayores.
XML, con todas las tecnologas relacionadas, representa una manera distinta de hacer las cosas,
ms avanzada, cuya principal novedad consiste en permitir compartir los datos con los que se
trabaja a todos los niveles, por todas las aplicaciones y soportes. As pues, el XML juega un
papel importantsimo en este mundo actual, que tiende a la globalizacin y la compatibilidad
entre los sistemas, ya que es la tecnologa que permitir compartir la informacin de una
manera segura, fiable, fcil. Adems, XML permite al programador y los soportes dedicar sus
esfuerzos a las tareas importantes cuando trabaja con los datos, ya que algunas tareas tediosas
como la validacin de estos o el recorrido de las estructuras corre a cargo del lenguaje y est
especificado por el estndar, de modo que el programador no tiene que preocuparse por ello.
Vemos que XML no est slo, sino que hay un mundo de tecnologas alrededor de l, de
posibilidades, maneras ms fciles e interesantes de trabajar con los datos y, en definitiva, un
avance a la hora de tratar la informacin, que es en realidad el objetivo de la informtica en
general. XML, o mejor dicho, el mundo XML no es un lenguaje, sino varios lenguajes, no es una
sintaxis, sino varias y no es una manera totalmente nueva de trabajar, sino una manera ms
refinada que permitir que todas las anteriores se puedan comunicar entre si sin problemas, ya
que los datos cobran sentido.
XML es interesante en el mundo de Internet y el e-bussiness, ya que existen muchos sistemas
distintos que tienen que comunicarse entre si, pero como se ha podido imaginar, interesa por
igual a todas las ramas de la informtica y el tratamiento de datos, ya que permite muchos
avances a la hora de trabajar con ellos.
37
1.1.4 HTML
HTML es el lenguaje con el que se escriben las pginas web. Las pginas web pueden ser
vistas por el usuario mediante un tipo de aplicacin llamada navegador. Podemos decir por lo
tanto que el HTML es el lenguaje usado por los navegadores para mostrar las pginas webs al
usuario, siendo hoy en da la internase ms extendida en la red.
Con este tema nos introducimos a la parte prctica del curso donde empezaremos a ver
ejemplos y tcnicas que nos permitan programar un sitio para lograr nuestro objetivo final
como por ejemplo disear un sitio con caractersticas de comercio electrnico.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro gusto.
Adems, y es aqu donde reside su ventaja con respecto a libros o revistas, el HTML nos
permite la introduccin de referencias a otras pginas por medio de los enlaces hipertexto.
El HTML se cre en un principio con objetivos divulgativos. No se pens que la web llegara a ser
un rea de ocio con carcter multimedia, de modo que, el HTML se cre sin dar respuesta a
todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizaran en
un futuro. Sin embargo, pese a esta deficiente planificacin, si que se han ido incorporando
modificaciones con el tiempo, estos son los estndares del HTML. Numerosos estndares se han
presentado ya. El HTML 4.01 es el ltimo estndar a septiembre de 2001.
Esta evolucin tan anrquica del HTML ha supuesto toda una seria de inconvenientes y
deficiencias que han debido ser superados con la introduccin de otras tecnologas accesorias
capaces de organizar, optimizar y automatizar el funcionamiento de las webs. Ejemplos que
pueden sonaros son las CSS, JavaScript u otros. Veremos ms adelante en qu consisten
algunas de ellas.
Otros de los problemas que han acompaado al HTML es la diversidad de navegadores
presentes en el mercado los cuales no son capaces de interpretar un mismo cdigo de una
manera unificada. Esto obliga al webmaster a, una vez creada su pgina, comprobar que esta
puede ser leda satisfactoriamente por todos los navegadores, o al menos, los ms utilizados.
Adems del navegador necesario para ver los resultados de nuestro trabajo, necesitamos
evidentemente otra herramienta capaz de crear la pgina en si. Un archivo HTML (una pgina)
no es ms que un texto. Es por ello que para programar en HTML necesitamos un editor de
textos.
Es recomendable usar el Bloc de notas que viene con windows, u otro editor de textos sencillo.
Hay que tener cuidado con algunos editores ms complejos como Wordpad o Microsoft Word,
pues colocan su propio cdigo especial al guardar las pginas y HTML es nicamente texto
plano, con lo que podremos tener problemas.
Existen otro tipo de editores especficos para la creacin de pginas web los cuales ofrecen
muchas facilidades que nos permiten aumentar nuestra productividad. No obstante, es
aconsejable en un principio utilizar una herramienta lo ms sencilla posible para poder prestar
la mxima atencin a nuestro cdigo y familiarizarnos lo antes posible con l. Siempre
tendremos tiempo ms delante de pasarnos a editores ms verstiles con la consiguiente
ganancia de tiempo.
En este curso solo veremos los aspectos ms avanzados y comunes a la vez, que nos
posibilitarn generar pginas con contenido complejo como lo es compartir cdigo HTML y PHP.
38
Enlaces
Lo bsico es que una pgina web consiste en un archivo HTML en el que podemos incluir, entre
otras cosas, textos formateados a nuestro gusto e imgenes. Del mismo modo, un sitio web
podr ser considerado como el conjunto de archivos, principalmente pginas HTML e imgenes,
que constituyen el contenido al que el navegante tiene acceso.
Sin embargo, no podramos hablar de navegante o de navegacin si estos archivos HTML no
estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de
enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible puesta en
relacin de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que
permitan un acceso rpido a la informacin deseada. De poco servira en la red tener pginas
aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras.
Un enlace puede ser fcilmente detectado en una pgina. Basta con deslizar el puntero del
ratn sobre las imgenes o el texto y ver como cambia de su forma original transformndose
por regla general en una mano con un dedo sealador. Adicionalmente, estos enlaces suelen ir,
en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en
reconocerlos. Si no especificamos lo contrario (ya tendremos ocasin de explicar como), estos
enlaces texto estarn subrayados y coloreados en azul. En el caso de las imgenes que sirvan
de enlace, veremos que estn delimitadas por un marco azul por defecto.
Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de
apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido
bajo forma de atributo, el cual lleva por nombre href.
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el contenido un texto o una imagen. Es la parte de la pgina que se colocar activa y
donde deberemos pulsar para acceder al enlace.
Por su parte, destino ser una pgina, un correo electrnico o un archivo.
En funcin del destino los enlaces son clsicamente agrupados del siguiente modo:
Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina.
Enlaces locales: los que se dirigen a otras pginas del mismo sitio web.
Enlaces remotos: los dirigidos hacia pginas de otros sitios web.
Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una
direccin.
Enlaces con archivos: para que los usuarios puedan hacer download de archivos.
Enlaces
internos
Son los enlaces que apuntan a un lugar diferente dentro de la misma pgina. Este tipo de
enlaces son esencialmente utilizados en pginas donde el acceso a los contenidos puede verse
dificultado debido al gran tamao de la misma. Mediante estos enlaces podemos ofrecer al
visitante la posibilidad de acceder rpidamente al principio o final de la pgina o bien a
diferentes prrafos o secciones.
39
Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho,
un segundo enlace que ser colocado en el destino. Veamos ms claramente como funcionan
estos enlaces con un ejemplo sencillo:
Supongamos que queremos crear un enlace que apunte al final de la pgina. Lo primero ser
colocar nuestro enlace origen. Lo pondremos aqu mismo y lo escribiremos del siguiente modo:
<a href="#abajo">Ir abajo</a>
Como podemos ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un
punto de la misma pgina que todava no hemos definido. Ojo al smbolo #; es l quien
especifica al navegador que el enlace apunta a una seccin en particular.
En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre
abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma
pgina. En este caso, la etiqueta que escribiremos ser sta:
<a name="abajo"></a>
A decir verdad, estos enlaces, aunque tiles, no son los ms extendidos de cuantos hay. La
tendencia general es la de crear pginas (archivos) independientes con tamaos ms reducidos
enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el
exceso de tiempo de carga de un archivo y la introduccin de exceso de informacin que pueda
desviar la atencin del usuario.
Una aplicacin corriente de estos enlaces consiste en poner un pequeo ndice al principio de
nuestro documento donde introducimos enlaces origen a las diferentes secciones.
Paralelamente, al final de cada seccin introducimos un enlace que apunta al ndice de manera
que podamos guiar al navegante en la bsqueda de la informacin til para l.
Enlaces locales
Como hemos dicho, un sitio web esta constituido de pginas interconectas. En el tema anterior
hemos visto como enlazar distintas secciones dentro de una misma pgina. Nos queda pues
estudiar la manera de relacionar los distintos documentos HTML que componen nuestro sitio
web.
Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:
<a href="archivo.html">contenido</a>
Por regla general, para una mejor organizacin, los sitios suelen estar ordenados por
directorios. Estos directorios suelen contener diferentes secciones de la pgina, imgenes,
sonidos...Es por ello que en muchos casos no nos valdr con especificar el nombre del archivo,
sino que tendremos que especificar adems el directorio en el que nuestro archivo.html esta
alojado.
Si hemos trabajado con MS-DOS no tendremos ningn problema para comprender el modo de
funcionamiento. Tan solo hay que tener cuidado en usar la barra "/" en lugar de la contrabarra
"\".
Para aquellos que no saben como mostrar un camino de un archivo, aqu van una serie de
indicaciones que ayudaran a comprender la forma de expresarlos. No resulta difcil en absoluto
y con un poco de prctica lo haremos fcilmente.
40
41
Este tipo de enlaces es muy comn y no representa ninguna dificultad. Simplemente colocamos
en el atributo HREF de nuestra etiqueta <A> la URL o direccin de la pgina con la que
queremos enlazar. Ser algo parecido a esto.
<a href="http://www.pepe.com">ir a pepe.com</a>
Slo cabe destacar que todos las direcciones web (URLs) empiezan por http://. Esto indica
que el protocolo por el que se accede es HTTP, el utilizado en la web. No debemos olvidarnos de
colocarlas, porque si no los enlaces sern tratados como enlaces locales a nuestro sitio.
Otra cosa interesante es que no tenemos que enlazar con una pgina web con el protocolo
HTTP necesariamente. Tambin podemos acceder a recursos a travs de otros protocolos como
el FTP. En tal caso, las direcciones de los recursos no comenzarn por http:// sino por ftp://.
Enlaces a direcciones de correo
Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje
de correo electrnico dirigido a una direccin de mail determinada. Estos enlaces son muy
habituales en las pginas web y resultan la manera ms rpida de ofrecer al visitante una va
para el contacto con el propietario de la pgina.
Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo
href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace.
<a href="mailto:pepe@pepe.com">pepe@pepe.com</a>
Consejo: Cuando coloques enlaces a direcciones de correo procura indicar en el contenido del
enlace (lo que hay entre <A> y </A>) la direccin de correo a la que se debe escribir. Esto es
porque si un usuario no tiene configurado un programa de correo en su computador no podr
enviar mensajes, pero por lo menos podr copiar la direccin de mail y escribir el correo a
travs de otro computador o un sistema web-mail.
Adems de la direccin de correo del destinatario, tambin podemos colocar en el enlace el
asunto del mensaje. Esto se consigue colocando despus de la direccin de correo un
interrogante, la palabra subject, un signo igual (=) y el asunto en concreto.
<a href="malito:pepe@pepe.com?subject=contacto a travs de la pagina">pepe@pepe.com</a>
Podemos colocar otros atributos del mensaje con una sintaxis parecida. En este caso indicamos
tambin que el correo debe ir con copia a info@pepe.com.
<a href="mailto:pepe@pepe.com?subject=contacto a travs de la
pagina&cc=info@pepe.com">pepe@pepe.com</a>
Nota: El visitante de la pgina necesitar tener configurada una cuenta de correo electrnico
en su sistema para enviar los mensajes. Lgicamente, si no tiene servicio de correo en el
computador no se podrn enviar los mensajes y este sistema de contacto con el visitante no
funcionar.
42
El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos,
con la nica particularidad de que en vez de estar dirigidos hacia una pgina web est dirigido
hacia un archivo de otro tipo.
Si queremos enlazar con un archivo mi_archivo.zip que se encuentra en el mismo directorio que
la pgina se escribira un enlace as.
<a href="mi_archivo.zip">Descarga mi_archivo.zip</a>
Si pinchamos un enlace de este tipo nuestro navegador descargar el archivo, haciendo la
pregunta tpica de "Qu queremos hacer con el archivo. Abrirlo o guardarlo en disco".
Consejo: No colocar en Internet archivos ejecutables directamente sino archivos comprimidos.
Por dos razones:
1. El archivo ocupar menos, con lo que ser ms rpida su transferencia.
2. Al preguntar al usuario lo que desea hacer con el archivo le ofrece la opcin de abrirlo y
guardarlo en disco. Nosotros generalmente desearemos que el usuario lo guarde en
disco y no lo ejecute hasta que lo tenga en su disco duro. Si se decido a abrirlo en vez
de guardarlo simplemente lo pondr en marcha y cuando lo pare no se quedar
guardado en su sistema. Si los archivos estn comprimidos obligaremos al usuario a
descomprimirlos en su disco duro antes de ponerlos en marcha, con lo que nos
aseguramos que el usuario lo guarde en su computador antes de ejecutarlo.
Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML (Realidad
virtual para Internet) lo seguimos haciendo de la misma manera. El navegador, si reconoce el
tipo de archivo, es el responsable de abrirlo utilizando el conector adecuado para ello. As, si
por ejemplo enlazamos con un PDF pondr el programa Acrobat Reader en funcionamiento para
mostrar los contenidos. Si enlazamos con un mundo VRML pondr en marcha el plug-in que el
usuario tenga instalado para ver los mundos virtuales (Cosmo Player por ejemplo).
Este sera un ejemplo de enlace a un documento PDF.
<a href="mi_documento_pdf">Descarga el PDF</a>
43
Tablas
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos
contenidos.
En un principio nos podra parecer que las tablas son raramente tiles y que pueden ser
utilizadas principalmente para listar datos como agendas, resultados y otros datos de una
forma organizada. Nada ms lejos de la realidad.
Hoy, gran parte de los diseadores de pginas basan su diseo en este tipo de artilugios. En
efecto, una tabla nos permite organizar y distribuir los espacios de la manera ms optima. Nos
puede ayudar a generar texto en columnas como los peridicos, prefijar los tamaos ocupados
por distintas secciones de la pgina o poner de una manera sencilla un pie de foto a una
imagen.
Puede que en un principio nos resulte un poco complicado trabajar con estas estructuras pero,
si deseamos crear una pgina de calidad, tarde o temprano tendremos que vrnoslas con ellas
y nos daremos cuenta de las posibilidades nos ofrecen.
Para empezar, nada ms sencillo que por el principio: las tablas son definidas por las etiquetas
<table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e imgenes que
darn forma y contenido a la tabla.
Las tablas son descritas por lneas de izquierda a derecha. Cada una de estas lneas es definida
por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada lnea, habr diferentes celdas. Cada una de estas celdas ser definida
por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas ser donde coloquemos
nuestro contenido.
Aqu tenemos un ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2
A partir de esta idea simple y sencilla, las tablas adquieren otra magnitud cuando les
incorporamos toda una batera de atributos aplicados sobre cada tipo de etiquetas que las
componen.
44
Las celdas son delimitadas por las etiquetas <td> o por las etiquetas <th> (si queremos texto
en negrita y centrado) y constituyen un entorno independiente del resto del documento. Esto
quiere decir que:
Podemos usar prcticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para,
de esta forma, dar forma a su contenido.
Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
Las etiquetas de fuera de la celda no son tenidas en cuenta por sta.
valign
bgcolor
width
colspan
rowspan
Nota: El atributo height no funciona en todos los navegadores, adems, su uso no est
muy extendido. Las celdas por lo general tienen el alto que ncesitan para que quepa
todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa
lo que hemos colocado dentro.
El atributo width si que funciona en todos los navegadores y lo tendremos que utilizar
constantemente. Si le asignamos un ancho a la celda, el ancho ser respetado y si dicha
celda tiene mucho texto o cualquier otro contenido, la celda crecer hacia abajo todo lo
necesario para que quepa lo que hemos colocado.
Debemos tener en cuenta: que si definimos una celda de un ancho 100 por ejemplo, y
colocamos en la celda un contenido como una imagen que mida ms de 100 pixeles, la
celda crecer en horizontal todo lo necesario para que la imagen quepa. Si el elemento,
aunque ms ancho, fuera divisible (como un texto) el ancho sera respetado y el texto
crecera hacia abajo o lo que es lo mismo, en altura, como sealbamos en el anterior
prrafo.
Autor: Ing. Oscar R. Espeche
45
Estos ltimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width
nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o
puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamao total
de la tabla.
A titulo de ejemplo:
<td width="80">
Dar una anchura de 80 pixels a la celda. Sin embargo,
<td width="80%">
Dar una anchura a la celda del 80% de la anchura de la tabla.
Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer
lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en
algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto
presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada
para mantener la palabra en la misma lnea. Por otra parte, si el texto resulta muy largo, la
celda aumentara su altura para poder mostrar todo su contenido.
Anlogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma
columna, el navegador no sabr a cual hacer caso. Es por ello que resulta conveniente tener
bien claro desde un principio como es la tabla que queremos disear. No esta de ms si la
prediseamos en papel si la complejidad es importante. El HTML resulta en general fcil pero
las tablas pueden convertirse en un verdadero quebradero de cabeza si no llegamos a
comprenderlas debidamente.
Los atributos rowspan y colspan son tambin utilizados frecuentemente. Gracias a ellos es
posible expandir celdas fusionando stas con sus vecinas. El valor que pueden tomar estas
etiquetas es numrico. El nmero representa la cantidad de celdas fusionadas.
As,
<td colspan="2">
Fusionara la celda en cuestin con su vecina derecha.
Esta celda tiene un colspan="2"
Celda normal
Otra celda
46
Adems de los atributos especficos de cada celda o lnea, las tablas pueden ser adicionalmente
formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aqu
aquellos que pueden parecernos en un principio importantes:
align
border
width
Los atributos que definen las dimensiones, height y width, funcionan de una manera anloga a
la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align
no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino ms
bien, justificar la propia tabla con respecto a su entorno.
Vamos a poner tres ejemplos de alineado de tablas, centradas, alineadas a la derecha y a la
izquierda.
Los atributos cellpading y cellspacing nos ayudaran a dar a nuestra tabla un aspecto ms
esttico. En un principio puede parecernos un poco confuso su uso pero un poco de practica
ser suficiente para hacerse con ellos.
En la siguiente imagen podemos ver grficamente el significado de estos atributos.
Se puede comprobar que los atributos definidos para una celda tienen prioridad con respecto a
los definidos para una tabla. Podemos definir, por ejemplo, una tabla con color de fondo rojo y
una de las celdas de color de fondo verde y se ver toda la tabla de color rojo menos la celda
verde. Del mismo modo, podemos definir un color azul para los bordes de la tabla y hacer que
47
una celda particular sea mostrada con un borde rojo. (Aunque esto no funcionar en todos los
navegadores debido a que algunos no reconocen el atributo bordercolor.
Tabla de color El atributo bgcolor de la
rojo de fondo tabla est en rojo.
Celda normal
Tablas anidadas
Muy til tambin es el uso de tablas anidadas. As, podemos incluir una tabla dentro de la celda
de otra. El modo de funcionamiento sigue siendo el mismo aunque la situacin puede
complicarse si el nmero de tablas embebidas dentro de otras es elevado.
Consejo: La mayora de las pginas avanzadas que basan su diseo en tablas,
realizan anidaciones de tablas constantemente para meter unos elementos de la
pgina dentro de otros. Se pueden anidar tablas sin lmite, sin embargo, en el caso de
Netscape 4 hay que tener cuidado con el nmero de tablas que anidamos, porque a
medida que metemos una tabla dentro de otra y otra dentro de esta y otra ms,
aumentando el grado de anidacin sucesivamente... podemos encontrar problemas en
su visualizacin y puede que la pgina tarde un poco de tiempo ms en mostrarse en
pantalla.
Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y luego el cdigo,
as conseguiremos entenderlo mejor.
48
</table>
Ejemplos prcticos
Hasta aqu la informacin que pretendamos transmitiros sobre las tablas en HTML. Sera
importante ahora realizar algn ejemplo de realizacin de una tabla un poco compleja. Por
ejemplo la siguiente:
Animales en peligro de extincin
Nombre
Ballena
6000
Oso Pardo 50
Lince
10
Tigre
300
4000
1500
0
210
49
<td>Ballena</td>
<td align="center">6000</td>
<td align="center">4000</td>
<td align="center">1500</td>
</tr>
<tr>
<td>Oso Pardo</td>
<td align="center">50</td>
<td rowspan="2" colspan="2" align="center" bgcolor="red">0</td>
</tr>
<tr>
<td>Lince</td>
<td align="center">10</td>
</tr>
<tr>
<td>Tigre</td>
<td align="center">300</td>
<td colspan="2" align="center">210</td>
</tr>
</table>
</body>
</html>
Parte de abajo
de Amrica del
Sur. Pases
como:
Argentina
Chile
Uruguay
Paraguay
50
51
secos.</td>
<td bgcolor="#358391">Climas martimos con veranos secos, con inviernos secos, climas
frios, clima de estepa, clima desrtico.</td>
</tr>
</table>
</body>
</html>
52
Formularios
Hasta ahora hemos visto la forma en la que el HTML gestiona y muestra la informacin,
esencialmente mediante texto, imgenes y enlaces. Nos queda por ver de qu forma podemos
intercambiar informacin con nuestro visitante. Desde luego, este nuevo aspecto resulta
primordial para gran cantidad de acciones que se pueden llevar a cabo mediante el Web:
Comprar un articulo, rellenar una encuesta, enviar un comentario al autor...
Hemos visto anteriormente que podamos, mediante los enlaces, contactar directamente con un
correo electrnico. Sin embargo, esta opcin puede resultar en algunos casos poco verstil si lo
que deseamos es que el navegante nos enve una informacin bien precisa. Es por ello que el
HTML propone otra solucin mucho ms amplia: Los formularios.
Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas
pginas web. Son muy utilizados para realizar bsquedas o bien para introducir datos
personales por ejemplo en sitios de comercio electrnico. Los datos que el usuario introduce en
estos campos son enviados al correo electrnico del administrador del formulario o bien a un
programa que se encarga de procesarlo automticamente.
Usando solo HTML podemos nicamente enviar el formulario a un correo electrnico. Si
queremos procesar el formulario mediante un programa, la cosa puede resultar un poco ms
compleja ya que tendremos que emplear otros lenguajes ms sofisticados.
En este caso, la solucin ms sencilla es utilizar los programas prediseados que nos proponen
un gran nmero de servidores de alojamiento y que nos permiten almacenar y procesar los
datos en forma de archivos u otros formatos. Si las pginas estn alojadas en un servidor que
nos propone este tipo de ventajas, siempre se puede recurrir a servidores de terceros que
ofrecen este u otro tipo de servicios gratuitos para webs.
Por supuesto, existe otra alternativa que es la de aprender lenguajes como ASP o PHP que nos
permitirn, entre otras cosas, el tratamiento de formularios.
Los formularios son definidos por medio de las etiquetas <form> y </form>. Entre estas dos
etiquetas colocaremos todos los campos y botones que componen el formulario. Dentro de esta
etiqueta <form> debemos especificar algunos atributos:
action
Define el tipo de accin a llevar a cabo con el formulario. Como ya hemos dicho, existen dos
posibilidades:
53
La forma en la que se expresa la localizacin del archivo que contiene el programa es la misma
que la usada para los enlaces (links).
method
Este atributo se encarga de especificar la forma en la que el formulario es enviado. Los dos
valores posibles que puede tomar esta atributo son post y get. A efectos prcticos y, salvo que
se diga lo contrario, daremos siempre el valor post.
enctype
Se utiliza para indicar la forma en la que viajar la informacin que se mande por el formulario.
En el caso ms corriente, enviar el formulario por correo electrnico, el valor de este atributo
debe de ser "text/plain". As conseguimos que se enve el contenido del formulario como texto
plano dentro del email.
Si queremos que el formulario se procese automticamente por un programa, generalmente no
utilizaremos este atributo, de modo que tome su valor por defecto, es decir, no incluiremos
enctype dentro de la etiqueta <form>
Ejemplo de etiqueta <form> completa
As, para el caso ms habitual -el envo del formulario por correo- la etiqueta de creacin del
formulario tendr el siguiente aspecto:
<form action="mailto:direccion@correo.com (o nombre del archivo de proceso)"
method="post" enctype="text/plain">
Entre esta etiqueta y su cierre colocaremos el resto de etiquetas que darn forma a nuestro
formulario.
Elementos de formulario
El HTML nos propone una gran diversidad de alternativas a la hora de crear nuestros
formularios. Estas van desde la clsica caja de texto hasta la lista de opciones pasando por las
cajas de validacin.
Veamos en qu consiste cada una de estas modalidades y como podemos implementarlas en
nuestro formulario.
Texto corto
Las cajas de texto son colocadas por medio de la etiqueta <input>. Dentro de esta etiqueta
hemos de especificar el valor de dos atributos: type y name.
La etiqueta es de la siguiente forma:
<input type="text" name="nombre">
De este modo expresamos nuestro deseo de crear una caja de texto cuyo contenido ser
llamado nombre (por ejemplo). El aspecto de este tipo de cajas es de sobra conocido, aqu lo se
puede ver:
54
El nombre del elemento del formulario es de gran importancia para poder identificarlo en
nuestro programa de procesamiento o en el mail recibido. Por otra parte, es importante indicar
el atributo type, ya que, como veremos, existen otras modalidades de formulario que usan esta
misma etiqueta.
El empleo de estas cajas esta fundamentalmente destinado a la toma de datos breves: palabras
o conjuntos de palabras de longitud relativamente corta. Veremos ms adelante que existe otra
forma de tomar textos ms largos a partir de otra etiqueta.
Adems de estos dos atributos, esenciales para el correcto funcionamiento de nuestra etiqueta,
existen otra serie de atributos que pueden resultarnos de utilidad pero que no son
imprescindibles:
size
Define el tamao de la caja en nmero de caracteres. Si al escribir el usuario llega al final de la
caja, el texto ira desfilando a medida que se escribe haciendo desaparecer la parte de texto que
queda a la izquierda.
maxlength
Indica el tamao mximo del texto que puede ser tomado por el formulario. Es importante no
confundirlo con el atributo size. Mientras el primero define el tamao aparente de la caja de
texto, maxlength indica el tamao mximo real del texto que se puede escribir. Podemos tener
una caja de texto con un tamao aparente (size) que es menor que el tamao mximo
(maxlength). Lo que ocurrir en este caso es que, al escribir, el texto ira desfilando dentro de la
caja hasta que lleguemos a su tamao mximo definido por maxlength, momento en el cual
nos ser imposible continuar escribiendo.
value
En algunos casos puede resultarnos interesante asignar un valor pre-definido al campo en
cuestin. Esto puede ayudar al usuario a rellenar ms rpidamente el formulario o darle alguna
idea sobre la naturaleza de datos que se requieren. Este valor inicial del campo puede ser
expresado mediante el atributo value. Veamos su efecto con un ejemplo sencillo:
<input type="text" name="nombre" value="Perico Peres">
Genera un campo de este tipo:
Perico Pere
Nota:
estamos
obligados
utilizar
la
etiqueta
<form>
Aunque de lo que se lee en estos captulos sobre formularios se puede entender bien
esto, hemos querido remarcarlo para que quede muy claro: Cuando queremos utilizar
en cualquer situacin elementos de formulario debemos escribirlos siempre entre las
etiquetas <form> y </form>. De lo contrario, los elementos se vern perfectamente
en Explorer pero no en Netscape.
Dicho de otra forma, en Netscape no se visualizan los elementos de formulario a no
ser que estn colocados entre las correspondientes etiquetas de inicio y fin de
formulario.
Es por ello que para mostrar un campo de texto no vale con poner la etiqueta
<input>, sino que habr que ponerla dentro de un formulario. As:
55
<form>
<input type="text" name="nombre" value="Perico Peres">
</form>
Veremos posteriormente que este atributo puede resultar relevante en determinadas
situaciones.
Texto oculto
Podemos esconder el texto escrito por medio asteriscos de manera a aportar una cierta
confidencialidad. Este tipo de campos son anlogos a los de texto con una sola diferencia:
remplazamos el atributo type="text" por type="password":
<input type="password" name="nombre">
En este caso, se puede comprobar que al escribir dentro del campo en lugar de texto se vern
asteriscos.
Estos campos son ideales para la introduccin de datos confidenciales, principalmente cdigos
de acceso. Se ve en funcionamiento a continuacin.
***
Texto largo
Si deseamos poner a la disposicin de usuario un campo de texto donde pueda escribir
cmodamente sobre un espacio compuesto de varias lneas, hemos de invocar una nueva
etiqueta: <textarea> y su cierre correspondiente.
Este tipo de campos son prcticos cuando el contenido a enviar no es un nombre telfono o
cualquier otro dato breve, sino ms bien, un comentario, opinin, etc.
Dentro de la etiqueta textarea deberemos indicar, como para el caso visto anteriormente, el
atributo name para asociar el contenido a un nombre que ser asemejado a una variable en los
programs de proceso. Adems, podemos definir las dimensiones del campo a partir de los
atributos siguientes:
rows
Define el nmero de lneas del campo de texto.
cols
Define el nmero de columnas del campo de texto.
La etiqueta queda por tanto de esta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
El resultado es el siguiente:
56
Asimismo, es posible predefinir el contenido del campo. Para ello, no usaremos el atributo value
sino que escribiremos dentro de la etiqueta el contenido que deseamos atribuirle. Vemoslo:
<textarea name="comentario" rows="10" cols="40">Escribe tu comentario....</textarea>
Otros elementos
Efectivamente, los textos son un manera muy practica de hacernos llegar la informacin del
navegante. No obstante, en muchos casos, los textos son difcilmente adaptables a programas
que puedan procesarlos debidamente o bien, puede que su contenido no se ajuste al tipo de
informacin que requerimos.
Es por ello que, en determinados casos, puede resultar ms efectivo proponer una eleccin al
navegante a partir del planteamiento de una serie de opciones.
Este es el caso de, por ejemplo, ofrecer una lista de pases, el tipo de tarjeta de crdito para un
pago,...
Este tipo de opciones pueden ser expresadas de diferentes formas. Veamos a continuacin
cuales son:
Listas de opciones
Las listas de opciones son ese tipo de mens desplegables que nos permiten elegir una (o
varias) de las mltiples opciones que nos proponen. Para construirlas emplearemos una
etiqueta con su respectivo cierre: <select>
Como para los casos ya vistos, dentro de esta etiqueta definiremos su nombre por medio del
atributo name. Cada opcin ser incluida en una lnea precedida de la etiqueta <option>.
57
Podemos ver, a partir de estas directivas, la forma ms tpica y sencilla de esta etiqueta:
<select name="estacion">
<option>Primavera</option>
<option>Verano</option>
<option>Otoo</option>
<option>Invierno</option>
</select>
El resultado es:
Primavera
Esta estructura puede verse modificada principalmente a partir de otros dos atributos:
size
Indica el nmero de valores mostrados de la lista. El resto pueden ser vistos por medio de la
barra
lateral
de
desplazamiento.
multiple
Permite la seleccin de ms varios elementos de la lista. La eleccin de ms de un elemento se
hace como con el explorador de Windows, a partir de las teclas ctrl o shift. Este atributo se
expresa sin valor alguno, es decir, no se utiliza con el igual: simplemente se pone para
conseguir el efecto, o no se pone si queremos una lista desplegable comn.
Consejo: Si es posible, no uses multiple
No recomendamos especialmente la puesta en practica de esta opcin ya que el
manejo de las teclas ctrl o shift para elegir varias opciones puede ser desconocido
para el navegante. Evidentemente, siempre cabe la posibilidad de explicarle como
funciona aunque no dejara de ser una complicacin para ms para el visitante.
Veamos cual es el efecto producido por estos dos atributos cambiando la lnea:
<select name="estacion">
por:
<select name="estacion" size="3" multiple>
La etiqueta <option> puede asimismo ser matizada por medio de otros atributos
selected
58
Del mismo modo que multiple, este atributo no toma ningn valor sino que simplemente indica
que la opcin que lo presenta esta elegida por defecto.
As, si cambiamos la lnea del cdigo anterior:
<option>Otoo</option>
por:
<option selected>Otoo</option>
El resultado ser:
Otoo
value
Define el valor de la opcin que ser enviado al programa o correo electrnico si el usuario elige
esa opcin. Este atributo puede resultar muy til si el formulario es enviado a un programa
puesto que a cada opcin se le puede asociar un nmero o letra, lo cual es ms fcilmente
manipulable que una palabra o texto. podramos as escribir lneas del tipo:
<option value="1">Primavera</option>
De este modo, si el usuario elige primavera, lo que le llegara al programa (o correo) es una
variable llamada estacion que tendr com valor 1. En el correo electrnico recibiramos:
estacion=1
Botones de radio
Existe otra alternativa para plantear una eleccin, en este caso, obligamos al internauta a elegir
nicamente una de las opciones que se le proponen.
La etiqueta empleada en este caso es <input> en la cual tendremos el atributo type ha de
tomar el valor radio. Veamos un ejemplo:
59
Nota: Hay que fijarse que la etiqueta <input type="radio"> slo coloca la casilla
pinchable en la pgina. Los textos que aparecen al lado, as como los saltos de lnea
los colocamos con el correspondiente texto en el cdigo de la pgina y las etiquetas
HTML que necesitemos.
El resultado es el siguiente:
Primavera
Verano
Otoo
Invierno
Como puede verse, a cada una de las opciones se le atribuye una etiqueta input dentro de la
cual asignamos el mismo nombre (name) para todas las opciones y un valor (value) distinto. Si
el usuario elige supuestamente Otoo, recibiremos en nuestro correo una lnea tal que esta:
estacion=3
Cabe sealar que es posible preseleccionar por defecto una de las opciones. Esto puede ser
conseguido por medio del atributo checked:
Veamos el efecto:
Primavera
Verano
Otoo
Invierno
60
Cajas de validacin
Este tipo de elementos pueden ser activados o desactivados por el visitante por un simple clic
sobre la caja en cuestin. La sintaxis utilizada es muy similar a las vistas anteriormente:
El efecto:
Me gusta el bsquet
La
nica
diferencia
fundamental
es
el
valor
adoptado
por
el
atributo
type.
Del mismo modo que para los botones de radio, podemos activar la caja por medio del atributo
checked.
El tipo de informacin que llegara a nuestro correo (o al programa) ser del tipo:
deportes = on (u off dependiendo si ha sido activada o no)
Otra informacin a enviar
Los formularios han de permitirnos su envo mediante un botn. Tambin puede resultar
prctico poder proponer un botn de borrado o bien acompaarlo de datos ocultos que puedan
ayudarnos en su procesamiento.
En este capitulo, para terminar la saga de formularios, daremos a conocer los medios de
instalar todas estas funciones.
botn de envo
Para dar por finalizado el proceso de relleno del formulario y hacerlo llegar a su gestor, el
navegante ha de validarlo por medio de un botn previsto a tal efecto. La construccin de dicho
botn no reviste ninguna dificultad una vez familiarizados con las etiquetas input ya vistas:
<input type="submit" value="Enviar">
Con este cdigo generamos un botn como este:
Enviar
Como puede verse, tan solo hemos de especificar que se trata de un botn de envo
(type="submit") y hemos de definir el mensaje del botn por medio del atributo value.
botn de borrado
Este botn nos permitir borrar el formulario por completo en el caso de que el usuario desee
rehacerlo desde el principio. Su estructura sintctica es anloga a la anterior:
<input type="reset" value="Borrar">
61
Poblacin
Sexo
Hombre
Mujer
Autor: Ing. Oscar R. Espeche
62
Frecuencia
de
los
viajes
Comentarios
sobre
su
satisfaccin
personal
Borrar todo
63
<br>
<br>
<input type="submit" value="Enviar formulario">
<br>
<br>
<input type="Reset" value="Borrar todo">
</form>
Para acabar, vamos a ver lo que recibiran por correo electrnico en la empresa de autobuses
cuando un usuario cualquiera rellenase este formulario y pulsase sobre el botn de envio.
nombre=Juan Peres
email=jperes@pepe.com
poblacion=Catamarca, Beln
sexo=Varon
utilizacion=2
comentarios=No creo que sea una buena linea. Poner ms autobuses.
recibir_info=on
64
Y seguimos mostrando ventajas, ya que si con el HTML tan slo podamos definir atributos en
las pginas con pxeles y porcentajes, ahora podemos definir utilizando muchas ms unidades
como:
Autor: Ing. Oscar R. Espeche
65
66
67
Subrayada
Centrada
Tambin, por ejemplo, hemos definido que el cuerpo entero de la pgina (etiqueta <BODY>) se
le apliquen los estilos siguientes:
Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos sern heredados por el
resto de las etiquetas del documento. Esto es as siempre y cuando no se vuelvan a definir esos
estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta ms concreta ser el
que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya
fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>,
que es ms concreta.
Por ltimo, ha de apreciarse los comentarios HTML que engloban toda la declaracin de estilos:
<!--Declaracin de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos,
que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la pgina. Si no se
pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribiran ese cdigo en la pgina.
Estilo definido para todo un sitio web
Una de las caractersticas ms potentes de la programacin con hojas de estilos consiste en
que, de una vez, podemos definir los estilos de todo un sitio web.
Esto se consigue creando un archivo donde tan slo colocamos las declaraciones de estilos de la
pgina y enlazando todas las pginas del sitio con ese archivo.
De este modo, todas las pginas comparten una misma declaracin de estilos y, por tanto, si la
cambiamos, cambiarn todas las pginas.
Con las ventajas aadidas de que se ahorra en lneas de cdigo HTML (lo que reduce el peso del
documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se
coment anteriormente.
Veamos ahora cmo el proceso para incluir estilos con un archivo externo.
1- Creamos el archivo con la declaracin de estilos
Es un archivo de texto normal, que puede tener cualquier extensin, aunque le podemos
asignar la extensin .css para aclararnos qu tipo de archivo es. El texto que debemos incluir
debe ser escrito exclusivamente en sintaxis CSS, es decir, sera errneo incluir cdigo HTML en
el.
Podemos ver un ejemplo a continuacin.
P {
font-size : 12pt;
font-family : arial,helvetica;
font-weight : normal;
}
H1 {
font-size : 36pt;
font-family : verdana,arial;
Autor: Ing. Oscar R. Espeche
68
text-decoration : underline;
text-align : center;
background-color : Teal;
}
TD {
font-size : 10pt;
font-family : verdana,arial;
text-align : center;
background-color : 666666;
}
BODY {
background-color : #006600;
font-family : arial;
color : White;
}
69
afectarn a etiquetas que estn dentro de esta etiqueta, o lo que es lo mismo, dentro de todo
el cuerpo.
En muchas ocasiones ms de una declaracin de estilos afecta a la misma porcin de la pgina.
Siempre se tiene en cuenta la declaracin ms particular.
Se puede ver a continuacin esta jerarqua, primero ponemos las formas de declaracin ms
generales, y por tanto menos respetadas en caso de conflicto:
Ya vimos cmo incluir estilos en la pgina, de todas las maneras posibles e hicimos un repaso
con la lista anterior. Ahora ests en condiciones de empezar a usar las hojas de estilo en
cascada para mejorar tus pginas y aumentar la productividad de tu trabajo.
Otra forma de definir estilos en un archivo externo
Veamos ahora otra manera de importar una declaracin externa de estilos CSS:
@import url("archivo_a_importar.css"), que se utiliza para importar unas declaraciones de
estilos guardadas en la ruta que se indica entre parntesis.
(las comillas son opcionales, pero los parntesis son obligatorios, por lo menos, en Explorer).
Se debe incluir en la declaracin de estilos global a una pgina, es decir entre las etiquetas
<style type="text/css"> y </style>, que se colocan en la cabecera del documento.
Es importante sealar que la sentencia de importacin del archivo CSS se debe escribir en la
primera lnea de la declaracin de estilos, algo parecido al cdigo siguiente.
<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>
El funcionamiento es el mismo que si escribisemos todo el archivo a importar dentro de las
etiquetas de los estilos, con la salvedad de que, si redefinimos dentro del cdigo HTML (entre
las etiquetas </style>) estilos que haban quedado definidos en el archivo externo, los que se
aplicarn sern los que hayamos redefinido.
As, en el ejemplo anterior, aunque hubisemos definido en estilo.css un color de fondo para la
pgina, el color que prevalecera sera el definido a continuacin de la importacin: #ffffcc
La diferencia entre este tipo de importacin del tipo y la que hemos visto anteriormente:
<link rel="stylesheet" type="text/css" href="hoja.css">
70
Es que @import url ("estilo.css") se suele utilizar cuando hay unas pautas bsicas en el trabajo
con los estilos (que se definen en un archivo a importar) y unos estilos especficos para cada
pgina, que se definen a continuacin, dentro del cdigo HTML entre las etiquetas </style>,
como es el caso del ejemplo visto anteriormente.
Sintaxis CSS
Tal como se vio en los ejemplos la sintaxis es bastante sencilla y repetitiva. Vamos a verla:
Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos
puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos
atributos separados por punto y coma.
Ejemplo:
font-size: 10pt; text-decoration: underline; color: black; (el ltimo punto y coma de la
lista de atributos es opcional)
Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos
encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}
Muchos de estos valores son unidades de medida, por ejemplo, el valor del tamao de un
margen o el tamao de la fuente. Las unidades de medida son las siguientes:
Puntos
pt
Pulgadas
in
Centmetros
cm
pixels
px
Posibles valores
Ejemplos
FUENTES - FONT
color
color: #009900;
color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos
los nombres de colores son admitidos en el estndar, es aconsejable entonces utilizar el
valor RGB.
font-size
font-size:12pt;
font-size: x-large;
Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.
font-family
font-family:arial,helvetica;
font-size: fantasy;
71
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas
con total libertad.
Normal y 400 son el mismo valor, as como bold y 700.
font-style
font-style:normal;
font-style: italic;
Es el estilo de la fuente, que puede ser normal, itlica u oblicua. El estilo oblique es similar
al italic.
PRRAFOS - TEXT
line-height
line-height: 12px;
line-height: normal;
El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas caractersticas
que no se podan modificar utilizando HTML.
textdecoration
text-decoration: none;
text-decoration: underline;
text-align: right;
text-align: center;
Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de estilo
permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos
los sistemas.
text-indent
Unidades CSS
text-indent: 10px;
text-indent: 2in;
Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedosa.
texttransform
text-transform: none;
text-transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de
todas las palabras, todo en maysculas o minsculas.
FONDO - BACKGROUND
Backgroundcolor
background-color: green;
background-color: #000055;
background-image:
url(mrmol.gif) ;
background-image:
url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina.
BOX - CAJA
Margin-left
Unidades CSS
margin-left: 1cm;
margin-left: 0,5in;
Unidades CSS
margin-right: 5%;
72
Unidades CSS
margin-top: 0px;
margin-top: 10px;
Unidades CSS
margin-bottom: 0pt;
margin-top: 1px;
Unidades CSS
padding-left: 0.5in;
padding-left: 1px;
padding-right: 0.5cm;
padding-right: 1pt;
Indica el espacio insertado, en este caso por la derecha, entre el borde del elementocontinente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.
El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.
Padding-top
Unidades CSS
padding-top: 10pt;
padding-top: 5px;
Unidades CSS
padding-right: 0.5cm;
padding-right: 1pt;
Indica el espacio insertado, en este caso por abajo, entre el borde del elemento-continente
y el contenido de este.
Border-color
border-color: red;
border-color: #ffccff;
Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se puede
poner colores por separado con los atributos border-top-color, border-right-color, borderbottom-color, border-left-color.
Border-style
border-style: solid;
border-style: double;
El estilo del borde, los valores significan: none=ningun borde, dotted=punteado (no parece
funcionar), solid=solido, double=doble borde, y desde groove hasta outset son bordes con
varios efectos 3D.
border-width Unidades CSS
border-width: 10px;
border-width: 0.5in;
float: right;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe
alrededor de dicho elemento. Igual que el atributo align en imgenes en sus valores right y
left.
clear
clear: right;
La especificacin de estilos CSS es muy amplia, pero creo que la inmensa mayora estn, y por
supuesto la seleccin de los ms importantes.
Autor: Ing. Oscar R. Espeche
73
74
Enlaces visitados
A:visited {atributos}
Enlaces activos (Los enlaces estn activos en el preciso momento en que se pincha sobre
ellos)
A:active {atributos}
Enlaces hover (Cuando el ratn est encima de ellos, solo funciona en iexplorer)
A:hover {atributos}
El atributo para definir enlaces sin subrayado es text-decoration:none, y para darles color es
color:tu_color.
Tambin podemos definir el estilo de cada enlace en la propia etiqueta <A>, con el atributo
style. De esta manera podemos hacer que determinados enlaces de la pgina se vean de
manera distinta
Ejemplo de estilos en enlaces
<html>
<head>
<title>Ejemplos de estilo en enlaces</title>
<STYLE type="text/css">
A:link {text-decoration:none;color:#0000cc;}
A:visited {text-decoration:none;color:#ffcc33;}
A:active {text-decoration:none;color:#ff0000;}
A:hover {text-decoration:underline;color:#999999;font-weight:bold}
</STYLE>
</head>
<body>
<a href="http://dominioinexistente.nofunciona.com">Enlace normal</a>
<br>
<br>
<a href="enlaces.html">Enlace visitado</a>
Pulsar este enlace para verlo activo,
poner el ratón por encima para que cambie.
</body>
</html>
URL como valor de un atributo
Determinados atributos de estilos, como background-image necesitan una URL como valor,
para indicarlas podemos definir tanto caminos relativos como absolutos. As pues, podemos
indicar la URL de la imagen de fondo de estas dos maneras:
75
Pensar en un navegador que no reconozca la etiqueta <STYLE>, este supondr que es algo que
no entiende y se olvidar de la etiqueta. Lo siguiente que encuentra es texto normal y har que
este se vea en la pgina, como con cualquier otro texto.
Para evitarlo debemos ocultar con comentarios HTML (<!-- esto es un comentario -->) todo lo
que hay dentro de la etiqueta <STYLE>.
Aplicacin de estilo avanzada a los enlaces
Vamos a ver cmo podramos crear una barra de navegacin bastante dinmica utilizando
nicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de
navegacin que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratn
por encima. El color verde aparece cuando se pone el puntero del ratn encima.
El cdigo es el siguiente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ejemplo CSS para enlaces</title>
<style type="text/css">
A:link {color:#0000cc;}
A:visited {color:#0000cc;}
A:active {color:#0000cc;}
A:hover {color:#0000ff;}
A.clase1:visited {color:#ffff00;}
A.clase1:active {color:#ffff00;}
A.clase1:link {color:#ffff00}
A.clase1:hover {color:#00ff00}
A.clase2:visited {font-size:12;color:#ffffff;}
A.clase2:active {font-size:12;color:#ffffff;}
A.clase2:link {font-size:12;color:#ffffff;}
A.clase2:hover {font-size:12;color:#ffff33;}
body {font-family:arial;font-size:11;font-weight:bold}
td {font-family:arial;font-size:11;font-weight:bold}
</style>
</head>
<body>
<a href="#">Este enlace es normal</a>
<br>
<br>
Autor: Ing. Oscar R. Espeche
76
<br>
<span style="font-weight:normal;font-size:10">
Los enlaces de esta barra son especiales,
<br>
están definidos por clases
</span>
<br>
<table width="110" cellspacing="1" cellpadding="2" border="0">
<tr>
<td bgcolor="#aa0000"><a href="#" class="clase2">Opciones 1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Enlace clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Otro de clase1</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Más enlaces</a></td>
</tr>
<tr>
<td bgcolor="red"><a href="#" class="clase1">Todavía más</a></td>
</tr>
</table>
</body>
</html>
Cmo poner estilo a los enlaces
Ya lo vimos, pero lo repetimos aqu. Se define el estilo de los enlaces asignando su apariencia
en sus distintos estados:
Enlace
Enlace
Enlace
Enlace
77
Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la
cabecera de la pgina, con los estilos. Esto lo podemos conseguir de esta manera.
<a href="#" style="color:#ff0000">Mi enlace</a>
Hemos definido el color de un enlace de una manera especfica, utilizando el atributo style, de
modo que este enlace siempre tendr el color indicado, independientemente de su estado.
Es un enlace amarillo, que quedara muy bien resaltado sobre un fondo oscuro, como se puede
ver en el ejemplo de barra de navegacin siguiente.
Enlace 1
Otro enlace
Enlace 3
En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por
defecto.
Cmo utilizar las clases al aplicar estilo a los enlaces
Tambin vimos que el uso de clases puede ser muy til a la hora de definir estilos especiales
que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces
tambin podemos aplicar las clases para definir distintos tipos de enlaces, que tienen distintos
tipos de estilos.
A.clase1:visited {color:#ff0000;}
A.clase1:active {color:#ff0000;}
A.clase1:link {color:#ff0000}
A.clase1:hover {color:#00ff00}
La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un
formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratn sobre
l.
Por si no qued claro, al especificar el estilo con el atributo style del enlace slo podamos decir
que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no,
activo, o estemos o no con el ratn encima). Con las clases definimos un nuevo tipo de enlace
al que podemos dar distintos formatos dependiendo su estado.
Otras ventajas de utilizar las clases consisten en que escribimos una nica vez los estilos y que
podemos cambiar el color de todos los enlaces de la clase con cambiar la declaracin.
Las capas
Veamos un repaso como una pequea introduccin a lo que son las capas:
La etiqueta HTML <DIV> utilizada para construirla y los atributos CSS con los que
podemos aplicar estilos. Como ya hemos visto, <SPAN> sirve para aplicarle estilo a una
pequea parte de una pgina HTML. Por ejemplo, con ella podramos hacer que una
parte de un prrafo se coloree en rojo. Con <SPAN> no es habitual englobar un trozo
muy grande de texto, por ejemplo el que comprenda a varios prrafos.
Con <DIV> tambin podemos aplicar estilo a partes de la pgina HTML.
La diferencia entre <SPAN> y <DIV> es que con esta ltima si que podemos aplicar
estilo a una parte ms amplia de la pgina, por ejemplo a tres prrafos. Adems que la
etiqueta <DIV> tiene un uso adicional que es el de crear divisiones en la pgina a las
78
que podremos aplicar una cantidad adicional de atributos HTML para modificar sus
comportamientos. Por ejemplo, con el atributo align de HTML podemos alinear la divisin
al centro, izquierda, derecha o justificado. Pero su uso ms destacado es el de convertir
esa divisin en una capa.
Una capa es una divisin, una parte de la pgina, que tiene un comportamiento muy
independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier
parte de la misma y la podremos mover por ella independientemente, por indicar dos
cualidades. En el uso de capas se basan muchos de los efectos ms comunes del DHTML.
Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son
compatibles ms que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para
hacer capas preferentemente a las otras dos.
Los atributos que podemos aplicar a estas etiquetas, pero en concreto a las dos recomendadas
<SPAN> y <DIV>, son principalmente de estilos CSS. Estos atributos nos permiten, como
hemos podido ver, modificar de una manera muy exhaustiva la presentacin de los contenidos
en la pgina. Para aplicar estilos a estas etiquetas se utiliza el atributo de HTML style, de esta
manera:
<SPAN style="text-decoration:underline;font-weight:bold">...</SPAN>
<DIV style="color:red;font-size:10px">...</DIV>
A esto ya lo pudimos ver en ejemplos anteriores, nos referimos a ellos para ampliar esta
informacin. Pero no habamos visto todava una serie de atributos que nos sirven para
posicionar la divisin en la pgina como una capa. Estos atributos se pueden aplicar a la
etiqueta <DIV> que es la que serva para crear capas compatibles con todos los navegadores.
Los atributos para que la divisin sea una capa son varios y se pueden ver a continuacin.
<div id="c1" style="position:absolute; left: 200px; top: 100px;">
Hola!
</div>
El primero, position, indica que se posicione de manera absoluta en la pgina y los siguientes,
left y top, son la distancia desde el borde izquierdo de la pgina y el borde superior.
Hay otros atributos especiales para capas como width y height para indicar la anchura y
altura de la capa, Z-index que sirve para indicar qu capas se ven encima de qu otras, clip
que sirve para recortar una capa y hacer que partes de ella no sean visibles, o visibility para
definir si la capa es visible o no.
Atributos para capas
Hemos visto en el captulo anterior qu son las capas y algunas pequeas muestras sobre cmo
crearlas y darle algn estilo. Ahora vamos a ver en detenimiento los atributos especficos para
aplicar posicionamiento a una capa y otros estilos.
Antes que nada cabe decir que una capa puede tener cualquier atributo de estilos de los que
hemos visto. As, el atributo color indica el color del texto de la capa, el atributo font-size indica
el tamao del texto y as con todos los atributos ya vistos.
Ahora bien, existen una serie de atributos que sirven para indicar la forma, el tamao de las
capas, la visibilidad, etc, que veremos a continuacin.
Atributo position
Indica el tipo de posicionamiento de la capa. Puede tener dos valores, relative o absolute.
Autor: Ing. Oscar R. Espeche
79
- relative indica que la posicin de la capa es relativa a el lugar donde se estaba escribiendo en
la pgina en el momento de escribir la capa con su etiqueta
- absolute indica que la posicin de la capa se calcula con respecto al punto superior izquierdo
de la pgina.
Atributo top
Indica la distancia en vertical donde se colocar la capa. Si el atributo position es absolute, top
indica la distancia del borde superior de la capa con respecto al borde superior de la pgina. Si
el atributo position era relative, top indica la distancia desde donde se estaba escribiendo en
ese momento en la pgina hasta el borde superior de la capa.
Atributo left
Bsicamente funciona igual que el atributo top, con la diferencia que el atributo left indica la
distancia en horizontal a la que estar situada la capa.
Atributo height
Sirve para indicar el tamao de la capa en vertical, es decir, su altura.
Atributo width
Indica la anchura de la capa
Atributo visibility
Sirve para indicar si la capa se puede ver en la pgina o permanece oculta al usuario. Este
atributo puede tener tres valores.
Atributo z-index
Sirve para indicar la posicin sobre el eje z que tendrn las distintas capas de la pgina. Dicho
de otra forma, con z-index podemos decir qu capas se vern encima o debajo de otras, en
caso de que estn superpuestas. El atributo z-index toma valores numricos y a mayor z-index,
ms arriba se ver la pgina.
Atributo clip
Es un atributo un poco difcil de explicar. En concreto sirve para recortar determinadas
reas de la capa y que no se puedan ver. Una capa que est visible se puede recortar
para que se vea, pero que no se vea algn trozo de esta. El cliping se indica por medio
de 4 valores, con esta sintaxis.
rect (<top>, <right>, <bottom>, <left>)
80
Los valores <top>, <right>, <bottom> y <left> indican distancias que se pueden apreciar en
este esquema.
81
82
Detenidamente
Decamos que habra que colocar una capa relativa cercana al lugar donde tiene que aparecer la
capa con position absolute. Insisto en que las capas relativas se colocan en el lugar donde las
metemos dentro del cdigo HTML, por lo que ser fcil colocar la capa relativa en el lugar
exacto y que este lugar sea vlido para cualquier definicin.
La segunda capa, la que tiene el contenido final, la pondremos inicialmente en una posicin
cualquiera y escondida, de manera que no se vea que est mal colocada. Una vez terminada de
cargar la pgina, podremos acceder a la posicin de la capa relativa, extrayendo sus valores top
y left y colocndolos en los correspondientes top y left de la capa con posicin absoluta. Una
vez marcada la posicin de la capa absoluta podemos volverla visible.
A la vista de la imagen siguiente, la capa con posicin relativa la hemos colocado en el enlace.
En realidad habra tres capas con posicin relativa para poder posicionar otras tantas capas con
posicin absoluta. La parte que vemos sombreada de verde corresponde al espacio que
abarcara la capa relativa.
Su posicin sera la que est marcada por el aspa roja que aparece en su esquina superior
izquierda. Dicha posicin depende del lugar donde aparezcan los enlaces en la pgina.
Luego, con Javascript deberamos asignar la posicin de la capa absoluta de una manera
parecida a esta.
left de la capa absoluta = left de la capa relativa
top de la capa absoluta = top de la capa relativa + altura de la capa relativa
Podemos sumarle algn pxel ms a la posicin de la capa, si es que queremos moverla un poco
abajo y a la derecha, tal como hemos visto en la imagen.
No pretendo en este artculo, muy a mi pesar y por falta de espacio y tiempo, explicar cmo se
hacen esas operaciones de Javascript. Advierto que si no se conoce nada de Javascript va a ser
imposible ponerse con una tarea tan tediosa como el manejo de capas. Si por el contrario, ya
hemos tenido contacto con Javascript y DHTML anteriormente, no debera ser un problema
realizar esas acciones.
Cmo evitar que una pgina se imprima
Para ello, hay que echar mano de las hojas de estilo. Tanto si el documento tiene una hoja ya
83
asociada como sino, lo que vamos a hacer es asociarle un nueva hoja de estilos. Dicha hoja
contendr un nico estilo, con el cdigo necesario para ocultar un elemento:
.nover{
visibility:hidden
}
A la hora de asociar la hoja de estilos, se le aade un modificador a la etiqueta HTML que
enlaza con el archivo .css que permite especificar para qu tipo de medio se aplicar esta hoja.
En nuestro caso, se aplica en el mbito de la impresin, por lo que se utiliza el atributo
media="print".
<link href="nombre_hoja" rel="stylesheet" type="text/css" media="print">
Una vez hecho esto, basta que toda nuestra pgina este dentro de un elemento div, que
pertenezca a la clase nover.
<body>
<div class="nover">
-- Contenido -</div>
</body>
Al hacer esto se provoca que en pantalla se visualice la pgina, pero que si por el contrario se
decide imprimir, se le aplicar la hoja de estilos de impresin, en la que el elemento esta
puesto como no visible, por lo que no se imprimir.
Codigo Completo:
Veamos el cdigo ntegro de la pgina web y la hoja de estilos asociada.
Pgina HTML
<html>
<head>
<link href="estilos.css" rel="stylesheet" type="text/css" media="print">
</head>
<body>
<div class="nover">
contenido de la pagina
</div>
</body>
</html>
Hoja estilos: estilos.css
.nover{
visibility:hidden
}
Autor: Ing. Oscar R. Espeche
84
85
86
Scripts en lnea de comandos. Se puede crear un script PHP y correrlo sin ningn
servidor web navegador. Solamente se necesita el intrprete PHP para usarlo de esta
manera. Este tipo de uso es ideal para scripts ejecutados regularmente desde cron (en
*nix Linux) el Planificador de tareas (en Windows). Estos scripts tambin pueden ser
usados para tareas simples de procesado de texto.
Escribir aplicaciones grficas clientes. PHP no es probablemente el mejor lenguaje
para escribir aplicaciones grficas, pero si se sabe bien PHP, y se necesita utilizar
algunas caractersticas avanzadas en programas clientes, se puede utilizar PHP-GTK
para escribir dichos programas. Es tambin posible escribir aplicaciones independientes
de una plataforma. PHP-GTK es una extensin de PHP, no disponible en la distribucin
principal.
PHP puede ser utilizado en cualquiera de los principales sistemas operativos del mercado,
incluyendo Linux, muchas variantes Unix (incluido HP-UX, Solaris y OpenBSD), Microsoft
Windows, Mac OS X, RISC OS y probablemente alguno ms. PHP soporta la mayora de
servidores web de hoy en da, incluyendo Apache, Microsoft Internet Information Server,
Personal Web Server, Netscape y iPlanet, Oreilly Website Pro server, Caudium, Xitami,
OmniHTTPd y muchos otros. PHP tiene mdulos disponibles para la mayora de los servidores,
para aquellos otros que soporten el estndar CGI, PHP puede usarse como procesador CGI.
As que, con PHP se tiene la libertad de escoger el sistema operativo y el servidor de su gusto.
Tambin se tiene la posibilidad de usar programacin de procedimientos programacin
orientada a objetos. Aunque no todas la caractersticas estndares de la programacin
orientada a objetos estn implementadas en la versin actual de PHP, muchas libreras y
aplicaciones grandes (incluyendo la librera PEAR) estn escritas ntegramente usando
programacin orientada a objetos.
Con PHP no se est limitado a resultados en HTML. Entre las habilidades de PHP se incluyen,
creacin de imgenes, archivos PDF y pelculas Flash (usando libswf y Ming) sobre la marcha.
Tambin se puede presentar otros resultados, como XHTM y archivos XML. PHP puede auto
generar estos archivos y grabarlos en el sistema de archivos en vez de presentarlos en la
pantalla.
Quizas la caracterstica ms potente y destacable de PHP es su soporte para una gran cantidad
de bases de datos. Escribir un interfaz via web para una base de datos es una tarea simple con
PHP. Las siguientes bases de datos estn soportadas actualmente:
Adabas D
Ingres
dBase
InterBase
Ovrimos
Empress
FrontBase
PostgreSQL
Solid
Hyperwave
IBM DB2
MySQL
Velocis
Informix
ODBC
Unix dbm
Tambin tenemos una extensin DBX de abstraccin de base de datos que permite usar de
forma transparente cualquier base de datos soportada por la extensin.
Adicionalmente, PHP soporta ODBC (The Open Database Connection standard), as que se
puede conectar a cualquier base de datos que soporte este estndar.
PHP tambin tiene soporte para comunicarse con otros servicios usando protocolos tales como
LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y muchos otros. Tambin se pueden
Autor: Ing. Oscar R. Espeche
87
crear raw sockets. PHP soporta WDDX para intercambio de datos entre lenguajes de
programacin en web. Y hablando de interconexin, PHP puede utilizar objetos Java de forma
transparente como objetos PHP Y la extensin de CORBA puede ser utilizada para acceder a
objetos remotos (objetos distribuidos).
PHP tiene unas caractersticas muy tiles para el proceso de texto, desde expresiones regulares
POSIX Extended Perl hasta intrprete de documentos XML. Para parsear (analizar) y acceder
documentos XML, soportamos los estndares SAX y DOM. Se puede utilizar la extensin XSLT
para transformar documentos XML.
Si se usa PHP en el campo del comercio electrnico, se encontrarn muy tiles las funciones
Cybercash, CyberMUT, VeriSign Payflow Pro y CCVS para los programas de pago.
Comenzar a trabajar con PHP
En este manual vamos a asumir que tienes un servidor que soporta PHP y que todos los
archivos con la extensin .php son manejados por PHP. En la mayora de servidores esta es la
extensin que archivos PHP toman por defecto, pero pregunta al administrador de tu servidor
para estar seguro.
Si tu servidor soporta PHP entonces no necesitas hacer nada, solamente crea tus archivos .php
y gurdalos en tu directorio web y el servidor como por magia los analizara por voz. No hay
necesidad de compilar nada, tampoco tienes necesidad de instalar otras herramientas. Mralo
de esta manera, estos archivos de PHP son tan simples como archivos de HTML con una nueva
familia de etiquetas (tags) que te dejan hacer una gran cantidad de cosas.
Digamos que tu tienes limitado acceso al Internet y estas programando localmente. En este
caso, tu quieres instalar un servidor de web como Apache con PHP . Lo mas seguro es que
tambin quieres instalar una base de datos como MySQL.
Tu primera pgina con PHP
Empieza por crear un archivo llamado hola.php
(DOCUMENT_ROOT) con el siguiente contenido:
ponlo
en
el
"directorio
raz"
ej2.php
<html>
<head>
<title> Ejemplo de PHP</title>
</head>
<body>
<?php echo "<p>Hola Mundo</p>"; ?>
</body>
</html>
Utiliza tu navegador de web para acceder tu archivo, con el URL terminando en "/hola.php". Si
estas programando localmente este URL lucir algo como http://localhost/hola.php o
http://127.0.0.1/hola.php pero esto depende en la configuracin de tu servidor de web.
Aunque esto es fuera del alcance de este manual, tambin puedes ver las directivas
DocumentRoot y ServerName en la configuracin de tu servidor (en Apache esto es httpd.conf).
Si todo esta configurado correctamente, el archivo ser analizado por PHP y es siguiente
contenido aparecer en tu navegador:
<html>
88
<head>
<title>Ejemplo de PHP</title>
</head>
<body>
<p>Hola Mundo</p>
</body>
</html>
Debes observar que esto no es como scripts de CGI . El archivo no necesita ninguna clase
especial de permisos para ser ejecutado. Piensa al respecto como si fueran archivos de HTML
con un set muy especial de tags disponibles, y que hacen muchas cosas interesantes.
Este programa es extremadamente simple, y no necesitas usar PHP para crear una pgina
como esta. Todo lo que hace es mostrar: Hola Mundo usando la declaracin echo().
Si has intentado usar este ejemplo, y no produjo ningn resultado, te pregunta si queras
descargar el archivo, o te muestra todo el archivo como texto, lo mas seguro es que tu servidor
no a activado PHP. Pdele a tu administrador que active esta funcin , o instlalo si est en tus
posibilidades.
El objetivo de este ejemplo es para demostrar como puedes usar las tags PHP. En este ejemplo
usamos <?php para indicar el inicio de la tag PHP Despus describimos la declaracin y
dejamos el modo PHP usando ?>. Tu puedes salir de PHP y regresar cuantas veces quieras
usando este mtodo.
Una Nota acerca de editores de texto: Hay muchos editores de texto y
Ambientes de Diseo integrado (IDE) que tu puedes usar para crear, editar, y
organizar archivos de PHP.
Una Nota acerca de editores de texto sofisticados: Programas como
"StarOffice", "Microsoft word" y "Abiword" no son buenas opciones para editar
archivos de PHP. Si tu deseas usar uno de estos programas para probar tus
scripts, primero debes asegurarte de que guardes el documento en como "Texto"
puro, o PHP no sera capaz de ejecutar el script.
Una nota acerca de "Windows Notepad": Si tu quieres escribir tus archivos
PHP usando "Windows Notepad" y en algunos otros editores de texto para
Windows necesitaras asegurarte que tus archivos son guardados con la extensin
.php (La mayora de los editores de texto en Windows automticamente trataran
de aadir la .txt extensin a los archivos a menos de que tomes los siguientes
pasos para prevenirlo.) Cuando guardes tus archivos y el programa te pregunte
que nombre le quieres dar a tu archivo utiliza comillas cuando escribes el nombre
(i. e. "hola.php"). Una alternativa es oprimir en la lista de opciones "Archivos de
Texto *.txt" seleccionar la opcin "Todos los archivos *.*". Aqu puedes escribir el
nombre del archivo sin las comillas.
Ahora que as creado un pequeo script de PHP que funciona correctamente, es hora de que
trabajemos con el script de PHP mas famoso; vamos a hacer una llamada a la funcin
phpinfo() para que obtener informacin acerca de tu sistema y configuracin como las
variables disponibles predefinidas , los mdulos utilizados por PHP, y las diferentes opciones de
configuracin. Tomemos unos segundos para revisar esta informacin.
Consideraciones tiles
Hagamos ahora algo que puede ser til. Vamos a chequear que clase de navegador de la web
utilizas. Para hacerlo, vamos a mirar la informacin que el navegador nos manda como parte de
su request a HTTP. Esta informacin es guardada en una variable. Las variables siempre
Autor: Ing. Oscar R. Espeche
89
comiensan con un signo de dolar ("$") en PHP. La variable que vamos a utilizar en esta
situacin es $_SERVER["HTTP_USER_AGENT"].
Notas acerca de PHP Autoglobals: $_SERVER es una variable reservada por
PHP que contiene toda la informacin del servidor de web. Es conocida como
Autoglobal (o Superglobal). Estas son variables especiales que son introducidas
en la versin 4.1.0 de PHP. Antes podamos usar los, $HTTP_*_VARS arrays,
tales como $HTTP_SERVER_VARS. Aunque estos han sido despreciados, estas
antiguas variables todava existen.
Para poder ver esta variable solo necesitas:
ej3.php
<?php echo $_SERVER["HTTP_USER_AGENT"]; ?>
Un ejemplo de resultado de este script puede ser:
Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)
Hay muchas clases de variables en PHP. En el ejemplo anterior imprimimos un Array. Los
Arrays pueden ser muy tiles,
$_SERVER es simplemente una variable que es automticamente disponible para ti en PHP.
Puedes obtener una lista completa creando un archivo con el contenido como se muestra a
continuacin:
ej4.php
<?php phpinfo(); ?>
Si abres este archivo con tu navegador, puedes ver una pgina con informacin acerca de PHP,
junto a una lista de todas las variables que puedes usar. Este es el archivo ms simple que
puedes crear para probar si tu servidor de Web esta trabajando con PHP.
Puedes usar mas de un declaracin PHP dentro de una tag PHP, y crear pequeos segmentos de
cdigo que pueden hacer mas que un "echo". Por ejemplo, si queremos detectar por "Internet
Explorer" haramos algo as:
ej5.php
<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) {
echo "Estas usando Internet Explorer<br />";
}
?>
Un ejemplo de los resultado del script puede ser:
Estas usando Internet Explorer<br />
Aqu introduciremos un par de conceptos nuevos. Tenemos una declaracin if. Si estas
familiarizado con los la sintaxis bsica del lenguaje "C", esto se vera lgico, Pero si tu no
entiendes "C" o otros lenguajes de programacin donde encuentras la sintaxis usada
anteriormente no te preocupes que luego abordaremos este tema en profundidad.
90
El segundo concepto que introducimos fue el concepto llamado strstr(). strstr() es una
funcin integrada en PHP que busca un cadena (string) dentro de otra cadena (string) mas
"MSIE"
dentro
de
larga.
En
el
caso
anterior
estamos
buscando
por
$_SERVER["HTTP_USER_AGENT"]. Si la cadena (string) fue encontrada, la funcin
devolver verdadero ("TRUE"),la declaracin "if se evala a verdadero ("TRUE") y el cdigo
adentro de las {braces} es ejecutado.
Podemos dar paso mas y demostrar como puedes saltar adentro y afuera del modo PHP en el
medio de un bloque de cdigo PHP
ej6.php
<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], "MSIE")) {
?>
<h3>strstr tiene que haber devuelto verdadero </h3>
<center><b>Estas usando Internet Explorer</b></center>
<?php
} else {
?>
<h3>strstr tiene que haber devuelto falso</h3>
<center><b>No estas usando Internet Explorer</b></center>
<?php
}
?>
Un ejemplo de los resultados de este script pueden ser:
<h3>strstr tiene que haber devuelto verdadero </h3>
<center><b>Estas usando Internet Explorer</b></center>
En vez de usar una declaracin PHP "echo" para mostrar algo, saltamos fuera del cdigo PHP y
escribimos HTML puro. Este es un punto muy importante y potente que debemos observar aqu,
este es que la fluidez lgica del script esta intacta. Solamente las partes donde hay HTML sern
mandadas a tu navegador dependiendo en los resultados que strstr() ah devuelto, si fue
(verdadero [TRUE], o falso [FALSE]). En otras palabras, si la cadena (string) MSIE fue
encontrada o no.
Usando Formularios HTML
Una de las caractersticas de PHP es que maneja formularios de HTML. Observemos un
ejemplo:
<form action="accion.php" method="POST">
Tu nombre: <input type="text" name="nombre" />
Tu edad: <input type="text" name="edad" />
<input type="submit">
</form>
No hay nada especial acerca de este formulario, es HTML limpio sin ninguna clase de tags
desconocidas. Cuando el cliente llena este formulario, y oprime el botn llamado "Submit", una
pgina titulada accion.php es llamada. En este archivo encontraras algo as (es un ejemplo
tomado al azar):
91
El mtodo preferido actualmente para obtener acceso a estos valores es por medio de los
"Autoglobal arrays" mencionados anteriormente.
Scripts que son antiguos en libros y tutoriales pueden asumir que esta directiva es
automticamente "On". En este caso conviene poner dicha variable en On para poder
utilizar las viejas variables globales.
92
93
La etiqueta de fin de bloque incluir tras ella la siguiente lnea si hay alguna presente. Adems,
la etiqueta de fin de bloque lleva implcito el punto y coma; no necesitas por lo tanto aadir el
punto y coma final de la ltima lnea del bloque PHP.
PHP permite estructurar bloques como:
ej9.php
<?php
$expresion = 1;
if ($expresion) {
?>
<strong>Esto es verdadero</strong>
<?php
} else {
?>
<strong>Esto es falso</strong>
<?php
}
?>
Este ejemplo realiza lo esperado, ya que cuando PHP encuentra las etiquetas ?> de fin de
bloque, empieza a escribir (enva al navegador) lo que encuentra tal cual hasta que encuentra
otra etiqueta de inicio de bloque. El ejemplo anterior es, por supuesto, inventado. Para escribir
bloques grandes de texto generalmente es ms eficiente separarlos del cdigo PHP que enviar
todo el texto mediante las funciones echo(), print() o similares.
Separacin de instrucciones
Las separacin de instrucciones se hace de la misma manera que en C o Perl - terminando cada
declaracin con un punto y coma.
La etiqueta de fin de bloque (?>) implica el fin de la declaracin, por lo tanto lo siguiente es
equivalente:
ej10.php
<?php
echo "Esta prueba funciona con ; ";
?>
<br><br>
<?php echo "Esta prueba funciona sin ; "?>
Comentarios
PHP soporta el estilo de comentarios de 'C', 'C++' y de la interfaz de comandos de Unix. Por
ejemplo:
<?php
echo "Esto es una prueba"; // Este es un comentario al estilo c++
/* Este es un comentario multilnea
esta es otra lnea */
echo "Esta es otra prueba";
echo "Una prueba final"; # Este es un comentario al estilo shell de Unix
94
?>
Los estilos de comentarios de una linea actualmente slo comentan hasta el final de la linea o el
bloque actual de cdigo PHP, lo primero que ocurra.
<h1>Este es un <?php # echo "simple";?> ejemploh1>
<p>la lnea anterior dice Este es un ejemplo.
Hay que tener cuidado con no anidar comentarios de estilo 'C', algo que puede ocurrir al
comentar bloques largos de cdigo.
<?php
/*
echo "Esto es una prueba"; /* Este comentario puede causar un problema */
*/
?>
Los estilos de comentarios de una linea actualmente slo comentan hasta el final de la linea o
del bloque actual de cdigo PHP, lo primero que ocurra. Esto implica que el cdigo HTML tras //
?> ser impreso: ?> sale del modo PHP, retornando al modo HTML, el comentario // no le
influye.
95
enteros
nmeros de punto flotante
cadenas
arrays
objetos
=
=
=
=
96
significado
\n
Nueva lnea
\r
Retorno de carro
\t
Tabulacin horizontal
\\
Barra invertida
\$
\"
Comillas dobles
\[0-7]{1,3}
\x[0-9A-Faf]{1,2}
Se puede proteger cualquier otro carcter, pero se producir una advertencia en el nivel de
depuracin ms alto.
Estos cambios de lnea y tabulaciones tienen nicamente efecto en el cdigo (que se ejecuta en
el servidor) y no en el texto ejecutado por el navegador.
En otras palabras, si queremos que nuestro texto ejecutado cambie de lnea hemos de
introducir un echo "<br>" y no echo "\n" ya que este ultimo slo cambia de lnea en el archivo
HTML creado y enviado al navegador cuando la pgina es ejecutada en el servidor.
La diferencia entre estos dos elementos puede ser fcilmente comprendida mirando el cdigo
fuente producido al ejecutar este script:
<HTML>
<HEAD>
<TITLE>cambiolinea.php</TITLE>
</HEAD>
<BODY>
<?
echo "Hola, \n sigo en la misma lnea ejecutada (salida del navegador) pero no en
cdigo fuente del navegador.<br>Cambi de lnea ejecutada pero continuo en la
misma en el cdigo fuente del navegador."
?>
</BODY>
</HTML>
Echamos un vistazo al codigo fuente del navegador para comparar.
El cdigo fuente que observaramos en el navegador, seria el siguiente:
<HTML>
<HEAD>
<TITLE>cambiolinea.php</TITLE>
</HEAD>
97
<BODY>
Hola,
sigo en la misma lnea ejecutada (salida del navegador) pero no en cdigo fuente del
navegador.<br>Cambi de lnea ejecutada pero continuo en la misma en el cdigo fuente del
navegador.</BODY>
</HTML>
Las cadenas pueden asimismo ser tratadas por medio de funciones de todo tipo. Veremos estas
funciones ms adelante con ms detalle. Tan slo debemos retener que existen muchas
posibles acciones que podemos realizar sobre ellas: Dividirlas en palabras, eliminar espacios
sobrantes, localizar secuencias, remplazar caracteres especiales por su correspondiente en
HTML o incluso extraer las etiquetas META de una pgina web.
La segunda forma de delimitar una cadena de caracteres usa el carcter de comilla simple (" '
"). Cuando una cadena va encerrada entre comillas simples, los nicos caracteres de escape
que sern comprendidos son \\ (imprime: \ ) y \' (imprime: ' ). Esto es por convenio, as que
se pueden tener comillas simples y barras invertidas en una cadena entre comillas simples. Las
variables no se expandirn dentro de una cadena entre comillas simples.
Otra forma de delimitar cadenas es usando la sintaxis de documento incrustado ("<<<"). Se
debe proporcionar un identificador despus de <<<, despus la cadena, y despus el mismo
identificador para cerrar el entrecomillado.
ej12.php
<?php
$str = <<<EOD
Ejemplo de cadena
Expandiendo mltiples lneas
usando sintaxis de documento incrustado.
EOD;
Echo $str;
?>
Nota: La sintaxis de documento incristado fue aadida en PHP 4.
Las cadenas se pueden concatenar usando el operador '.' (punto). Ntese que el operador '+'
(suma) no sirve para esto.
Se puede acceder a los caracteres dentro de una cadena tratndola como un array de
caracteres indexado numricamente, usando una sintaxis similar a la de C. Veamos ejemplos
de lo que enunciamos.
ej13.php
<?php
/* Asignando una cadena. */
$str = "Esto es una cadena";
echo $str;
echo"<br>";
/* Aadiendo a la cadena. */
$str = $str . " con algo ms de texto";
echo $str;
echo"<br>";
/* Otra forma de aadir, incluye un carcter de nueva lnea protegido. */
$str .= " Y un carcter de nueva lnea al final.\n";
echo $str;
echo"<br>";
98
<html>
<head>
<title>Ejemplo de cadenas con PHP</title>
</head>
<body>
<?php
echo strlen("12345"),"<br>";
$palabras=split(" ","Esto es una prueba");
for($i=0;$palabras[$i];$i++)
99
echo $palabras[$i]."<br>";
$resultado=sprintf("8x5 = %d <br>",8*5);
echo $resultado."<br>";
echo substr("Devuelve una subcadena de otra",9,3),"<br><br>";
if (chop("Cadena \n\n ") == "Cadena")
echo "Iguales<br><br>";
echo strpos("Busca la palabra dentro de la frase", "palabra"),"<br><br>";
echo str_replace("verde","rojo","Un pez de color verde, como verde es la
hierba."),"<br>";
?>
</body>
</html>
Conversin de cadenas
Cuando una cadena se evala como un valor numrico, el valor resultante y el tipo se
determinan como sigue.
La cadena se evaluar como un doble si contiene cualquiera de los caracteres '.', 'e', o
'E'. En caso contrario, se evaluar como un entero.
El valor viene dado por la porcin inicial de la cadena. Si la cadena comienza con datos
de valor numrico, este ser el valor usado. En caso contrario, el valor ser 0 (cero). Los
datos numricos vlidos son un signo opcional, seguido por uno o ms dgitos (que
opcionalmente contengan un punto decimal), seguidos por un exponente opcional. El
exponente es una 'e' o una 'E' seguidos por uno o ms dgitos.
ej15.php
<?
$algo = 1 + "10.5";
// $algo es doble (11.5)
echo '1) $algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
$algo = 1 + "-1.3e3";
// $algo es doble (-1299)
echo '2)$algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
$algo = 1 + "juan-1.3e3";
// $algo es entero (1)
echo '3)$algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
$algo = 1 + "juan3";
// $algo es entero (1)
echo '4)$algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
$algo = 1 + "10 Cerditos";
// $algo es entero (11)
echo '5)$algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
$algo = "10.0 cerdos " + 1;
// $algo es entero (11)
echo '6)$algo='.$algo. ", el tipo es " . gettype( $algo ) . "<br>";
100
101
stripslashes(),
htmlspecialchars(),
102
103
104
105
106
107
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
ENTITY
108
ENTITY Oacute ----> "Ó" : letra mayscula latina O con acento agudo,
U+00D3 ISOlat1 <br>
ENTITY Ocirc ----> "Ô" : letra mayscula latina O con acento circunflejo,
U+00D4 ISOlat1 <br>
ENTITY Otilde ----> "Õ" : letra mayscula latina O con tilde,
U+00D5 ISOlat1 <br>
ENTITY Ouml ----> "Ö" : letra mayscula latina O con diresis,
U+00D6 ISOlat1 <br>
ENTITY times ----> "×" : signo de multiplicacin, U+00D7 ISOnum <br>
ENTITY Oslash ----> "Ø" : letra mayscula latina O tachada,
letra mayscula latina O con barra inclinada,
U+00D8 ISOlat1 <br>
ENTITY Ugrave ----> "Ù" : letra mayscula latina U con acento grave,
U+00D9 ISOlat1 <br>
ENTITY Uacute ----> "Ú" : letra mayscula latina U con acento agundo,
U+00DA ISOlat1 <br>
ENTITY Ucirc ----> "Û" : letra mayscula latina U con acento circunflejo,
U+00DB ISOlat1 <br>
ENTITY Uuml ----> "Ü" : letra mayscula latina U con diresis,
U+00DC ISOlat1 <br>
ENTITY Yacute ----> "Ý" : letra mayscula latina Y con acento agudo,
U+00DD ISOlat1 <br>
ENTITY THORN ----> "Þ" : letra mayscula latina THORN,
U+00DE ISOlat1 <br>
ENTITY szlig ----> "ß" : letra minscula latina s muda = ess-zed,
U+00DF ISOlat1 <br>
ENTITY agrave ----> "à" : letra minscula latina a con acento grave,
U+00E0 ISOlat1 <br>
ENTITY aacute ----> "á" : letra minscula latina a con acento agudo,
U+00E1 ISOlat1 <br>
ENTITY acirc ----> "â" : letra minscula latina a con acento circunflejo,
U+00E2 ISOlat1 <br>
ENTITY atilde ----> "ã" : letra minscula latina a con tilde,
U+00E3 ISOlat1 <br>
ENTITY auml ----> "ä" : letra minscula latina a con diresis,
U+00E4 ISOlat1 <br>
ENTITY aring ----> "å" : letra minscula latina a con anillo,
U+00E5 ISOlat1 <br>
ENTITY aelig ----> "æ" : letra minscula latina ae,
= ligadura minscula latina ae, U+00E6 ISOlat1 <br>
ENTITY ccedil ----> "ç" : letra minscula latina c con cedilla,
U+00E7 ISOlat1 <br>
ENTITY egrave ----> "è" : letra minscula latina e con acento grave,
U+00E8 ISOlat1 <br>
ENTITY eacute ----> "é" : letra minscula latina e con acento agudo,
U+00E9 ISOlat1 <br>
ENTITY ecirc ----> "ê" : letra minscula latina e con acento circunflejo,
U+00EA ISOlat1 <br>
ENTITY euml ----> "ë" : letra minscula latina e con diresis,
U+00EB ISOlat1 <br>
ENTITY igrave ----> "ì" : letra minscula latina i con acento grave,
U+00EC ISOlat1 <br>
ENTITY iacute ----> "í" : letra minscula latina i con acento agudo,
U+00ED ISOlat1 <br>
ENTITY icirc ----> "î" : letra minscula latina i con acento circunflejo,
U+00EE ISOlat1 <br>
ENTITY iuml ----> "ï" : letra minscula latina i con diresis,
Autor: Ing. Oscar R. Espeche
109
110
Ntese que esta funcin no traduce nada ms que lo mostrado ms arriba. Para una
traduccin de entidades completa, vea htmlentities().
Vea tambin htmlentities() y nl2br().
implode (PHP 3, PHP 4 )
Unir elementos de una matriz mediante una cadena
string implode (string cola, array piezas)
Devuelve una cadena que contiene una representacin de todos los elementos de la
matriz en el mismo orden, pero con la cadena cola en medio de los mismos.
Ejemplo de Implode()
ej26.php
<?
$matriz = array("uno", "dos" ,"tres", "cuatro" ,"cinco");
print_r($matriz);
echo "<br>";
$separada_dospuntos = implode (":", $matriz);
print_r($separada_dospuntos);
?>
Vea tambin explode(), join(), y split().
join (PHP 3, PHP 4 )
Une elementos de una matriz formando una cadena
string join (string cola, array piezas)
join() es un alias para implode(), y es idntica en todo.
Vea tambin explode(), implode(), y split().
ltrim (PHP 3, PHP 4 )
Elimina el espacio en blanco del principio de una cadena
string ltrim (string cad)
Esta funcin elimina el espacio en blanco del principio de una cadena y devuelve la
cadena resultante. Los caracteres de espacio que elimina realmente son: "\n", "\r", "\t",
"\v", "\0", y el espacio en s.
Vea tambin chop() y trim().
md5(PHP 3, PHP 4 )
Calcula el hash md5 de una cadena
string md5 (string cad)
Calcula el hash (extracto) MD5 de cad usando el Algoritmo de Resumen de Mensajes
MD5 de RSA Data Security, Inc.
Autor: Ing. Oscar R. Espeche
111
ej27.php
<?
$clave = "clavesecreta";
echo $clave;
echo "<br>";
$pass = md5($clave);
echo $pass;
?>
(http://www.faqs.org/rfcs/rfc1321.html).
Vea tambin: crc32()
nl2br (PHP 3, PHP 4 )
Convierte nuevas lneas a saltos de lnea HTML
string nl2br (string cadena)
Devuelve la cadena con <BR> insertados antes de cada nueva lnea.
ej28.php
<?
$cad = "cadena \n otracadena";
echo $cad;
echo "<br>";
$cadhtml = nl2br($cad);
echo "<br>";
echo $cadhtml;
?>
Vea tambin htmlspecialchars(), htmlentities() y wordwrap().
Ord(PHP 3, PHP 4 )
Devuelve el valor ASCII de un carcter
int ord (string cadena)
Devuelve el valor ASCII del primer caracter de cadena. Esta funcin complementa a
chr().
Ejemplo de ord()
ej29.php
<?
$cad = "\n una cadena";
if (ord ($cad) == 10) {
echo "El primer caracter de \$cad es un salto de lnea.\n";
}
echo "<br>";
echo $cad;
?>
112
113
Ejemplo de rtrim()
$recortada = rtrim ($linea);
Vea tambin trim(), ltrim().
sscanf (PHP 4 >= 4.0.1)
Trocea la entrada desde una cadena segn un formato dado
array sscanf (string cad, string formato [, string var1...]).
La funcin sscanf() es la funcin inversa de sprintf(). sscanf() lee del parmetro de
cadena cad y lo interpreta segn el formato especificado. Los valores devueltos se harn
en una matriz.
Ejemplo de sscanf()
ej31.php
<?
// obteniendo el nmero de serie
$numserie = sscanf("SN/2350001","SN/%d");
// y la fecha de fabricacin
$fecha = "01 Enero 2004";
list($dia, $mes, $anno) = sscanf($fecha,"%d %s %d");
echo "El objeto $numserie[0] fue fabricado el: $dia-".substr($mes,0,3)."-$anno\n";
?>
Si se pasan los parmetros opcionales, la funcin devolver el nmero de valores
asignados. Los parmetros opcionales deben ser pasados por referencia.
Ejemplo de sscanf() - usando parmetros opcionales
ej32.php
<?
// obtener autor y generar la ficha DocBook (xml)
$autor = "24\tLewis Carroll";
$n = sscanf($autor,"%d\t%s %s", &$id, &$nombre, &$apell);
echo "<autor id=$id>
<firstname>$nombre</firstname>
<surname>$apell</surname>
</author>\n";
?>
Vea tambin: fscanf(), printf(), y sprintf().
setlocale (PHP 3, PHP 4 )
Fija la informacin de localidad
string setlocale (string categoria, string localidad)
categoria es una cadena que especifica la categora de las funciones afectadas por el
ajuste de localidad:
Autor: Ing. Oscar R. Espeche
114
115
116
Devuelve < 0 si cad1 es menor que cad2; > 0 si cad1 es mayor que cad2, y 0 si son
iguales.
Ejemplo de strcasecmp()
ej36.php
<?
$var1 = "Hola";
$var2 = "hola";
if (strcasecmp ($var1, $var2)==0) {
echo '$var1 es igual a $var2 en una comparacin sin tener en cuenta'
.'maysculas o minsculas';
}
?>
Vea tambin ereg(), strcmp(), substr(), stristr(), y strstr().
strchr (PHP 3, PHP 4 )
Encuentra la primera aparicin de un carcter y devuelve verdadero , sino lo encuentra
devuelve falso.
string strchr (string pajar, string aguja)
Si encuentra el string aguja en el string pajar devuelve verdadero.
Esta funcin es un alias para strstr(), y es idntica en todo.
Ejemplo que muestra los archivos del directorio actual, que no tienen .en su nombre.
ej37.php
<?
$dir = opendir(".");
while($item = readdir($dir)){
if(strchr($item,".")) continue;
else
echo $item;
}
closedir($dir);
?>
strcmp(PHP 3, PHP 4 )
Comparacin de cadenas sensible a maysculas y minsculas.
int strcmp (string cad1, string cad2)
Devuelve < 0 si cad1 es menor que cad2; > 0 si cad1 es mayor que cad2, y 0 si son
iguales.
Ntese que esta comparacin es sensible a maysculas y minsculas.
Vea tambin ereg(), strcasecmp(), substr(), stristr(), strncmp(), y strstr().
strip_tags(PHP 3>= 3.0.8, PHP 4 >= 4.0b2)
Autor: Ing. Oscar R. Espeche
117
118
img1.png
img10.png
img12.png
img2.png
img1.png
img2.png
img10.png
img12.png
119
120
121
122
123
124
125
ej48.php
<?
$addr="<era una tag>";
$addr = strtr($addr, "<>", "()");
echo $addr;
?>
strtr() puede llamarso slo con dos argumentos. Si se llama de esta manera, se
comporta de otro modo: desde debe ser entonces una matriz que contenga pares
cadena => cadena que sern sustitudos en la cadena fuente. strtr() siempre
buscar la coincidencia ms larga primero y *NO* intentar sustituir nada en lo que
haya trabajado ya.
Ejemplos:
ej49.php
<?
$trad = array ("hola" => "hey", "hey" => "hola");
echo strtr("hey a todos, dije hola", $trad) . "\n";
?>
Mostrar: "hola a todos, dije hey",
Nota: Esta caracterstica (2 argumentos) fue aadida en el PHP 4.0
Vea tambin ereg_replace().
substr (PHP 3, PHP 4 )
Devuelve parte de una cadena
string substr (string cadena, int comienzo [, int largo])
substr devuelve la porcin de cadena especificada por los parmetros comienzo y largo.
Si comienzo es positivo, la cadena devuelta comenzar en dicho caracter de cadena.
Ejemplos:
ej50.php
<?
$resto = substr ("abcdef", 1);
echo "$resto<br>";
// devuelve "bcdef"
$resto = substr ("abcdef", 1, 3);
echo "$resto<br>";
// devuelve "bcd"
?>
Si comienzo es negativo, la cadena devuelta comenzar en dicha posicin desde el final
de cadena.
126
Ejemplos:
ej51.php
<?
$resto = substr ("abcdef", -1);
echo "$resto<br>";
// devuelve "f"
$resto = substr ("abcdef", -2);
echo "$resto<br>";
// devuelve "ef"
$resto = substr ("abcdef", -3, 1);
echo "$resto<br>";
// devuelve "d"
?>
Si se especifica largo y es positivo, la cadena devuelta terminar largo caracteres tras el
comienzo. Si esto resulta en una cadena con longitud negativa (porque el comienzo est
pasado el final de la cadena), la cadena devuelta contendr nicamente el caracter que
haya en comienzo.
Si se especifica largo y es negativo, la cadena devuelta terminar a largo caracteres
desde el final de cadena. Si esto resulta en una cadena con longitud negativa, la cadena
devuelta contendr nicamente el caracter que haya en comienzo.
Ejemplos:
ej52.php
<?
$resto = substr ("abcdef", 1,-1); // devuelve "bcde"
echo $resto;
?>
Vea tambin strrchr() y ereg().
substr_count (PHP 4 >= 4.0RC2)
Cuenta el nmero de apariciones de la subcadena
int substr_count (string pajar, string aguja)
substr_count() devuelve el nmero de veces que la subcadena aguja se encuentra en
la cadena pajar.
Ejemplo de substr_count()
ej53.php
<?
print substr_count("Esto es una prueba es", "es") // imprime 2
?>
substr_replace (PHP 4 >= 4.0b4)
Sustituye texto en una parte de una cadena
string substr_replace (string cadena, string sustituto, int comienzo [, int largo])
127
128
Ejemplo de Ucfirst()
ej55.php
<?php
$texto = "configuracin de servidores";
echo "$texto<br>";
$texto = ucfirst ($texto);
echo "$texto<br>";
// $texto vale ahora: Configuracin de servidores
?>
Vea tambin strtoupper() y strtolower()
ucwords(PHP 3>= 3.0.3, PHP 4 )
Pone en maysculas el primer carcter de cada palabra de una cadena
string ucwords (string cad)
Pasa a maysculas la primera letra de cada palabra en cad si dicho carcter es
alfabtico.
Ejemplo de ucwords()
ej56.php
<?php
$texto = "configuracin de servidores";
echo "$texto<br>";
$texto = ucwords ($texto);
echo "$texto<br>";
// $texto vale ahora: Configuracin De Servidores
?>
Vea tambin strtoupper(), strtolower() y ucfirst().
wordwrap(PHP 4 >= 4.0.2)
Corta una cadena en un nmero aproximado de caracteres usando un carcter de
ruptura de cadenas.
string wordwrap (string cad [, int ancho [, string ruptura]])
Corta la cadena cad en la columna especificada por el parmetro (opcional) ancho. La
lnea se rompe utilizando el parmetro (opcional) ruptura. En otras palabras, intercala
cada ancho caracteres, el carcter de ruptura sin cortar las palabras.
wordwrap() automticamente cortar en la columna 75 y usar \n (nueva lnea) si no
se especifican el ancho o la ruptura.
Ejemplo de wordwrap()
<?php
$texto = "El veloz murcilago hind coma feliz cardillo y kiwi.";
$textonuevo = wordwrap( $texto, 10,"<br>" );
echo "$textonuevo";
?>
129
130
Arrays Multidimensionales
Los arrays multidimensionales son bastante simples actualmente. Para cada dimensin del
array, se puede aadir otro valor [clave] al final:
$a[1] = $f;
# ejemplos de una sola dimensin
$a["algo"] = $f;
$a[1][0] = $f;
# bidimensional
$a["algo"][2] = $f;
# (se pueden mezclar ndices numricos y asociativos)
$a[3]["bar"] = $f;
# (se pueden mezclar ndices numricos y asociativos)
$a["algo"][4]["bar"][0] = $f; # tetradimensional!
No es posible referirse a arrays multidimensionales directamente dentro de cadenas. Por
ejemplo, lo siguiente no tendr el resultado deseado:
ej58.php
<?php
$a[3]['bar'] = 'Juan';
echo $a[3]['bar'];
echo "<br>";
echo "$a[3]['bar']";
131
echo "<br>";
echo "Esto no va a funcionar: $a[3][bar]";
?>
=
=
=
=
=
"rojo";
"dulce";
"redondeada";
"manzana";
4;
# Ejemplo 2:
$a = array (
"color" => "rojo",
"sabor" => "dulce",
"forma" => "redondeada",
"nombre" => "manzana",
Autor: Ing. Oscar R. Espeche
132
=> 4
# devolver "dulce"
Descripcin
array_values (mi_array)
asort(mi_array) y arsort(mi_array)
count(mi_array)
ksort(mi_array) y krsort(mi_array)
133
next(mi_array), prev(mi_array),
reset(mi_array) y end(mi_array)
each(mi_array)
De gran utilidad es tambin el bucle foreach que recorre de forma secuencial el array de
principio a fin.
Trabajo con tablas o arrays
Vamos a ver varios ejemplos de trabajo con arrays (arreglos, vectores, matrices o tablas en
castellano) en PHP que ilustrarn un poco el funcionamiento de algunas de las funciones de
arrays ms populares que trae consigo PHP.
Sin ms, vamos a introducirnos en materia con varios ejemplos interesantes de manejo de
vectores.
Modificar el nmero de elementos de un array
Ahora vamos a ver varios ejemplos mediante los cuales nuestros arrays pueden aumentar o
reducir el nmero de casillas disponibles.
Reducir el tamao de un array
array_slice() :Para disminuir el nmero de casillas de un arreglo tenemos varias
funciones. Entre ellas, array_slice() la utilizamos cuando queremos recortar algunas
casillas del arreglo, sabiendo los ndices de las casillas que deseamos conservar.
Recibe tres parmetros. El array, el ndice del primer elemento y el nmero de
elementos a tomar, siendo este ltimo parmetro opcional.
En el ejemplo siguiente tenemos un array con cuatro nombres propios. En la primera
ejecucin de array_slice() estamos indicando que deseamos tomar los elementos
desde el ndice 0 (el principio) hasta un nmero total de 3 elementos.
El segundo array_slice() indica que se tomen los elementos a partir del ndice 1
(segunda casilla).
ej63.php
<?
$entrada = array ("Miguel", "Pepe", "Juan", "Julio", "Pablo");
echo '$entrada = array ("Miguel", "Pepe", "Juan", "Julio", "Pablo"): ';
echo "<br>";
foreach ($entrada as $actual)
echo $actual . "<br>";
echo "<p>";
//modifico el tamao
$salida = array_slice ($entrada, 0, 3);
//muestro el array
echo '$salida = array_slice ($entrada, 0, 3): ',"<br>";
foreach ($salida as $actual)
echo $actual . "<br>";
echo "<p>";
echo '$entrada:',"<br>";
Autor: Ing. Oscar R. Espeche
134
135
136
137
En este cdigo de ejemplo creamos tres arrays y luego los unimos con la funcin
array_merge().
<?
$tabla = array ("Lagartija", "Araa", "Perro", "Gato", "Ratn");
$tabla2 = array ("12","34","45","52","12");
$tabla3 = array ("Sauce","Pino","Naranjo","Chopo","Perro","34");
//aumentamos el tamao del array
$resultado = array_merge($tabla, $tabla2, $tabla3);
foreach ($resultado as $actual)
echo $actual . "<br>";
?>
Da como resultado:
Lagartija
Araa
Perro
Gato
Ratn
12
34
45
52
12
Sauce
Pino
Naranjo
Chopo
Perro
34
Una ltima cosa. Tambin pueden introducirse nuevas casillas en un arreglo por los
mtodos habituales de asignar las nuevas posiciones en el array a las casillas que
necesitemos.
En arrays escalares se hara as:
$tabla = array ("Sauce","Pino","Naranjo");
$tabla[3]="Algarrobo";
En arrays asociativos:
$capitales = array("Argentina"=> "Buenos Aires","Brasil" => "Brasilia",
"Per" => "Lima","Paraguay" => "Asuncin");
$capitales[Chile] = Santiago;
138
139
Ejemplo de array_count_values()
ej69.php
<?
$matriz = array(1, "hola", 1, "mundo", "hola");
$cuenta=array_count_values($matriz);
// devuelve array(1=>2, "hola"=>2, "mundo"=>1)
print_r($matriz);
echo "<p>";
print_r($cuenta);
?>
Nota: Esta funcin fue aadida en el PHP 4.0.
array_flip (PHP 4 >= 4.0b4)
Intercambia los valores de una matriz
array array_flip (array trans)
array_flip() devuelve una matriz con los valores intercambiados.
Ejemplo de array_flip()
ej70.php
<?
$a=array("hola","como","te","va");
$trans = array_flip ($a);
print_r($trans);
$original = array_flip($trans);
echo"<p>";
print_r($original);
?>
Nota: Esta funcin fue aadida en el PHP 4.0.
array_keys (PHP 4 )
Devuelve todas las claves de una matriz
array array_keys (array entrada [, mixto val_a_buscar])
array_keys() devuelve las claves, numricas y de cadena, de la matriz entrada.
Si se especifica el parmetro opcional val_a_buscar, slo se devuelven las claves para
dicho valor. De otro modo, se devuelven todas las claves de la entrada.
Ejemplo de array_keys()
ej71.php
<?
$matriz = array(0 => 100, "color" => "rojo");
$a=array_keys ($matriz);
print_r($a);
echo "<p>";
Autor: Ing. Oscar R. Espeche
140
141
Ejemplo de array_pad()
$entrada = array (12, 10, 9);
$resultado = array_pad ($entrada, 5, 0);
// el resultado es array (12, 10, 9, 0, 0)
$resultado = array_pad ($entrada, -7, -1);
// el resultado es array (-1, -1, -1, -1, 12, 10, 9)
$resultado = array_pad ($entrada, 2, "no");
// no rellenado
array_pop(PHP 4 )
Extrae el ltimo elemento de la matriz
mixto array_pop (array matriz)
array_pop() extrae y devuelve el ltimo valor de la matriz, acortando la matriz en un
elemento.
Ejemplo de array_pop()
$pila = array ("naranja", "manzana", "frambuesa");
$fruta = array_pop ($pila);
Tras esto, $pila contiene slo 2 elementos: "naranja" y "manzana", y $fruta
contiene "frambuesa".
Vea tambin: array_push(), array_shift(), y array_unshift().
Nota: Esta funcin fue aadida en el PHP 4.0.
array_push(PHP 4 )
Inserta uno o ms elementos al final de la matriz
int array_push (array matriz, mixto var [, ...])
array_push() considera a la matriz como una pila, e inserta las variables que se le
pasan al final de la matriz. La longitud de la matriz se incrementa en el nmero de
variables insertadas. Tiene el mismo efecto que ejecutar:
$matriz[] = $var;
para cada var.
Devuelve el nuevo nmero de elementos de la matriz.
Ejemplo de array_push()
$pila = array (1, 2);
array_push($pila, "+", 3);
Este ejemplo dejar $pila conteniendo 4 elementos: 1, 2, "+", y 3.
Vea tambin: array_pop(), array_shift(), y array_unshift().
Nota: Esta funcin fue aadida en el PHP 4.0.
array_reverse (PHP 4 >= 4.0b4)
Devuelve una matriz con los elementos en orden inverso
Autor: Ing. Oscar R. Espeche
142
143
144
ej72.php
<?
$entrada = array("rojo", "verde", "azul", "amarillo");
print_r($entrada);
echo "<p>";
$entrada = array("rojo", "verde", "azul", "amarillo");
array_splice($entrada, 2); // $entrada vale ahora array("rojo", "verde")
print_r($entrada);
echo "<p>";
$entrada = array("rojo", "verde", "azul", "amarillo");
array_splice($entrada, 1, -1); // $entrada vale ahora array("rojo", "amarillo")
print_r($entrada);
echo "<p>";
$entrada = array("rojo", "verde", "azul", "amarillo");
array_splice($entrada, 1, count($entrada), array("naranja"));
// $entrada vale ahora array("rojo", "naranja")
print_r($entrada);
echo "<p>";
$entrada = array("rojo", "verde", "azul", "amarillo");
array_splice($entrada, -1, 1, array("negro", "marrn"));
// $entrada vale ahora array("rojo", "verde", "azul", "negro", "marrn")
print_r($entrada);
echo "<p>";
?>
Vea tambin: array_slice().
Nota: Esta funcin fue aadida en el PHP 4.0.
array_unshift (PHP 4 )
Introduce uno o ms elementos al principio de la matriz
int array_unshift (array matriz, mixto var [, ...])
array_unshift() aade los elementos que se le pasan al principio de la matriz. Ntese
que la lista de elementos es aadida como un todo, de modo que los elementos
aadidos mantienen su orden.
Devuelve el nmero de elementos en la matriz.
Ejemplo de array_unshift()
$cola = array("p1", "p3");
array_unshift($cola, "p4", "p5", "p6");
Esto har que $cola contenga 5 elementos: "p4", "p5", "p6", "p1", y "p3".
Vea tambin: array_shift(), array_push(), y array_pop().
Nota: Esta funcin fue aadida en el PHP 4.0.
array_values (PHP 4 )
145
146
d. limn
a. naranja
b. pltano
c. Manzana
d. fruta: limn
a. fruta: naranja
b. fruta: pltano
c. fruta: manzana
Vea tambin: each() y list().
arsort (PHP 3, PHP 4 )
Ordena una matriz en orden inverso y mantiene la asociacin de ndices
void arsort (array matriz)
Esta funcin ordena una matriz de modo que los ndices mantengan su correlacin con
los elementos de la misma a los que estn asociados. Esto se utiliza principalmente para
ordenar matrices asociativas en las que el orden de los elementos es importante.
Ejemplo de arsort()
<?
$frutas = array ("d"=>"limn", "a"=>"naranja", "b"=>"pltano", "c"=>"manzana");
arsort ($frutas);
for (reset ($frutas);$clave = key ($frutas);next ($frutas)) {
echo "frutas[$clave] = ".$frutas[$clave]."\n" ;
}
?>
Este ejemplo mostrara: frutas[b] = pltano frutas[a] = naranja frutas[c] = manzana
frutas[d] = limn
Las frutas han sido ordenadas en orden alfabtico inverso y los ndices asociados con
cada elemento se han mantenido.
Vea tambin: asort(), rsort(), ksort(), y sort().
asort (PHP 3, PHP 4 )
Ordena una matriz y mantiene la asociacin de ndices
void asort (array matriz)
Esta funcin ordena una matriz de modo que los ndices mantengan su correlacin con
los elementos de la misma a los que estn asociados. Esto se utiliza principalmente para
ordenar matrices asociativas en las que el orden de los elementos es importante.
Ejemplo de asort()
ej75.php
<?
$frutas = array ("d"=>"limn", "a"=>"naranja", "b"=>"pltano", "c"=>"manzana");
asort ($frutas);
for (reset ($frutas);$clave = key ($frutas);next ($frutas)) {
Autor: Ing. Oscar R. Espeche
147
148
149
150
151
variable y los valores como los valores de stas. Para cada par clave/valor crear una
variable en la tabla de smbolos actual, sujeto a los parmetros tipo_extraccin y prefijo.
extract() controla las colisiones con las variables que ya existen. La forma de tratar
stas se determina por el tipo_extraccin. Puede tener nicamente uno de los siguientes
valores:
EXTR_OVERWRITE
Si hay colisin, sobre-escribe la variable existente.
EXTR_SKIP
Si hay colisin, no sobre-escribe la variable existente.
EXTR_PREFIX_SAME
Si hay una colisin, aade el prefijo a la nueva variable.
EXTR_PREFIX_ALL
Aade el prefijo a todas las variables.
Si no se especifica tipo_extraccion, se asume que vale EXTR_OVERWRITE.
Ntese que el prefijo slo se necesita si tipo_extraccin vale EXTR_PREFIX_SAME o
EXTR_PREFIX_ALL.
extract() comprueba si cada clave es un nombre vlido de variable, y slo lo importa si
lo es.
Nota: N.T.: En el caso del idioma espaol, no valdra "ao" como nombre variable (pero
s como clave en una matriz cualquiera).
Un uso posible para extract sera importar en la tabla de smbolos las variables
contenidas en la matriz asociativa que devuelve wddx_deserialize() (que acta sobre
el contenido de un archivo XML).
Ejemplo de Extract()
ej80.php
<?
/* Suponemos que $matriz_var es una matriz devuelta por wddx_deserialize */
$tamao = "grande";
$matriz_var = array ("color" => "azul", "tamao" => "media", "forma" => "esfera");
extract ($matriz_var, EXTR_PREFIX_SAME, "wddx");
print "$color, $tamao, $forma, $wddx_tamao\n";
?>
El programa anterior producir:
azul, grande, esfera, media
La variable $tamao no fue sobre-escrita porque especificamos EXTR_PREFIX_SAME,
que provoc la creacin de $wddx_tamao. Si se hubiera especificado EXTR_SKIP,
$wddx_tamao ni siquiera habra sido creada.
EXTR_OVERWRITE habra provocado que $tamao tuviera el valor "media", y
EXTR_PREFIX_ALL habra provocado que aparecieran nuevas variables llamadas
$wddx_color, $wddx_tamao, y $wddx_forma.
152
in_array(PHP 4 )
Devuelve true si un valor est en una matriz
bool in_array (mixto aguja, array pajar)
Busca la aguja en el pajar, y devuelve true si se encuentra y false en caso contrario.
Ejemplo de in_array()
ej81.php
<?
$os = array ("Mac", "NT", "Irix", "Linux");
if (in_array ("Irix", $os))
print "Encontrado Irix";
?>
Nota: Esta funcin fue aadida en el PHP 4.0.
key(PHP 3, PHP 4 )
Obtiene una clave de una matriz asociativa.
mixto key (array matriz)
key() devuelve el elemento ndice de la posicin actual en la matriz.
Vea tambin: current(), next()
krsort (PHP 3>= 3.0.13, PHP 4 >= 4.0b4)
Ordena una matriz por clave en orden inverso
int krsort (array matriz)
Ordena una matriz por clave en orden inverso, manteniendo las correlaciones clave a
dato. Esto es til principalmente en matrices asociativas.
Ejemplo de krsort()
$frutas = array ("d"=>"limn", "a"=>"naranja", "b"=>"pltano", "c"=>"manzana");
krsort ($frutas);
for (reset ($frutas); $clave = key ($frutas); next ($frutas)) { echo "frutas[$clave] =
".$frutas[$clave]."\n";
}
Este ejemplo mostrar: frutas[d] = limn frutas[c] = manzana frutas[b] = pltano
frutas[a] = naranja
Vea tambin: asort(), arsort(), ksort() sort(), y rsort().
ksort (PHP 3, PHP 4 )
Ordena una matriz por clave
int ksort (array matriz)
153
Ordena una matriz por clave, manteniendo las correlaciones clave a dato. Esto es til
principalmente en matrices asociativas.
Ejemplo de ksort()
$frutas = array ("d"=>"limn", "a"=>"naranja", "b"=>"pltano",
"c"=>"manzana");
ksort ($frutas);
for (reset ($frutas); $clave = key ($frutas); next ($frutas)) { echo "frutas[$clave] =
".$frutas[$clave]."\n";
}
Este ejemplo mostrar: frutas[a] = naranja frutas[b] = pltano frutas[c] = manzana
frutas[d] = limn
Vea tambin: asort(), arsort(), sort(), y rsort().
list (unknown)
Asigna variables como si fueran una matriz
void list(...);
Como array(), esta no es realmente una funcin, sino una construccin del lenguaje.
list() se usa para asignar una lista de variables en una sola operacin.
Ejemplo de list()
<table>
<tr>
<th>Nombre empleado</th>
<th>Sueldo</th>
</tr>
<?php
$resultado = mysql_query("SELECT id, nombre, salario FROM empleados");
while (list($id, $nombre, $salario) = mysql_fetch_array($resultado)) {
print(" <tr>\n".
" <td><a href=\"info.php?id=$id\">$nombre</a></td>\n".
" <td>$salario</td>\n".
" </tr>\n");
}
?>
</table>
Vea tambin: each(), array().
next (PHP 3, PHP 4 )
Avanza el puntero interno de una matriz
mixto next (array matriz)
Devuelve el elemento de la matriz que ocupa el lugar siguiente al apuntado por el
puntero interno, o false si no hay ms elementos.
154
next() se comporta como current(), con una diferencia. Avanza el puntero interno de
la matriz en una posicin antes de devolver el elemento. Eso significa que devuelve el
siguiente elemento de la matriz y que avanza el puntero interno en uno.
Si al avanzar se pasa del final de la lista de elementos, next() devuelve false.
Si la matriz contiene elementos vacos, esta funcin tambin devolver false para dichos
elementos.
Para recorrer adecuadamente una matriz que pueda contener elementos vacos, vea la
funcin each().
Vea tambin: current(), end() prev() y reset()
pos(PHP 3, PHP 4 )
Obtiene el elemento actual de una matriz
mixto pos (array matriz)
Este es un alias para current().
Vea tambin: end(), next(), prev() y reset().
prev(PHP 3, PHP 4 )
Rejuanina el puntero interno de una matriz
mixto prev (array matriz)
Devuelve el elemento de la matriz que est en la posicin anterior a la que apuntaba
previamente el puntero interno, o false si no hay ms elementos.
Si la matriz contiene elementos vacos, esta funcin tambin devolver false para dichos
elementos.
Para recorrer adecuadamente una matriz que puede contener elementos vacos, vea la
funcin each().
prev() se comporta igual que next(), excepto que rejuanina el puntero interno una
posicin en lugar de avanzarlo.
Vea tambin: current(), end() next() y reset()
rango (unknown)
Crea una matriz que contiene un rango de enteros.
array rango (int bajo, int alto)
rango() devuelve una matriz de enteros desde bajo hasta alto, ambos inclusive.
Vea un ejemplo de su uso en la funcin shuffle().
reset (PHP 3, PHP 4 )
Fija el puntero interno de una matriz a su primer elemento
mixto reset (array matriz)
Autor: Ing. Oscar R. Espeche
155
156
ej83.php
<?
$numeros = range (1,20);
srand (time());
shuffle ($numeros);
while (list(, $valor) = each ($numeros)) {
echo "$valor "."<br>";
}
?>
Vea tambin: arsort(), asort(), ksort(), rsort(), sort() y usort().
sizeof (PHP 3, PHP 4 )
Obtiene el nmero de elementos de una matriz
int sizeof (array matriz)
Devueve el nmero de elementos de la matriz.
Vea tambin: count()
sort (PHP 3, PHP 4 )
Ordena una matriz
void sort (array matriz)
Esta funcin ordena una matriz. Los elementos estarn ordenados de menor a mayor
cuando la funcin termine.
Ejemplo de sort()
$frutas = array ("limn", "naranja", "pltano", "manzana");
sort ($frutas);
for (reset ($frutas); $clave = key ($frutas); next ($frutas)) { echo "frutas[$clave] =
".$frutas[$clave]."\n";
}
Este ejemplo mostrar: frutas[0] = limn frutas[1] = manzana frutas[2] = naranja
frutas[3] = pltano.
Las frutas han sido ordenadas en orden alfabtico.
Vea tambin: arsort(), asort(), ksort(), rsort(), y usort().
uasort (PHP 3>= 3.0.4, PHP 4 )
Ordena una matriz mediante una funcin de comparacin definida por el usuario y
mantiene la asociacin de ndices.
void uasort (array matriz, function func_comparar).
Esta funcin ordena una matriz de modo que los ndices de la misma mantengan su
correlacin con los elementos a los que estn asociados. Esto se utiliza principalmente
para ordenar matrices asociativas en las que el orden de los elementos es importante.
La funcin de comparacin viene definida por el usuario.
Autor: Ing. Oscar R. Espeche
157
158
159
160
161
line3
Ntese que las tabulaciones y espacios se permiten dentro de los parntesis, as que los
siguientes ejemplos son funcionalmente equivalentes:
$algo = (int) $otro;
$algo = ( int ) $otro;
Puede no ser obvio que ocurrir cuando se fuerce entre ciertos tipos. Por ejemplo, lo siguiente
debera ser tenido en cuenta.
Cuando se fuerza el cambio de una variable escalar o cadena, a un array, la variable se
convertir en el primer elemento del array:
$var = 'ciao';
162
163
$algo = 25;
$otro = &$algo;
// Esta es una asignacin vlida.
$otro = &(24 * 7); // Invlida; referencia una expresin sin nombre.
function test() {
return 25;
}
$otro = &test();
?>
// Invlida.
Variables predefinidas
PHP proporciona una gran cantidad de variables predefinidas a cualquier script que se ejecute.
De todas formas, muchas de esas variables no pueden estar completamente documentadas ya
que dependen de sobre qu servidor se est ejecutando, la versin y configuracin de dicho
servidor, y otros factores. Algunas de estas variables no estarn disponibles cuando se ejecute
PHP desde la lnea de comandos.
A pesar de estos factores, aqu tenemos una lista de variables predefinidas disponibles en una
instalacin por defecto de PHP 3 corriendo como modulo de un Apache 1.3.6 con su
configuracin tambin por defecto.
Para una lista de variables predefinidas (y muchas ms informacin til), por favor, vea (y use)
phpinfo().
Nota: Esta lista no es exhaustiva ni pretende serlo. Simplemente es una gua de
qu tipo de variables predefinidas se puede esperar tener disponibles en un
script.
Variables de Apache
Estas variables son creadas por el servidor web Apache. Si se est utilizando otro servidor web,
no hay garanta de que proporcione las mismas variables; pueden faltar algunas, o
proporcionar otras no listadas aqu. Dicho esto, tambin estn presentes las variables de la
especificacin CGI 1.1, por lo que tambin se deben tener en cuenta.
Tenga en cuenta que unas pocas, como mucho, de estas variables van a estar disponibles (o
simplemente tener sentido) si se ejecuta PHP desde la lnea de comandos.
La siguiente imagen es parte de la salida que se obtiene cuando se accede a una pgina PHP
que contiene la funcin phpinfo().
164
165
166
167
168
HTTP_CONNECTION
Los contenidos de la cabecera Connection: de la peticin actual, si hay alguna. Por
ejemplo: 'Keep-Alive'.
HTTP_HOST
Los contenidos de la cabecera Host: de la peticin actual, si hay alguna.
HTTP_REFERER
La direccin de la pgina (si la hay) desde la que el navegador salt a la pgina actual.
Esto lo establece el navegador del usuario; no todos los navegadores lo hacen.
HTTP_USER_AGENT
Los contenidos de la cabecera User_Agent: de la peticin actual, si hay alguna. Indica el
navegador que se est utilizando para ver la pgina actual; p.ej. Mozilla/4.5 [en] (X11;
U; Linux 2.2.9 i586). Entre otras cosas, se puede usar este valor con get_browser()
para adaptar la funcionalidad de la pgina a las posibilidades del navegador del usuario.
REMOTE_ADDR
La direccin IP desde la que el usuario est viendo la pgina actual.
REMOTE_PORT
El puerto que se est utilizando en la mquina del usuario para comunicarse con el
servidor web.
SCRIPT_FILENAME
La va de acceso absoluta del script que se est ejecutando.
SERVER_ADMIN
El valor que se haya dado a la directiva SERVER_ADMIN (en Apache) en el archivo de
configuracin del servidor web. Si el script se est ejecutando en un servidor virtual,
ser el valor definido para dicho servidor virtual.
SERVER_PORT
El puerto del equipo servidor que est usando el servidor web para la comunicacin.
Para configuraciones por defecto, ser '80'; al usar SSL, por ejemplo, cambiar al puerto
que se haya definido como seguro para HTTP.
SERVER_SIGNATURE
Una cadena que contiene la versin del servidor y el nombre del servidor virtual que es
aadida a las pginas generadas por el servidor, si est caracterstica est activa.
PATH_TRANSLATED
Va de acceso basada en el sistema de archivos- (no el directorio raz del documento-)
del script en cuestin, despus de que el servidor haya hecho la conversin virtual-areal.
SCRIPT_NAME
Contiene la va de acceso del script actual. Es til para pginas que necesitan apuntar a
s mismas.
REQUEST_URI
La URI que se di para acceder a esta pgina; por ejemplo, '/index.html'.
Variables de entorno
169
Estas variables se importan en el espacio de nombres global de PHP desde el entorno en el que
se est ejecutando el intrprete PHP.
Muchas son proporcionadas por el intrprete de comandos en el que se est ejecutando PHP, y
dado que a sistemas diferentes les gusta ejecutar diferentes tipos de intrpretes de comandos,
es imposible hacer una lista definitiva. Por favor, mire la documentacin de su intrprete de
comandos para ver una lista de las variables de entorno definidas.
Otras variables de entorno son las de CGI, que estn ah sin importar si PHP se est ejecutando
como un mdulo del servidor o como un intrprete CGI.
Variables de PHP
Estas variables son creadas por el propio PHP.
argv :
Array de argumentos pasados al script. Cuando el script se ejecuta desde la lnea de
comandos, esto da un acceso, al estilo de C, a los parmetros pasados en lnea de
comandos. Cuando se le llama mediante el mtodo GET, contendr la cadena de la
peticin.
argc
PHP_SELF
El nombre del archivo que contiene el script que se esta ejecutando, relativo al directorio
raz de los documentos. Si PHP se est ejecutando como intrprete de lnea de
comandos, esta variable no est disponible.
HTTP_COOKIE_VARS
Un array asociativo de variables pasadas al script actual mediante cookies HTTP. Slo
est disponible si el seguimiento de variables ha sido activado mediante la directiva de
configuracin track_vars o la directiva <?php_track_vars?>.
HTTP_GET_VARS
Un array asociativo de variables pasadas al script actual mediante el mtodo HTTP GET.
Slo est disponible si --variable tracking-- ha sido activado mediante la directiva de
configuracin track_vars o la directiva <?php_track_vars?>.
HTTP_POST_VARS
Un array asociativo de variables pasadas al script actual mediante el mtodo HTTP
POST. Slo est disponible si --variable tracking-- ha sido activado mediante la directiva
de configuracin track_vars o la directiva <?php_track_vars?>.
Ambito de las variables
Abandonamos la variables predefinidas y nustro tema enfocar a como reconocer cul es el
contexto dentro del que la variable est definida. La mayor parte de las variables PHP slo
tienen un mbito simple. Este mbito simple tambin abarca los archivos incluidos y los
requeridos. Por ejemplo:
$a = 1;
include "b.inc";
Aqu, la variable $a tiene existencia dentro del script incluido b.inc.
170
De todas formas, dentro de las funciones definidas por el usuario aparece un mbito local a la
funcin. Cualquier variables que se use dentro de una funcin est, por defecto, limitada al
mbito local de la funcin. Por ejemplo:
$a = 1; /* mbito global */
Function Test () {
echo $a; /* referencia a una variable de mbito local */
}
Test ();
Este script no producir salida, ya que la rden echo utiliza una versin local de la variable $a,
a la que no se ha asignado ningn valor en su mbito.
Puede que usted note que hay una pequea diferencia con el lenguaje C, en el que las variables
globales estn disponibles automticamente dentro de la funcin a menos que sean
expresamente sobreescritas por una definicin local. Esto puede causar algunos problemas, ya
que la gente puede cambiar variables globales inadvertidamente.
En PHP, las variables globales deben ser declaradas globales dentro de la funcin si van a ser
utilizadas dentro de dicha funcin. Veamos un ejemplo:
$a = 1;
$b = 2;
Function Sum () {
global $a, $b;
$b = $a + $b;
}
Sum ();
echo $b;
El script anterior producir la salida "3". Al declarar $a y $b globales dentro de la funcin, todas
las referencias a tales variables se referirn a la versin global. No hay lmite al nmero de
variables globales que se pueden manipular dentro de una funcin.
Un segundo mtodo para acceder a las variables desde un mbito global es usando el array
$GLOBALS propio de PHP3. El ejemplo anterior se puede reescribir as:
$a = 1;
$b = 2;
Function Sum () {
$GLOBALS["b"] = $GLOBALS["a"] + $GLOBALS["b"];
}
Sum ();
echo $b;
El array $GLOBALS es un array asociativo con el nombre de la variable global como clave y los
contenidos de dicha variable como el valor del elemento del array.
171
Otra caracterstica importante del mbito de las variables es la variable static. Una variable
esttica existe slo en el mbito local de la funcin, pero no pierde su valor cuando la ejecucin
del programa abandona este mbito. Consideremos el siguiente ejemplo:
Function Test () {
$a = 0;
echo $a;
$a++;
}
Esta funcin tiene poca utilidad ya que cada vez que es llamada asigna a $a el valor 0 y
representa un "0". La sentencia $a++, que incrementa la variable, no sirve para nada, ya que
en cuanto la funcin termina la variable $a desaparece. Para hacer una funcin til para contar,
que no pierda la pista del valor actual del conteo, la variable $a debe declararse como esttica:
Function Test () {
static $a = 0;
echo $a;
$a++;
}
Ahora, cada vez que se llame a la funcin Test(), se representar el valor de $a y se
incrementar.
Las variables estticas tambin proporcionan una forma de manejar funciones recursivas. Una
funcin recursiva es la que se llama a s misma. Se debe tener cuidado al escribir una funcin
recursiva, ya que puede ocurrir que se llame a s misma indefinidamente. Hay que asegurarse
de implementar una forma adecuada de terminar la recursin. La siguiente funcin cuenta
recursivamente hasta 10, usando la variable esttica $count para saber cundo parar:
Function Test () {
static $count = 0;
$count++;
echo $count;
if ($count < 10) {
Test ();
}
$count--;
Variables variables
A veces es conveniente tener nombres de variables variables. Dicho de otro modo, son
nombres de variables que se pueden establecer y usar dinmicamente. Una variable normal se
establece con una sentencia como:
$a = "hola";
Una variable variable toma el valor de una variable y lo trata como el nombre de una variable.
En el ejemplo anterior, hola, se puede usar como el nombre de una variable utilizando dos
signos de dlar. p.ej.
172
$$a = "mundo";
En este momento se han definido y almacenado dos variables en el rbol de smbolos de PHP:
$a, que contiene "hola", y $hola, que contiene "mundo". Es ms, esta sentencia:
echo "$a ${$a}";
produce el mismo resultado que:
echo "$a $hola";
p.ej. ambas producen el resultado: hola mundo.
Para usar variables variables con arrays, hay que resolver un problema de ambigedad. Si se
escribe $$a[1] el intrprete necesita saber si nos referimos a utilizar $a[1] como una variable,
o si se pretenda utilizar $$a como variable y el ndice [1] como ndice de dicha variable. La
sintaxis para resolver esta ambiguedad es: ${$a[1]} para el primer caso y ${$a}[1] para el
segundo.
173
174
Cookies HTTP
PHP soporta cookies de HTTP de forma transparente tal y como estn definidas en en las
Netscape's Spec. Las cookies son un mecanismo para almacenar datos en el navegador y as
rastrear o identificar a usuarios que vuelven.
Se pueden crear cookies usando la funcin SetCookie(). Las cookies son parte de la cabecera
HTTP, as que se debe llamar a la funcin SetCookie antes de que se enve cualquier salida al
navegador. Es la misma restriccin que para la funcin header(). Cualquier cookie que se
reciba procedente del cliente ser convertida automticamente en una variable de PHP como
con los datos en los mtodos GET y POST.
Si se quieren asignar mltiples valores a una sola cookie, basta con aadir [] al nombre de la
variable. Por ejemplo:
SetCookie ("MiCookie[]", "Probando", time()+3600);
Ntese que una cookie reemplazar a una cookie anterior que tuviese el mismo nombre en el
navegador a menos que el camino (path) o el dominio fuesen diferentes.
Variables de entorno
Como ya vimos PHP hace accesibles las variables de entorno automticamente tratndolas
como variables normales.
echo $HOME; /* Shows the HOME environment variable, if set. */
Dado que la informacin que llega va mecanismos GET, POST y Cookie crean automticamente
variables de PHP, algunas veces es mejor leer variables del entorno explcitamente para
asegurarse de que se est trabajando con la versin correcta. La funcin getenv() se puede
usar para ello. Tambin se puede asignar un valor a una variable de entorno con la funcin
putenv().
Puntos en los nombres de variables de entrada
Tpicamente, PHP no altera los nombres de las variables cuando se pasan a un script. De todas
formas, hay que notar que el punto no es un carcter vlido en el nombre de una variable PHP.
Por esta razn, mire esto:
$varname.ext; /* nombre de variable no vlido */
Lo que el intrprete ve es el nombre de una variable $varname, seguido por el operador de
concatenacin, y seguido por la prueba (es decir, una cadena sin entrecomillar que no coincide
con ninguna palabra clave o reservada conocida) 'ext'. Obviamente, no se pretenda que fuese
este el resultado.
Por esta razn, es importante hacer notar que PHP reemplazar automticamente cualquier
punto en los nombres de variables de entrada por guiones bajos (subrayados).
175
176
1.6 Constantes
Una constante es un identificador para expresar un valor simple. Como el nombre sugiere, este
valor no puede variar durante la ejecucin del script. (Las constantes especiales __FILE__ y
__LINE__ son una excepcin a esto, ya que realmente no lo son).
Una constante es sensible a maysculas por defecto. Por convencin, los identificadores de
constantes suelen declararse en maysculas.
El nombre de una constante sigue las mismas reglas que cualquier etiqueta en PHP. Un nombre
de constante vlido empieza con una letra o un caracter de subrayado, seguido por cualquier
nmero de letras, nmeros, o subrayados. Se podran expresar mediante la siguiente expresin
regular: [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*
Nota: Para nuestros propsitos, entenderemos como letra los carcteres a-z, AZ, y los ASCII del 127 hasta el 255 (0x7f-0xff).
El alcanze de una constante es global, Es decir, es posible acceder a ellas sin preocuparse por el
mbito de alcance.
Definicin de constantes
Se puede definir una constante usando la funcin define(). Una vez definida, no puede ser
modificada ni eliminada .
Solo se puede definir como constantes valores escalares (boolean, integer, float y string ).
Para obtener el valor de una constante solo es necesario especificar su nombre. A diferencia de
las variables, no se tiene que especificar el prefijo $.
Tambin se puede utilizar la funcin constant(), para obtener el valor de una constante, en el
caso de que queramos expresarla de forma dinmica Usa la funcin get_defined_constants()
parar obtener una lista de todas las constantes definidas.
Nota: Las contantes y las variables (globales) se encuentran en un espacio de
nombres distinto. Esto implica que por ejemplo TRUE y $TRUE son diferentes.
Si usas una constante todavia no definida, PHP asume que ests refirindote al nombre de la
constante en si. Se lanzar un aviso si esto sucede. Usa la funcin defined() para comprobar
la existencia de dicha constante.
Estas son las diferencias entre constantes y variables:
<?php
define("CONSTANT", "Hola mundo.");
echo CONSTANT; // la salida es: "Hola mundo."
echo Constant; // la salida es: Constant y un aviso de advertencia.
?>
177
Constantes predefinidas
PHP ofrece un largo nmero de constantes predefinidas a cualquier script en ejecucin. Muchas
de estas constantes, sin embargo, son creadas por diferentes extensines, y solo estarn
presentes si dichas extensines estn disponibles, bien por carga dinmica o porque has sido
compiladas.
178
1.7 Expresiones
Las expresiones son la piedra angular de PHP. En PHP, cas cualquier cosa que escribes es una
expresin. La forma ms simple y ajustada de definir una expresin es "cualquier cosa que
tiene un valor".
Las formas ms bsicas de expresiones son las constantes y las variables. Cuando escribes "$a
= 5", ests asignando '5' a $a. '5', obviamente, tiene el valor 5 o, en otras palabras '5' es una
expresin con el valor 5 (en este caso, '5' es una constante entera).
Despus de esta asignacin, esperars que el valor de $a sea 5 tambin, de manera que si
escribes $b = $a, esperas que se comporte igual que si escribieses $b = 5. En otras palabras,
$a es una expresin tambin con el valor 5. Si todo va bien, eso es exactamente lo que pasar.
Las funciones son un ejemplo algo ms complejo de expresiones. Por ejemplo, considera la
siguiente funcin:
function algo () {
return 5;
}
Suponiendo que ests familiarizado con el concepto de funciones (si no lo ests chale un
vistazo al captulo sobre funciones), asumirs que teclear $c = algo(); es esencialmente lo
mismo que escribir $c = 5;, y has acertado.
Las funciones son expresiones que valen el valor que retornan. Como algo() devuelve 5, el
valor de la expresin 'algo()' es 5. Normalmente las funciones no devuelven un valor fijo, sino
que suele ser calculado.
PHP es un lenguaje orientado a expresiones, en el sentido de que cas todo es una expresin.
Considera el ejemplo anterior '$a = 5'. Es sencillo ver que hay dos valores involucrados, el valor
de la constante entera '5', y el valor de $a que est siendo actualizado tambin a 5. Pero la
verdad es que hay un valor adicional implicado aqu, y es el valor de la propia asignacin. La
asignacin misma se evala al valor asignado, en este caso 5. En la prctica, quiere decir que
'$a = 5', independientemente de lo que hace, es una expresin con el valor 5. De esta manera,
escribir algo como '$b = ($a = 5)' es como escribir '$a = 5; $b = 5;' (un punto y coma marca
el final de una instruccin). Como las asignaciones se evalan de derecha a izquierda, puedes
escribir tambin '$b = $a = 5'.
Otro buen ejemplo de orientacin a expresiones es el pre y post incremento y decremento. Los
usuarios de PHP/FI 2 y los de otros muchos lenguajes les sonar la notacin variable++ y
variable--. Esto son las operaciones de incremento y decremento.
En PHP, como en C, hay dos tipos de incremento - pre-incremento y post-incremento. Ambos,
en esencia, incrementan la variable y el efecto en la variable es idntico. La diferencia radica en
el valor de la propia expresion incremento. El preincremento , escrito '++$variable', se evala
al valor incrementado (PHP incrementa la variable antes de leer su valor, de ah el nombre
'preincremento'). El postincremento, escrito '$variable++', se evala al valor original de
$variable antes de realizar el incremento (PHP incrementa la variable despus de leer su valor,
de ah el nombre 'postincremento').
Un tipo muy corriente de expresiones son las expresiones de comparacin. Estas expresiones se
evalan a 0 o 1, significando FALSO (FALSE) o CIERTO (TRUE), respectivamente. PHP soporta
> (mayor que), >= (mayor o igual que), == (igual que), != (distinto), < (menor que) y <=
(menor o igual que). Estas expresiones se usan frecuentemente dentro de la ejecucin
condicional como la instruccin if.
Autor: Ing. Oscar R. Espeche
179
Una ltima cosa que vale la pena mencionar, es el valor booleano de las expresiones. En
muchas ocasones, principalmente en condicionales y bucles, no ests interesado en el valor
exacto de la expresin, sino nicamente si es CIERTA (TRUE) o FALSA (FALSE) (PHP no tiene
un tipo booleano especfico).
El valor de verdad de las expresiones en PHP se calcula de forma similar a perl. Cualquier valor
numrico distinto de cero es CIERTO (TRUE), cero es FALSO (FALSE). Fjate en que los valores
negativos son distinto de cero y considerados CIERTO (TRUE)! La cadena vaca y la cadena "0"
180
son FALSO (FALSE); todas las dems cadenas son TRUE. Con los tipos no escalares (arrays y
objetos) - si el valor no contiene elementos se considera FALSO (FALSE), en caso contrario se
considera CIERTO (TRUE).
PHP te brinda una completa y potente implementacin de expresiones, y documentarla
enteramente est ms all del objetivo de ete manual. Los ejemplos anteriores, deberan darte
una buena idea de qu son las expresiones y cmo construir expresiones tiles. A lo largo del
resto del manual, escribiremos expr para indicar una expresin PHP vlida.
181
1.8 Operadores
Operadores Aritmticos
Recuerdas la aritmtica bsica del colegio? Pues estos operadores funcionan exactamente
igual.
ejemplo nombre
resultado
$a + $b Adicin
Suma de $a y $b.
$a - $b
$a * $b
$a / $b
Divisin
$a % $b Mdulo
Operadores de Asignacin
El operador bsico de asignacin es "=". A primera vista podras pensar que es el operador de
comparacin "igual que". Pero no. Realmente significa que el operando de la izquierda toma el
valor de la expresin a la derecha, (esto es, "toma el valor de").
El valor de una expresin de asignacin es el propio valor asignado. Esto es, el valor de "$a =
3" es 3. Esto permite hacer cosas curiosas como:
$a = ($b = 4) + 5; // ahora $a es igual a 9, y $b vale 4.
Adems del operador bsico de asignacin, existen los "operadores combinados" para todas las
operaciones aritmticas y de cadenas que sean binarias. Este operador combinado te permite,
de una sola vez, usar una variable en una expresin y luego establecer el valor de esa variable
al resultado de la expresin. Por ejemplo:
$a
$a
$b
$b
= 3;
+= 5;
= "Hola ";
.= "Ah!";
Fjate en que la asignacin realiza una nueva copia de la variable original (asignacin por
valor), por lo que cambios a la variable original no afectan a la copia. Esto puede tener inters
si necesitas copiar algo como un array con muchos elementos dentro de un bucle que se repita
muchas veces (cada vez se realizar una nueva copia del array). PHP4 soporta asignacin por
referencia, usando la sintaxis $var = &$otravar;, pero esto no es posible en PHP3. 'Asignacin
por referencia' quiere decir que ambas variables acabarn apuntando al mismo dato y que nada
es realmente copiado.
Operadores Bit a bit
Los operadores bit a bit te permiten activar o desactivar bits individuales de un entero.
ejemplo nombre
resultado
$a & $b
$a | $b
182
ejemplo nombre
resultado
~ $a
No
$a <<$b
$a >> b
Operadores de Comparacin
Los operadores de comparacin, como su nombre indica, permiten comparar dos valores.
ejemplo
nombre
resultado
$a == $b
Igualdad
$a === $b Identidad
$a != $b
Desigualdad
$a < $b
Menor que
$a > $b
Mayor que
$a <= $b
$a >= $b
El otro operador que ya vimos, es el operador condicional "?:" (o ternario), que funciona como
en C y otros muchos lenguajes.
(expr1) ? (expr2) : (expr3);
La expresin toma el valor expr2 si expr1 se evala a cierto, y expr3 si expr1 se evala a falso.
Operador de ejecucin
PHP soporta un operador de ejecucin: el apstrofe invertido (``). Fjate que no son
apostrofes normales! PHP intentar ejecutar la instruccin contenida dentro de los apstrofes
invertidos como si fuera un comando del shell; y su salida devuelta como el valor de esta
expresin (i.e., no tiene por qu ser simplemente volcada como salida; puede asignarse a una
variable).
$output = `ls -al`;
echo "<pre>$output</pre>";
Ver tambin system(), passthru(), exec(), popen(), y escapeshellcmd().
Operadores de Incremento/decremento
PHP soporta los operadores de predecremento y post incremento al estilo de C como ya vimos.
ejemplo nombre
efecto
++$a
Preincremento
$a++
--$a
$a--
183
ejemplo nombre
resultado
$a and $b Y
$a or $b
Negacin
Cierto si $a no es cierto.
$a && $b Y
$a || $b
La razn de las dos variaciones de "y" y "o" es que operan con distinta precedencia.
Precedencia de Operadores
La precedencia de operadores especifica cmo se agrupan las expresiones. Por ejemplo, en la
expresin 1 + 5 * 3, la respuesta es 16 y no 18 porque el operador de multiplicacin ("*") tiene
una mayor precedencia que el de adicin ("+").
La siguiente tabla lista la precedencia de operadores, indicndose primero los de menor
precedencia.
Asociatividad Operadores
izquierda
izquierda
or
izquierda
xor
izquierda
and
derecha
184
Asociatividad Operadores
izquierda
izquierda
?:
izquierda
||
izquierda
&&
izquierda
izquierda
izquierda
&
no asociativo
== != ===
no asociativo
izquierda
<< >>
izquierda
+-.
izquierda
*/%
derecha
derecha
no asociativo
new
Operadores de Cadenas
Como ya vimos, hay dos operadores de cadenas. El primero es el operador de concatenacin
('.'), que devuelve el resultado de concatenar sus operandos izquierdo y derecho. El segundo es
el operador de concatenacin y asignacin ('.=').
$a = "Hola ";
$b = $a . "Mundo!"; // ahora $b contiene "Hola Mundo!"
$a = "Hola ";
$a .= "Mundo!"; // ahora $a contiene "Hola Mundo!"
185