Este documento proporciona instrucciones detalladas para administrar un foro usando PHP-Nuke. Explica cómo instalar y configurar PHP-Nuke, crear y moderar contenido de usuarios, y personalizar la apariencia y funcionalidad del sitio a través de temas y módulos. También cubre edición básica en HTML y SQL para principiantes. El objetivo general es enseñar a los lectores a construir y mantener un foro dinámico y participativo usando esta herramienta de código abierto.
Tema 19. Inmunología y el sistema inmunitario 2024
Curso de html y phpnuke
1. Apuntes del taller de creaci´ n de foros,
o
noticieros y conversaciones con PHP-Nuke
Max de Mendiz´ bal
a
negrabarba@yahoo.com
28 de febrero de 2003
7. Cap´tulo 1
ı
Introducci´ n
o
Las tecnolog´as de la informaci´ n han tenido y tienen un gran impacto en la
ı o
´
sociedad actual. Una de las areas en donde el impacto deber´a ser m´ s profundo
ı a
es la educaci´ n. Sin embargo a´ n no es as´. El objetivo de este curso es mostrar
o u ı
una herramienta de uso general que promueva el uso de Internet en el ambito´
educativo. Esta herramienta es PHP-Nuke. PHP-Nuke es, en palabras de su
autor,
un sistema de creaci´ n de portales, el ideal para que tengas tu pro-
o
pio portal en muy pocos pasos y sin la necesidad de saber programa-
ci´ n. El administrador (t´ ) instala PHP-Nuke en el servidor y mane-
o u
ja el portal desde su navegador en cualquier PC conectada a internet,
tiene control total del sitio pudiendo subir/editar/borrar noticias, crear
directorios al estilo Yahoo!, crear documentos para la lectura, etc. A
a o ´
la vez podr´ s agregarle diferentes m´ dulos muy utiles seg´ n tus ne-
u
cesidades y visualizarlo a tu gusto utilizando diferentes temas. Para
conocerlo mejor pudes recorrer http://PHPNuke-espanol.org y ver to-
das sus posibilidades, como usuario registrado conocer´ s algunas de
a
las funciones que ofrece a los visitantes que se registran y visitan tu
sitio habitualmente (ellos tambi´ n pueden personalizar el sitio a gus-
e
to).
La p´ gina web en donde se encuentra ubicado el proyecto PHP-Nuke en cas-
a
tellano est´ en http://www.phpnuke-espanol.org. All´ se puede encontrar el pro-
a ı
grama, un foro sobre PHP-Nuke, contribuciones de otros autores, m´ dulos nue-
o
vos, consejos para principiantes y, en general, mucha informaci´ n alrededor del
o
tema de creaci´ n de portales y sitios en internet usando PHP-Nuke.
o
7
8. 8 ´ ´
CAPITULO 1. INTRODUCCION
El curso-taller est´ dividido en tres partes fundamentales: c´ mo administrar un
a o
foro ya instalado con algunos consejos sobre su uso e ideas sobre c´ mo integrar
o
a la comunidad; una parte t´ cnica en donde se habla del lenguaje HTML y la
e
creaci´ n de p´ ginas web elementales y, finalmente c´ mo instalar y modificar la
o a o
funcionalidad de PHP-Nuke.
Esta versi´ n de las notas cubre la versi´ n 6.0 de PHP-Nuke.
o o
9. Cap´tulo 2
ı
Administraci´ n de un foro
o
2.1. Una primera mirada a PHP-Nuke
Una p´ gina web con PHP-Nuke instalado est´ compuesta por las siguientes
a a
partes
Encabezado
Barra izquierda de navegaci´ n
o
Barra derecha de navegaci´ n
o
Contenido central
Pies de p´ gina
a
Todas estas partes son modificables a capricho del administrador. En PHP-
Nuke se manejan secciones y temas que son las dos grandes divisiones de conte-
nido dentro de una p´ gina que utilice este software.
a
En las barras izquierda y derecha se encuentran varios bloques. Estos bloques
contienen hiperv´nculos al interior de la p´ gina y, posiblemente a otros sitios del
ı a
internet. El contenido de estos bloques tambi´ n puede ser transformado por com-
e
pleto seg´ n las necesidades del sitio.
u
El encabezado y los pies de p´ gina son lo primero que se debe modificar para
a
darle una personalidad a nuestro sitio. M´ s adelante veremos c´ mo hacer estos
a o
cambios.
Dentro del contenido central es donde se aparecer´ n las noticias “de portada” y
a
los avisos. Los avisos permiten mostrar, en un lugar preponderante, un mensaje del
9
10. 10 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
administrador. Puede ser una introducci´ n al contenido del sitio, una justificaci´ n
o o
de su existencia, una raz´ n de ser o simplemente una nota administrativa. Pueden
o
haber varios avisos dirigidos a las siguientes categor´as: todos los visitantes, los
ı
usuarios an´ nimos, los usuarios registrados o los administradores. PHP-Nuke se
o
encargar´ de mostrar el mensaje al p´ blico seleccionado.
a u
Poner un mensaje es una prerrogativa especial del administrador. Los usuarios
no pueden poner, por s´ solos y sin autorizaci´ n, un mensaje.
ı o
Las noticias que van debajo de los avisos, son las notas que d´a a d´a que se
ı ı
publican en la p´ gina.
a
Las secciones permiten escribir notas que no aparezcan en la portada del si-
tio y que est´ n dirigidas a un p´ blico especializado en cierto tema. Ese p´ blico
a u u
podr´ saber que existen dichas notas y que no se publican en la portada porque
a
est´ n en una secci´ n especial. Es posible crear tantas secciones como se deseen.
a o
Los temas son, como su nombre lo indica, son una clasificaci´ n del tipo de
o
contenido que se muestra. Como las secciones, su funci´ n es distinguir los art´cu-
o ı
los publicados mediante una clasificaci´ n arbitraria. Los temas son adicionales e
o
independientes de las secciones, esto quiere decir que cada art´culo puede perte-
ı
necer a una u otra secci´ n y, de forma adicional, se utiliza un tema, que tiene por
o
ventaja fundamental que se distingue un tema de otro mediante la visualizaci´ n o
de un gr´ fico que se muestra en el resumen de la noticia que aparece en la portada
a
y durante la lectura del art´culo. Esto le da un aspecto muy vivo a una p´ gina de
ı a
noticias. En versiones anteriores, PHP-Nuke tra´a varios temas de inter´ s de la
ı e
comunidad de software libre predefinidos, sin embargo, en esta versi´ n es necesa-
o
rio crear los dibujos por uno mismo, lo cual permite tener una imagen visual del
sitio acorde con nuestros objetivos.
Hay otros tipos de contenido en PHP-Nuke, pero son de menor importancia,
por ejemplo, los llamados weblinks o enlaces que permiten tener una colecci´ n deo
hiperv´nculos a otros sitios. En este tipo de contenido, el usuario puede sugerir un
ı
enlace a otro sitio y se tendr´ un cat´ logo de sitios sugeridos construido poco a
a a
poco por los usuarios y su administrador. Tambi´ n se pueden construir enciclope-
e
dias, efem´ rides, rese˜ as, descargas, listas de preguntas frecuentes y encuestas.
e n
En res´ men, en PHP-Nuke se tiene el siguiente tipo de contenidos
u
Art´culos
ı
Contenidos
Descargas
11. 2.1. UNA PRIMERA MIRADA A PHP-NUKE 11
Enciclopedias
Efem´ rides
e
Listas de preguntas frecuentes (FAQ)
Foros
Mensajes
Rese˜ as
n
Encuestas
Enlaces
Es posible crear otros tipos de contenido pero, para ello, ser´a necesario mo-
ı
dificar la estructura del PHP-Nuke, tema que sobrepasa el alcance de este taller.
12. 12 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
2.2. El proceso de edici´ n de art´culos
o ı
En PHP-Nuke existen dos formas de publicar art´culos, la primera es que
ı
un editor, mejor conocido como administrador, escriba una nota, misma que se
publicar´ directamente en la portada.
a
La segunda forma, que es m´ s interesante, consiste en que un usuario regis-
a
trado escribe una nota y luego, el administrador, la lee, la edita y, si le parece, la
aprueba para publicaci´ n.
o
2.3. El punto de vista del usuario
2.3.1. Registro del usuario
El usuario que quiera colaborar con una nota debe, por principio, registrarse en
el sistema. Para ello debe buscar, en la caja de “Ingreso” o “Login” el hiperv´nculo
ı
que dice “create an account”, “crearse una cuenta” o algo similar. All´ se rellena un
ı
formulario muy sencillo en donde se escriben algunos datos fundamentales como
el correo electr´ nico. Una vez terminada la forma, el usuario recibe su contrase˜ a
o n
en la cuenta de correo que haya especificado en el formulario.
13. 2.3. EL PUNTO DE VISTA DEL USUARIO 13
Finalmente, el usuario deber´ escribir su nombre de usuario y su contrase˜ a en
a n
la caja de “Login” para ingresar al sistema y as´ poder colaborar con un art´culo.
ı ı
2.3.2. Selecci´ n del idioma de la interfase
o
Una vez que haya ingresado al sistema es buena idea cambiar el idioma en el
que est´ la interfase a “Spanish”. Tambi´ n puede modificar el aspecto visual de la
a e
p´ gina web seleccionando un tema gr´ fico distinto y algunas otras cosas m´ s.
a a a
2.3.3. Escribir un art´culo
ı
Una vez que el usuario se registra, puede colaborar con un art´culo. Para ello
ı
debe buscar la opci´ n “Enviar noticia” que est´ en el men´ principal.
o a u
14. 14 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
El formulario por rellenar tiene muy pocas opciones
T´tulo
ı
Tema
Texto de la noticia
Texto extendido
Botones de vista previa, aceptar y tipo de contenido
El tema permite ubicar al art´culo en la tem´ tica del foro. El administrador es
ı a
quien decide que temas son los de inter´ s para la comunidad. El texto de la noticia
e
debe contener a la noticia en s´ misma, sin embargo, si la noticia es muy grande, es
ı
conveniente poner el p´ rrafo inicial en “texto de la noticia” y la continuaci´ n en la
a o
caja de “texto extendido” pues eso mejora la legilibilidad de la misma. Finalmente
el usuario puede ver c´ mo va a quedar su art´culo antes de enviarlo utilizando el
o ı
bot´ n “vista previa”. Cuando ya est´ seguro de c´ mo va a quedar, lo puede enviar
o a o
o ´
con el bot´ n “Aceptar”. El ultimo bot´ n permite especificar que tipo de contenido
o
se est´ enviando: texto puro, HTML o s´mbolos de HTML convertidos a texto.
a ı
2.4. El punto de vista del administrador
El administrador, o editor, como se prefiera, es el responsable de todo el conte-
nido del sitio PHP-Nuke. Es quien revisa los art´culos enviados por los usuarios y
ı
publica sus propios art´culos. Puede, adem´ s publicar los mensajes especiales que
ı a
aparecen en portada. Para ingresar en modo de administraci´ n se debe escribir lo
o
15. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 15
siguiente http://nombredelsitio/admin.php. Una vez all´ PHP-Nuke pedir´ el Ad-
ı a
min ID y el password. La primera vez que se utiliza el programa es indispensable
crear una cuenta de administrador.
El procedimiento para dar de alta la cuenta de administrador es el siguiente:
primero es necesario entrar a la p´ gina principal. All´ hay un mensaje inicial que
a ı
permite dar de alta la cuenta de administrador. Dicho mensaje dice “Por razones
de seguridad, la mejor idea es crear un Super Usuario AHORA MISMO haciendo
un click AQU´ Entonces, si se sigue dicha instrucci´ n se obtiene la siguiente
I”. o
pantalla:
En este caso de ejemplo, el administrador se llama “Negrabarba”, su p´ gi-a
na web es http://localhost, correo electr´ nico negrabarba@yahoo.com, password
o
“secreto”. A la pregunta sobre si se crea un usuario com´ n con los mismos datos,
u
es conveniente hacerlo. Dicho usuario le permite al administrador enviar noticias
para que otros administradores las editen y tener, con ello, una forma conveniente
de edici´ n de notas en los sitios en donde as´ se considere conveniente.
o ı
Finalmente, se tiene ya una cuenta de administrador plenipotenciario. Guarde
cuidadosamente esta cuenta, pues le permitir´ modificar la totalidad del sitio.
a
Posteriormente, muestra la pantalla de entrada del administrador, en donde so-
licita el Admin ID y el password. Ponga lo mismo que escribi´ en el paso anterior.
o
En el caso de ejemplo “Negrabarba” y “secreto”, respectivamente.
Una vez all´, ingresar´ en la pantalla del administrador.
ı a
2.4.1. La pantalla del administrador
Una vez que se haya ingresado al sistema se tienen las siguientes opciones. En
este caso me referir´ a la versi´ n en castellano.
e o
16. 16 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
o u ı ´
Men´ de administraci´ n. Es el men´ principal y all´ se pueden ver las ulti-
u
mas noticias que se han publicado
Nueva noticia. Con esta opci´ n se escribe una nueva noticia
o
Respaldo. Genera una copia de respaldo de la base de datos de PHP-Nuke.
Util´cela con frecuencia
ı
Banners. Esta opci´ n est´ pensada para quienes tienen un sitio financiado
o a
con anunciantes, y es un remanente de la quimera del oro moderna, ahora
conocida como el crack de las punto com, causante de gran parte de la crisis
econ´ mica actual
o
Bloques. Permite modificar los bloques que aparecen a la izquierda y a la
derecha de la pantalla principal
Contenido. Permite insertar p´ ginas de contenido en formato arbitrario. Se
a
pueden ver si se accesa el m´ dulo “Contenidos”
o
Descargas. Aqu´ se pueden colocar archivos para que los usuarios puedan
ı
“bajar” en sus computadoras
Editar admins. Permite dar de alta administradores, darlos de baja, y modi-
ficar sus opciones
Editar usuarios. Permite dar de alta usuarios, darlos de baja, y modificar sus
opciones
17. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 17
Enciclopedia. Es el lugar en donde se crean las enciclopedias. Las enciclo-
pedias son contenidos ordenados alfab´ ticamente
e
Efem´ rides. Es el lugar en donde poner una efem´ rides para cada d´a im-
e e ı
portante del foro sobre el que se est´ trabajando
a
FAQ. Aqu´ se dan de alta las preguntas m´ s frecuentes sobre el foro
ı a
Foros. Permite crear foros de discusi´ n sobre cualquier tema
o
HTTP Referers. Si un sitio nos vincula, aqu´ estar´ registrado.
ı a
Mensajes. Es el lugar en donde se ponen los anuncios que se ponen en el
lugar central y superior del sitio, es en donde se puede describir para qu´ es
e
el sitio y a quien est´ dirigido
a
M´ dulos. Esta opci´ n permite gestionar los m´ dulos de PHP-Nuke
o o o
Bolet´n. Env´a por correo un bolet´n informativo a todos los usuarios regis-
ı ı ı
trados de PHP-Nuke
Optimize DB. Optimiza la base de datos de PHP-Nuke. Esta opci´ n debe
o
utilizarse cuando el sistema est´ muy lento
a
Rese˜ as. Es el lugar en donde se generan las p´ ginas de rese˜ as. Las rese˜ as
n a n n
pueden ser de equipo, de programas, pel´culas o cualquier otra cosa que se
ı
desee
Secciones. Aqu´ se dan de alta nuevas secciones de inter´ s para el foro
ı e
Preferencias. Es el lugar en donde se configura el sitio PHP-Nuke
Env´os. Aqu´ se revisan los env´os de las noticias que han escrito los usua-
ı ı ı
rios registrados
Encuestas. El lugar en donde se ponen las encuestas que ver´ n los visitantes
a
Temas. Permite agregar o quitar un tema de discusi´ n
o
Enlaces. Los enlaces o hiperv´nculos se administran aqu´
ı ı
Logout / Salir. Sale del sistema. Se puede utilizar para cambiar de cuenta
de usuario. Por ejemplo si se entra como administrador y luego se quiere
cambiar a un usuario regular se debe usar esta opci´ n.
o
18. 18 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
Como se puede observar son muchas las opciones que tiene el administrador.
Se ver´ n con detalle las m´ s importantes, sobre todo las enfocadas al proceso de
a a
edici´ n.
o
2.4.2. Alta de un nuevo editor/administrador
Los editores son los encargados de revisar y publicar las noticias. Para dar
de alta a uno de ellos, basta con ingresar en la opci´ n “Editar Admins”. Despu´ s
o e
del mensaje “Editar autores” aparece una primera secci´ n en donde se puede mo-
o
dificar la informaci´ n de los autores. Por ahora se dejar´ esa parte de lado y se
o a
avanzar´ en la creaci´ n de un nuevo autor pues, las opciones que se modifican son
a o
exactamente las mismas que se describir´ n a continuaci´ n.
a o
Lo primero que el sistema exige es el nombre del autor, que no podr´ ser a
cambiado despu´ s debido a que es la llave del campo de colaboraciones, y por lo
e
tanto no se puede cambiar debido a que se afectar´a la integridad del sistema. Lo
ı
que sigue es un apodo del autor, que es lo que aparecer´ en el sistema. Si no se
a
quiere utilizar un apodo, basta con escribir el mismo nombre que se puso en el
rengl´ n anterior.La cuenta de correo electr´ nico es otro requisito indispensable.
o o
De forma opcional, si el autor tiene una p´ gina web, se puede poner en el casillero
a
que dice URL.
La parte de los permisos es m´ s truculenta. ¿Qu´ derechos se le dar´ n al au-
a e a
tor? B´ sicamente los derechos est´ n divididos en capacidades de editar los art´cu-
a a ı
los, temas, usuarios, encuestas, secciones, enlaces, efem´ rides, faq, descargas, re-
e
se˜ as, boletines, foros, contenidos y enciclopedias. Finalmente, se le pueden con-
n
ceder todos los derechos de la cuenta de administrador si se selecciona el casillero
19. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 19
“S´ per usuario”. Es posible que un autor tenga una o m´ s atribuciones dependien-
u a
´
do de la cantidad de casillas marcadas. La unica que no es conveniente combinar
con otras es “S´ per usuario” porque, en el momento de tener los derechos com-
u
pletos, agregar otra opci´ n carece de sentido.
o
Finalmente se escribe la contrase˜ a que utilizar´ el autor para ingresar al sis-
n a
tema y se env´a con el bot´ n “A˜ adir autor”.
ı o n
2.4.3. Revisi´ n de noticias enviadas por los usuarios
o
Para continuar con la l´ gica seguida en la parte anterior, se ver´ la parte en
o a
donde el administrador revisa que alguien ha enviado una noticia y la publica.
Para ello, el administrador debe ingresar a la opci´ n que dice “Env´os”. All´ le
o ı ı
aparecer´ n todas las noticias que han enviado los usuarios, en ese punto puede e-
a
ditarlas o borrarlas dependiendo del inter´ s que tenga en ellas la comunidad virtual
e
que se quiere formar.
Si el administrador decide editar la noticia para publicaci´ n simplemente la
o
selecciona con el rat´ n. En la pantalla de edici´ n de la noticia se le puede enviar
o o
al usuario un correo electr´ nico o un mensaje a trav´ s de PHP-Nuke. Esto es util
o e ´
en el caso de que haya dudas sobre el material publicado o se busque ampliar la
informaci´ n.
o
Durante la edici´ n del art´culo, se puede modificar el nombre del autor, el t´tu-
o ı ı
lo y el art´culo en s´ mismo. Tambi´ n se puede modificar cambiar la “categor´a”
ı ı e ı
20. 20 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
con lo cual se puede evitar que el art´culo aparezca en la portada. Para ello es ne-
ı
cesario inventar una nueva categor´a y ello se puede hacer en el momento en que
ı
se est´ editando una colaboraci´ n seleccionando la opci´ n “A˜ adir” que est´ justo
a o o n a
delante de las categor´as. A continuaci´ n hay una pregunta que que dice “¿Publi-
ı o
car en la p´ gina de inicio?”. Esta pregunta est´ condicionada a la categor´a. Si se
a a ı
selecciona “No”, dejar´ de aparecer en la portada siempre y cuando la colabora-
a
ci´ n no pertenezca a la categor´a “Art´culos”.
o ı ı
La siguiente pregunta dice “¿Se activan los comentarios para este art´culo?”ı
Esto sirve para permitir, o no, que los usuarios pongan sus comentarios al art´culo.
ı
Para crear un foro de discusi´ n a partir de un art´culo es necesario contestar “Si”.
o ı
Luego se puede editar el “Texto de la noticia” que es lo que aparece en el
primer momento de consultar. Es el contenido del art´culo. El texto extendido se
ı
usa si el art´culo es muy grande y se requiere de m´ s espacio que un p´ rrafo.
ı a a
Las notas permiten al editor poner comentarios acerca de la colaboraci´ n en- o
viada por el usuario. Quiz´ puede ser utilizado para moderar la opini´ n del cola-
a o
borador o para dar un punto de vista “editorial” con respecto a la colaboraci´ n. o
Es posible programar la noticia. Es decir no publicarla inmediatamente sino
´
hasta cierta hora o d´a. Esto es util cuando se prepara un anuncio especial que
ı
debe ser publicado a partir de cierto momento.
Finalmente se puede elegir entre las opciones vista previa, para ver c´ mo va a
o
salir publicada la noticia, borrar, para borrarla y enviar para publicarla inmediata-
mente o de acuerdo con el calendario de programaci´ n anteriormente descrito.
o
Hay algo adicional. A cada colaboraci´ n se le puede anexar una encuesta. Es
o
decir, se puede hacer una votaci´ n quiz´ sobre el contenido de la noticia o sobre
o a
el tema tratado por ella. Llenarla es muy simple: basta poner la pregunta y hasta
doce opciones posibles.
2.4.4. Como escribir un art´culo
ı
De la misma forma que un usuario puede escribir un art´culo, el administrador
ı
puede ingresar al formulario de “Nuevo art´culo”. All´ encontrar´ exactamente las
ı ı a
mismas opciones que encontr´ cuando edit´ el art´culo de un usuario com´ n. La
o o ı u
diferencia fundamental es que el editor publica inmediatamente la nota sin nece-
sidad de ninguna aprobaci´ n. Este poder debe ser usado con mucho cuidado pues
o
la inmediatez del acto de la publicaci´ n tiene por desventaja la falta de reflexi´ n.
o o
Desde el punto de vista t´ cnico no hay mucho que hacer, sin embargo, se puede
e
formar un “comit´ editorial” que discuta los temas por publicar y que el editor
e
se abstenga de poner notas utilizando esta opci´ n. Si un editor va a escribir una
o
21. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 21
nota, deber´ ingresar al sistema como un usuario normal y ponerlo a disposici´ n
a o
de dicho comit´ editorial del cual, quiz´ , tambi´ n forme parte, tal como se vi´ en
e a e o
la secci´ n 2.4 de la p´ gina 14.
o a
2.4.5. La creaci´ n de la comunidad virtual
o
Una vez habilitado el foro, es necesario invitar a los integrantes de la comu-
nidad virtual. Hay comunidades que crecen solas debido al inter´ s com´ n de un
e u
tema en espec´fico, sin embargo, hay otras que son forzadas, como pueden ser los
ı
talleres virtuales obligatorios para aprobar una asignatura.
Para invitar a un nuevo miembro al foro, basta con darle la direcci´ n internet
o
en donde est´ ubicada la p´ gina web. Por ejemplo, en nuestro caso, la p´ gina web
a a a
de este curso est´ en http://curso.ajusco.upn.mx.
a
El proceso de registro es simple, pero se requiere de que el usuario tenga una
cuenta de correo. Si no la tiene, no es problema, ind´quele que obtenga una cuenta
ı
gratuita en alg´ n portal de su preferencia. Se puede proponer obtener una cuenta
u
en http://mail.yahoo.com que tiene un excelente servicio y muy buen trato, aunque
habr´ quien prefiera http://www.hotmail.com, http://www.starmedia.com o alg´ n
a u
otro sitio menos conocido. Es algo al gusto del usuario y que deber´ decidir por
a
s´ mismo. Una vez que tenga una cuenta de correo, deber´ registrarse en la caja
ı a
que dice “Login” y all´ seleccionar la liga que dice “crearte una cuenta”. Una vez
ı
que se termine de rellenar el formulario, el usuario recibir´ por correo electr´ nico
a o
su contrase˜ a.
n
Un usuario con cuenta en nuestra comunidad virtual tiene permiso de escribir
una colaboraci´ n o participar en un foro. Tambi´ n puede modificar el aspecto
o e
visual de la p´ gina web, seleccionando un tema y hacer cambios b´ sicos en su
a a
cuenta tales como cambiar su contrase˜ a o la direcci´ n de su p´ gina web.
n o a
´
Mantener una comunidad virtual es una labor ardua pues requiere de un cuida-
doso contacto con cada uno de sus miembros. Escuchar sus inquietudes y actuar
en consecuencia. Una comunidad virtual insatisfecha se dispersa al primer inci-
dente. Es por ello que el administrador debe conducir los comentarios vertidos en
el foro y, si as´ lo considera, moderar aquellos comentarios que pueden destruir o
ı
lastimar a la comunidad.
A continuaci´ n se enlistan algunos consejos de car´ cter general que pueden
o a
contribuir a formar y mantener una comunidad virtual
Cuando se quiera iniciar la comunidad virtual, es conveniente invitar a un
22. 22 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
grupo de personas que compartan un inter´ s com´ n y manifestar los objeti-
e u
vos, metas y alcance del grupo
Poner material atractivo para la comunidad (software, documentos, gr´ ficas,
a
m´ sica y cualquier otro que sea pertinente en ese n´ cleo social)
u u
Moderar las pol´ micas que puedan fracturar a la comunidad
e
Proponer un conjunto de reglas de comportamiento
Dar una respuesta r´ pida a las contribuciones que lleguen a los editores.
a
As´ sea una respuesta negativa es necesario tratarlo con tacto
ı
Fomentar la sensaci´ n de pertenencia a una comunidad
o
2.4.6. Configuraci´ n inicial
o
Una vez que se ha tomado la decisi´ n de utilizar PHP-Nuke para crear un
o
foro, lo primero que se debe hacer es explicar el porqu´ del foro y seleccionar la
e
imagen visual de nuestra comunidad. Puede ser conveniente incluir las im´ genes
a
que identifiquen a nuestra instituci´ n y a nuestro grupo de trabajo.
o
Una vez redactada la explicaci´ n de la existencia del foro, es muy simple
o
ponerla en la portada. Escoja la opci´ n “Mensajes” y all´ aparece el mensaje inicial
o ı
cuyo t´tulo es “New ML message system”, b´ rrelo con la liga que dice “borrar” y
ı o
cree un mensaje nuevo con la justificaci´ n de la existencia del foro. Ese mensaje
o
puede estar escrito con HTML y contener alguna ilustraci´ n si as´ se quiere. En la
o ı
o a o ´
pr´ xima parte se ver´ c´ mo hacer esto pero, por ahora, nos limitaremos a escribir
un texto simple. Por ejemplo
Este es un foro dedicado a discutir temas acerca del uso de PHP-
Nuke para la creaci´ n de foros, noticieros y conversaciones en el
o
internet como una herramienta para la educaci´ n a distancia y la inte-
o
graci´ n de comunidades virtuales.
o
Como es la presentaci´ n del foro, se puede poner en el rengl´ n “Caducidad” la
o o
opci´ n “Ilimitado”, es decir que este mensaje siempre aparecer´ en la portada de
o a
nuestro foro. Tambi´ n es necesario indicar que los que pueden ver esto es “Todo el
e
mundo” y que ese mensaje estar´ activo. Con esto hemos creado una mini-portada
a
que explica el objetivo del foro.
La otra configuraci´ n indispensable se hace a trav´ s de la opci´ n “Preferen-
o e o
cias” Las opciones all´ disponibles son las siguientes
ı
23. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 23
Informaci´ n general del sitio
o
• Nombre del sitio
• URL del sitio
• Logotipo del sitio
• Eslogan del sitio
• Fecha de inicio del sitio
• E-mail del administrador
• N´ mero de art´culos en la p´ gina Top
u ı a
• N´ mero de noticias en la p´ gina de inicio
u a
• Noticias en la caja de noticias anteriores
• ¿Activar Ultramode?
• Permitir env´os an´ nimos
ı o
• Tema por defecto del sitio
• Seleccionar idioma para el sitio
• Formato de tiempo local
Opciones para multi-idiomas
• Activar opciones multi-idiomas
• Mostrar banderas en vez de opciones de texto
Opciones de banners
• ¿Activar banners en tu sitio?
Mensajes de pie de p´ gina
a
• Pie de p´ gina 1
a
• Pie de p´ gina 2
a
• Pie de p´ gina 3
a
Configuraci´ n del backend
o
• T´tulo del backend
ı
24. 24 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
• Idioma del backend
Enviar nuevas noticias al administrador
• ¿Notificar por e-mail los nuevos env´os?
ı
• E-mail para enviar el mensaje
• Asunto del e-mail
• Mensaje del e-mail
• Cuenta del e-mail
Moderaci´ n de los comentarios
o
• Tipo de moderaci´ n
o
Opci´ n de los comentarios
o
• L´mite en bytes de los comentarios
ı
• Nombre del an´ nimo
o
Opciones gr´ ficas
a
• Men´ gr´ fico de administraci´ n
u a o
Opciones variadas
• Activar referencias de p´ ginas
a
• ¿Cu´ ntas referencias quiere como m´ ximo?
a a
• Activar comentarios en las encuestas
• Activar comentarios en los art´culos
ı
Opciones de usuarios
• Tama˜ o m´nimo de la contrase˜ a de usuario
n ı n
• Activar los mensajes generales
• Activar el lector de encabezados
• ¿Permitir que los usuarios modifiquen el n´ mero de noticias de porta-
u
da?
25. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 25
Opciones de censura
• Modo de censura
• Reemplazar las palabras censuradas con
Opciones del servicio de correo web
• Pie de mensaje que ser´ anexado a todos los correos enviados
a
• ¿Permitir que los usuarios env´en correos?
ı
• ¿Permitir que los usuarios env´en anexos?
ı
• Directorio temporal para los anexos
• ¿Permitir que los usuarios vean/lean anexos?
• Directorio temporal para los anexos recibido
• N´ mero m´ ximo de cuentas
u a
• ¿Este servicio estar´ basado en una sola cuenta?
a
• Nombre de la cuenta por omisi´ n
o
• Servidor de correo POP3 por omisi´ n
o
• Directorio de im´ genes de correo por omisi´ n
a o
• ¿Filtrar el encabezado cuando se redirija un mensaje?
Guardar cambios
De todas estas opciones, por ahora modificaremos unas cuantas para ver c´ mo o
se comporta PHP-Nuke. Hay algunas que son inmediatas como por ejemplo el
nombre del sitio, en donde simplemente escribiremos “Taller de creaci´ n de foros,
o
noticias y conversaciones con PHP-Nuke”. Otras como “URL del sitio” pueden
parecer m´ s misteriosas. En particular, el URL del sitio es http://curso.ajusco.upn.mx
a
y representa la direcci´ n de Internet del sitio PHP-Nuke que se est´ administran-
o a
do. Logotipo del sitio no la tocaremos por ahora puesto que a´ n no sabemos c´ mo
u o
colocar un archivo gr´ fico en PHP-Nuke. Eslogan del sitio podr´a ser “Creando
a ı
comunidades virtuales para la educaci´ n” o “Educar para trastornar” o “Sufragio
o
´
efectivo, no reelecci´ n”. Fecha de inicio del sitio unicamente sirve como referen-
o
cia, as´ que por ejemplo, se puede poner “Noviembre del 2001”. El E-mail del
ı
administrador es muy importante y es el lugar en donde se reportan las quejas,
fallas o defectos que haya en el sitio. En este caso debe ser “yo@upn.mx”.
26. 26 ´ ´
CAPITULO 2. ADMINISTRACION DE UN FORO
Luego hay otras opciones menos inmediatas que, por ahora, simplemente se
ignorar´ n. Si se contin´ a entonces con la opci´ n “Permitir env´os an´ nimos”. Esto
a u o ı o
quiere decir que cualquier visitante, aunque no est´ registrado puede enviar una
e
noticia a nuestro foro. Dicho env´o no ser´ publicada sin la anuencia del adminis-
ı a
o ´
trador. Esta opci´ n es util cuando se quiere hacer un foro lo m´ s abierto posible
a
pues permite el anonimato de los colaboradores.
El tema por defecto del sitio permite hacer modificaciones visuales al aspecto
del foro. Por ahora se dejar´ sin cambio. El idioma para el sitio es buena idea que
a
sea el espa˜ ol. El formato de tiempo local debe ser “sp MX” para M´ xico. Por lo
n e
pronto, las opciones multi-idiomas deber´ n ser desactivadas pero, en el futuro, es
a
posible activarlas y, con algo de trabajo, incorporar idiomas tales como el Tzotzil,
el Maya o el N´ huatl. El problema es que habr´ que escribir las traducciones de
a a
los mensajes a dichos idiomas. Por ahora s´ lo hay traducciones del PHP-Nuke a
o
´
las lenguas europeas, al arabe y a algunos idiomas orientales.
Los banners se utilizan en los sitios comerciales, por ahora se ignorar´ pora
completo esta parte.
Los mensajes al pie de p´ gina sirven para poner informaci´ n general sobre el
a o
sitio. En lo personal lo primero que hago es borrar los que est´ n escritos en un
a
PHP-Nuke nuevo pues no se ve gran utilidad en publicitar el sistema en el que
est´ desarrollado el foro.
a
El backend es una opci´ n avanzada que se ver´ en la secci´ n 4.3.5 y sirve para
o a o
intercambiar informaci´ n con otros sitios.
o
Las opciones por defecto de los weblinks o hiperv´nculos tambi´ n se comen-
ı e
tar´ n en una secci´ n posterior (4.22).
a o
El env´o de noticias al administrador es muy importante. La opci´ n de noti-
ı o
ficar por e-mail los nuevos env´os sirve para que, si se tiene un foro, se avise de
ı
inmediato, v´a correo electr´ nico, si hay una nueva colaboraci´ n pendiente. Esto
ı o o
agiliza la publicaci´ n de noticias pues algunas personas consultan su correo va-
o
rias veces al d´a, pero no pueden estar mirando cada cinco minutos si ya lleg´ una
ı o
nueva colaboraci´ n. El E-mail para enviar el mensaje es la cuenta de correo del
o
administrador o editor a quien llegar´ el aviso del arribo de una nueva colabora-
a
ci´ n. El “asunto del e-mail” nos permite seleccionar el encabezado del correo que
o
se recibir´ , el mensaje es lo que dir´ el correo y la cuenta del e-mail es el nombre
a a
del usuario que se ve que env´a el correo, por ejemplo, “El fantasma del foro”
ı
podr´a ser un buen remitente.
ı
La moderaci´ n de comentarios es un tema muy interesante. Si el foro es abier-
o
to y se permite que los usuarios an´ nimos participen, se presta a que haya abuso
o
por parte de ellos. Alguien que se dedique a insultar a los dem´ s puede causar
a
27. 2.4. EL PUNTO DE VISTA DEL ADMINISTRADOR 27
grandes da˜ os en la cohesi´ n interna del grupo. Por ello es necesario activar la
n o
moderaci´ n dentro de un foro si se permite el ingreso de usuarios an´ nimos o si
o o
no se tiene entera confianza en los participantes.
En las opciones para los comentarios se puede limitar el tama˜ o de las res-
n
puestas dentro de un foro 4096 bytes es m´ s o menos una cuartilla. Cada byte,
a
para aclarar, es una letra, un espacio o cualquier otro s´mbolo. El “Nombre del
ı
an´ nimo” es la forma en c´ mo aparecer´ n los usuarios no registrados que parti-
o o a
cipen en una discusi´ n. “An´ nimo” es buena idea, pero se pueden poner nombres
o o
m´ s divertidos como “El tercer tirador”, “El hombre sin rostro”, “La sombra del
a
caudillo” o lo que su imaginaci´ n le aconseje.
o
La opci´ n “Men´ gr´ fico de administraci´ n” hace m´ s agradable la adminis-
o u a o a
traci´ n del PHP-Nuke al mostrar, de forma gr´ fica y agradable, las posibilidades
o a
del administrador.
En cuanto a las opciones variadas, el n´ mero de art´culos en administraci´ n
u ı o
depende del gusto del editor y de la cantidad de noticias que se publiquen en el
foro. Son las noticias que son visibles por el administrador. El tama˜ o m´nimo de
n ı
la contrase˜ a de usuario ayuda a evitar contrase˜ as obvias como “A”, “1” que son
n n
fuente de problemas de seguridad. Cinco es un buen n´ mero, pero entre mayor
u
sea, mayor ser´ la incomodidad de los usuarios.
a
La activaci´ n de comentarios en las encuestas y art´culos son una cuesti´ n de
o ı o
gusto personal del administrador. Act´velas si lo considera necesario.
ı
Finalmente, para que el sistema acepte sus modificaciones, deber´ presionar
a
el bot´ n “Guardar cambios”. Con esto se tiene ya un buen panorama de las po-
o
sibilidades de PHP-Nuke pero es necesario aprender a manejar mejor algunos
aspectos t´ cnicos de la formaci´ n de p´ ginas web para obtener mayor provecho
e o a
de las capacidades de este sistema. Por ello, a continuaci´ n se presenta el cap´tulo
o ı
sobre c´ mo hacer p´ ginas web, llamado “Edici´ n con HTML”. Con estas bases,
o a o
aprovechar mejor el PHP-Nuke.
30. 30 ´ ´
CAPITULO 3. EDICION CON HTML
3.1. ¿Qu´ es HTML?
e
HTML significa, por sus siglas en ingl´ s, Lenguaje de Marcado para Hipertex-
e
tos. Y es una forma muy sencilla de comunicarle a una computadora la manera en
que se quiere que aparezca un texto. Por ejemplo, si queremos escribir una frase en
cursivas, simplemente escribimos <I>Esto est´ en cursivas</I> y aparecer´ de
a a
esa manera.
En general las marcas de HTML son de la siguente forma
<NOMBRE_DE_LA_MARCA PROPIEDADES ... >
para terminar una marca, simplemente se escribe
</NOMBRE_DE_LA_MARCA>
cuando se termina una marca, no es necesario repetir las propiedades que se
indicaron al principio de ella.
Hay otro tipo de c´ digos que se ponen en el HTML, son los llamados meta-
o
caracteres. Por ejemplo, para poner una a acentuada, se puede escribir á o
´
bien, directamente la letra a. En general es mejor idea escribir los acentos con esta
simbolog´a ya que en otros sistemas, como en MS-DOS o Macintosh, los acentos
ı
escritos en forma directa se ven incorrectamente. Esto se debe a que en el internet
se utiliza la norma ISO-8859-1 que son los caracteres del alfabeto latino occiden-
tal. En MS-DOS se inventaron su propia norma que no coincide con este est´ ndard
a
y en Macintosh sucede algo similar. As´ que si se escribe un acento directamente
ı
en MS-DOS lo m´ s probable es que no coincida con el acento adecuado en ISO-
a
8859-1. Sin embargo, si utiliza un editor cualquiera en Linux o en Windows, los
acentos se codifican en dicha norma y, en general, funcionar´ n correctamente.
a
Los metacaracteres tienen la siguiente estructura:
&nombre_del_metac´racter;
a
el s´mbolo “&” o ampersand como se le conoce en ingl´ s, el nombre del me-
ı e
tac´ racter y el punto y coma “;” para terminar la indicaci´ n de que se ha insertado
a o
un car´ cter especial.
a
Hasta ahora se ha hablado de c´ mo es la estructura de los s´mbolos. Ahora se
o ı
hablar´ del orden que deben seguir. Para comenzar cualquier p´ gina de Internet es
a a
conveniente escribir lo que sigue
31. 3.2. PRIMEROS PASOS (NEGRITAS, CURSIVAS, TACHADAS) 31
<HTML>
<HEAD>
<TITLE>T´tulo de la p´gina</TITLE>
ı a
</HEAD>
<BODY>
.... Aqu´ va el contenido de la p´gina ...
ı a
</BODY>
</HTML>
Como se puede observar, para cada marca que se inicia, se debe tener una
marca correspondiente que indique que all´ termina.
ı
3.2. Primeros pasos (negritas, cursivas, tachadas)
Una de las primeras cosas que se necesita hacer para formar un texto es saber
c´ mo escribir en negritas, cursivas y otros atributos simples de las letras.
o
Por ejemplo, para escribir <B>Este texto est´ en negritas</B> se debe en-
a
cerrar el texto que se quiere en negritas entre los s´mbolos <B> y </B>. Las
ı
negritas en ingl´ s son el tipo “bold”, de ah´ la abreviatura <B>. En el caso de
e ı
las cursivas, llamadas por los angloparlantes “italics”, se escribe de la siguiente
forma <I>el texto en cursivas</I>. A continuaci´ n se enlistan los atributos de
o
manipulaci´ n de texto simple:
o
<B> Negritas
<EM> ´
Enfasis
<I> Cursivas
<U> Subrayado
<TT> Tipo de m´ quina de escribir (Courier)
a
Recuerde que, para terminar de utilizar cada uno de ellos debe cerrar con
</marca>.
32. 32 ´ ´
CAPITULO 3. EDICION CON HTML
3.3. C´ mo hacer una p´ gina web simple
o a
Para crear una p´ gina web en Windows, abra el block de notas desde el bot´ n
a o
“Inicio”, “Archivos de programas”, “Accesorios” y “Block de notas”. Una vez
que aparece el block de notas, escriba el texto de la actividad siguiente y, cuando
termine, seleccione el men´ “Archivo”, “Guardar como” y escriba prueba.html
u
que es el nombre de la p´ gina web reci´ n creada.
a e
Para ver los resultados simplemente presione un doble click sobre el bot´ n o
izquierdo del mouse encima del documento que acaba de crear que muy proba-
blemente se encuentre en la carpeta “Mis documentos”.
´
Actividad: Mi primera pagina web
Escriba una breve carta como la siguiente:
Querida abuelita:
Te escribe tu nieto <B>Juan</B>,
el hijo de Emilio para contarte que
acabo de ingresar a una Universidad
maravillosa, la Universidad Pedag´gica o
Nacional. Est´ en un sitio formidable,
a
al pie del Ajusco. Por eso todo el a˜o n
es un sitio verde y fresco.
Tu nieto que te quiere
Juan
Observe que la palabra “Juan” aparece en negritas puesto
que le hemos indicado al navegador que as´ lo haga utili-
ı
zando las marcas <B> y </B>. Tambi´ n notar´ que, a´ n
e a u
cuando haya puesto suficientes espacios entre los renglones,
el navegador mostrar´ todo el texto en una sola l´nea. Esto
a ı
se debe a que el navegador necesita de ciertas ordenes es-
peciales para saltar de rengl´ n, tema que veremos un poco
o
m´ s adelante.
a
3.4. Estructura jer´ rquica del HTML
a
´
El texto escrito en HTML puede tener una estructura jer´ rquica. Esto se con-
a
sigue utilizando unas marcas especiales conocidas como encabezados: <H1>,
33. ´ ´
3.5. PARRAFOS Y SALTOS DE LINEA 33
<H2>, <H3>, . . ., <H9>. Los encabezados dan un nivel de importancia a cada
uno de los t´tulos de un documento.
ı
As´, para poner un encabezado de primer nivel basta con escribir
ı
<H1>Este es un encabezado de primer nivel</H1>
En el ejemplo siguiente se pueden observar cambios de tama˜ o dependientes
n
del nivel del encabezado utilizado.
Si se escribe, se obtiene
<H1>Este es un encabezado de primer nivel</H1>
Este es un encabezado de primer nivel
<H2>Este es uno de segundo nivel</H2> Este es uno de segundo nivel
...
... Este es uno de noveno nivel
<H9>Este es uno de noveno nivel</H9>
´ ´
Actividad: Vision jerarquica
Elabore una p´ gina web en donde se muestren todos los
a
niveles jer´ rquicos del 1 al 9.
a
3.5. P´ rrafos y saltos de l´nea
a ı
Un texto continuo por mucho tiempo es demasiado aburrido para poderse leer.
Para eso sirven los p´ rrafos. En HTML los p´ rrafos se separan con las marcas
a a
<P> y </P>. Con estas marcas, los p´ rrafos se separan unos de otros. Esta es una
a
de las marcas en donde se puede obviar el fin de marca. Es decir, basta con escribir
<P> al final del p´ rrafo para conseguir la separaci´ n deseada, sin necesidad de
a o
cumplir toda la norma.
Para interrumpir una l´nea en un punto determinado antes de que termine au-
ı
tom´ ticamente el rengl´ n, es necesario utilizar la marca de ruptura de rengl´ n
a o o
<BR>. Esto suele utilizarse, por ejemplo, cuando se escribe una poes´a,ı
El siguiente c´ digo HTML...
o produce este resultado:
<P>
´rase
E un hombre a una nariz pegado,<BR> ´rase
E un hombre a una nariz pegado,
´rase
e una nariz superlativa,<BR> ´rase
e una nariz superlativa,
´rase
e una nariz say´n y escriba,<BR>
o ´rase
e una nariz say´n y escriba,
o
´rase
e un peje espada muy barbado.</P> ´rase
e un peje espada muy barbado.
<P>Francisco de Quevedo</P> Francisco de Quevedo
34. 34 ´ ´
CAPITULO 3. EDICION CON HTML
La etiqueta <BR> indica que el rengl´ n debe romperse. A´ n cuando este
o u ´
forme parte de un p´ rrafo. Esta marca tampoco requiere terminaci´ n.
a o
3.5.1. Alineaci´ n de textos y p´ rrafos
o a
Para centrar un texto se puede escribir
<CENTER>Texto centrado</CENTER>
Hay otros trucos de manipulaci´ n de texto que no siempre funcionan, por
o
ejemplo, <P ALIGN = “RIGHT”> alinea un texto a la derecha y <P ALIGN
= “JUSTIFY”> lo ajusta a ambos m´ rgenes. Por supuesto que <P ALIGN =
a
“LEFT”> funciona como se supone deber´a funcionar: hace que el texto est´ ali-
ı e
neado a la izquierda. Desafortunadamente estos efectos no siempre son visibles
en todos los navegadores.
3.6. Hiperv´nculos o hiperligas
ı
El poder del HTML no es la generaci´ n de textos mal o bien formados sino
o
la posibilidad de enlazar textos hacia textos o gr´ ficos o cualquier otro material
a
audiovisual. Esta capacidad se consigue mediante los hiperv´nculos.
ı
Para hacer un hiperv´nculo, es necesario escribir lo siguiente
ı
<A HREF="otrodocumento.html">Otro documento</A>
Observe que la etiqueta <A>, como muchas otras etiquetas de HTML, debe
estar terminada con una etiqueta </A>. La propiedad m´ s importante de <A>
a
es HREF, Hyperlink Reference o referencia a hiperv´nculo, que indica en d´ nde
ı o
est´ el documento que se pretende alcanzar cuando se acciona esta liga. El conte-
a
nido del HREF debe ser un URL Uniform Resource Locator o Localizador Uni-
forme de Recursos, es decir que sigue un formato especial. Ese formato especial
es muy simple pues puede ser s´ lo el nombre de un archivo ubicado en la misma
o
computadora, como en el ejemplo anterior, o un recurso localizado en cualquier
lugar del internet, si se pone el protocolo de comunicaci´ n que se est´ usando, por
o a
ejemplo,
<A HREF="http://www.upn.mx/index.html">P´gina Web de la UPN</A>
a
35. ´
3.6. HIPERVINCULOS O HIPERLIGAS 35
indica que el documento est´ en un lugar del internet. Este es el poder del
a
HTML: es muy sencillo invocar p´ ginas u otras entidades dentro o fuera de nues-
a
´
tro ambito. La primera parte, la que dice http, es la abreviatura de Hyper Text
Transfer Protocol o protocolo de transferencia de hipertexto. Esto indica que se
deben utilizar los recursos de comunicaci´ n externa del navegador para encontrar
o
el sitio y luego sigue la ruta completa en donde se encontrar´ el archivo que se
a
quiere ver. En este caso, index.html.
3.6.1. Estructura de directorios e hiperv´nculos
ı
Desde la d´ cada de los sesenta, cuando se invent´ el sistema operativo Unix,
e o
se busc´ una forma de guardar la informaci´ n de manera estructurada. El sistema
o o
n´ ´
de archivos que se dise˜ o en ese entonces se comporta como una estructura arbo-
´
rea, es decir como un arbol con su ra´z, ramas y subramas. De hecho, el primer
ı
directorio de un sistema de archivos se le conoce como “directorio ra´z”. A las
ı
ramas se les conoce como “carpetas”, “f´ lders”, o “subdirectorios”. Esta idea de
o
estructura ha sobrevivido a lo largo de cuarenta a˜ os y a´ n hoy en d´a se sigue
n u ı
utilizando, como en el siguiente ejemplo, en donde se puede observar el aspecto
´
de un arbol de directorios en el sistema operativo Windows.
Los hiperv´nculos utilizan esa misma estructura de subdirectorios. Por ejem-
ı
plo, si se quiere abrir un enlace a un archivo en la misma m´ quina, pero en otro
a
subdirectorio, se puede escribir
<A HREF="/directorio/subdirectorio/archivo.html">Archivo</A>
Esto tambi´ n constituye una referencia absoluta, pero que apunta al mismo
e
servidor en donde est´ la p´ gina actual.
a a
Finalmente, se pueden hacer hiperligas relativas al subdirectorio de donde se
est´ llamando a la otra liga:
a
36. 36 ´ ´
CAPITULO 3. EDICION CON HTML
<A HREF="subdirectorio2/archivo2.html">Archivo 2</A>
En general la estructura de una hiperliga o hiperv´nculo es la siguiente
ı
<A HREF=URL_a_donde_brincar>Texto o gr´fica que invoca a la hiperliga</A>
a
URL significa Uniform Resource Locator, que es, en espa˜ ol, localizador uni-
n
forme de recursos. Pero, para aclarar, es la forma de buscar un archivo dentro del
internet. Un URL puede ser cualquier direcci´ n o destino v´ lido en el Web.
o a
3.7. Gr´ ficos
a
Para incorporar gr´ ficos en una p´ gina web se utiliza la instrucci´ n
a a o
<IMG SRC="grafico.jpg">
la parte que est´ entrecomillada contiene un URL, es decir, puede ser el nom-
a
bre del archivo gr´ fico, si est´ en el mismo directorio que nuestra p´ gina, o bien,
a a a
una referencia absoluta o relativa a otro directorio o a un gr´ fico que se encuentre
a
en cualquier lugar del internet.
Si un gr´ fico se utiliza dentro de un hiperv´nculo, se pueden obtener p´ ginas
a ı a
web muy bonitas, sin embargo, habr´ un borde azul alrededor de la gr´ fica que,
a a
una vez utilizada la hiperliga, cambiar´ de color para transformarse en un halo
a
violeta. Para evitar ese borde, se puede escribir la llamada al gr´ fico de la siguiente
a
manera
<IMG SRC="grafico.jpg" BORDER="0">
Los gr´ ficos son colocados justo en el lugar en donde son invocados. Si nece-
a
sita poner un gr´ fico en un lugar preciso, es necesario recurrir a las funciones de
a
alineaci´ n descritas con anterioridad o al uso de tablas que dan un mejor control
o
sobre el posicionamiento dentro de una p´ gina web.
a
37. 3.8. LISTAS 37
´
Actividad: Un enlace grafico a la Universidad
Si se quiere poner un logotipo que conduzca directamen-
te a la p´ gina web de la Universidad, se puede escribir el
a
siguiente c´ digo:
o
<A HREF="http://www.upn.mx"><IMG
SRC="http://www.upn.mx/images/upn.gif"></A>
Si el logotipo queda con un borde azul se puede eliminar de
la siguiente forma
<A HREF="http://www.upn.mx"><IMG
SRC="http://www.upn.mx/images/upn.gif"
BORDER="0"></A>
Finalmente, si la imagen queda demasiado grande, puede
ajustar el tama˜ o como sigue
n
<A HREF="http://www.upn.mx"><IMG
SRC="http://www.upn.mx/images/upn.gif"
BORDER="0"WIDTH="50"></A>
El navegador ajustar´ autom´ ticamente el tama˜ o vertical.
a a n
Si se quisiera, por alg´ n motivo, deformar la imagen y po-
u
ner una altura distinta de la autom´ tica, se puede utilizar la
a
propiedad HEIGHT.
Algo que no se mencion´ es que los URLs distinguen la diferencia entre
o
may´ sculas y min´ sculas. As´ que tenga mucho cuidado con lo que escribe porque
u u ı
ABC no es lo mismo que abc.
3.8. Listas
´
Una estructura muy util es la lista. En HTML hay dos tipos de listas, las que
ponen un balazo a la izquierda y las que enumeran elementos. Para hacer una lista
con balazos se escribe
38. 38 ´ ´
CAPITULO 3. EDICION CON HTML
este c´ digo
o que genera este resultado
<UL> o Primer elemento
<LI>Primer elemento o Segundo elemento
<LI>Segundo elemento o Tercer elemento
<LI>Tercer elemento o Cuarto elemento
<LI>Cuarto elemento
</UL>
La marca </LI> no es obligatoria y, por ello, puede ser omitida. Si quiere que
en vez de una bolita salga otra cosa, puede escribir, por ejemplo
<UL TYPE="SQUARE">
<LI>Primer elemento
<LI>Segundo elemento
<LI>Tercer elemento
<LI>Cuarto elemento
</UL>
y entonces, en vez de mostrar balazos rellenos, mostrar´ cuadritos. Los tipos
a
posibles son
Tipo Significado
DISC El balazo relleno est´ ndard
a
CIRCLE El balazo hueco
SQUARE El cuadrado
Para que la lista sea enumerada u ordenada, se debe escribir
este c´ digo
o que produce este resultado
<OL> 1. Primero
<LI>Primero</LI> 2. Segundo
<LI>Segundo</LI> 3. Tercero
<LI>Tercero</LI> 4. Cuarto
<LI>Cuarto</LI>
</OL>
As´ como hay varios tipos de balazos, tambi´ n hay distintos tipos de numera-
ı e
ci´ n descritos en la siguiente tabla
o
39. 3.8. LISTAS 39
Tipo Significado
1 N´ meros ar´ bigos. Es el est´ ndard.
u a a
A Letras may´ sculas
u
a Letras min´ sculas
u
I N´ meros romanos en may´ sculas
u u
i N´ meros romanos en min´ sculas
u u
Por ejemplo
este c´ digo
o produce este resultado
<OL TYPE="i"> i. Primero
<LI>Primero</LI> ii. Segundo
<LI>Segundo</LI> iii. Tercero
<LI>Tercero</LI> iv. Cuarto
<LI>Cuarto</LI>
</OL>
Actividad: Listas dentro de listas
Escriba un archivo de HTML con el siguiente contenido y
explique el resultado
<UL TYPE=“CIRCLE”>
<LI>Pollo a la naranja
<OL TYPE=“i”>
<LI>Un pollo
<LI>Seis naranjas
</OL>
<LI>Omelette de queso
<OL TYPE=“i”>
<LI>Dos huevos
<LI>Queso Oaxaca
</OL>
</UL>
40. 40 ´ ´
CAPITULO 3. EDICION CON HTML
3.9. Tablas
Las tablas constituyen, hoy en d´a, uno de los elementos m´ s poderosos e
ı a
importantes para la formaci´ n de p´ ginas web.
o a
El ejemplo de la tabla m´ s sencilla, es la tabla de un s´ lo elemento que se
a o
escribir´a as´,
ı ı
<TABLE>
<TR><TD>Tabla con un solo elemento</TD></TR>
</TABLE>
Observe las nuevas marcas <TR> y <TD>. La primera marca sirve para
delimitar renglones, y la otra, delimita las columnas. Ahora haremos una tabla
m´ s interesante:
a
<TABLE>
<TR><TH>Lista de precios</TH></TR>
<TR><TH>Producto</TH><TH>Precio</TH></TR>
<TR><TD>Naranja dulce (gruesa de 36 naranjas)</TD>
<TD>26.90</TD></TR>
<TR><TD>Lim´n partido (kilo)</TD><TD>33.20</TD></TR>
o
</TABLE>
que producir´ el siguiente resultado:
a
Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas) 26.90
Lim´ n partido (kilo)
o 33.20
Una marca nueva que se ha introducido es <TH> que permite hacer un ele-
mento de tabla centrado y en negritas. La tabla, sin embargo, no se ve muy bien,
porque “Lista de precios” no est´ centrado en la tabla, as´ que se modificar´ n
a ı a
algunas cosas:
<TABLE>
<TR><TH COLSPAN="2">Lista de precios</TH></TR>
<TR><TH>Producto</TH><TH>Precio</TH></TR>
41. 3.9. TABLAS 41
<TR><TD>Naranja dulce (gruesa de 36 naranjas)</TD>
<TD>26.90</TD></TR>
<TR><TD>Lim´n partido (kilo)</TD><TD>33.20</TD></TR>
o
</TABLE>
COLSPAN=“2” permite expandir un elemento en dos columnas. As´ que el
ı
resultado ser´ el siguiente:
a
Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas) 26.90
Lim´ n partido (kilo)
o 33.20
Tambi´ n se puede escribir la propiedad ROWSPAN para unir filas. Si se sigue
e
el mismo ejemplo, y las naranjas cuestan igual que los limones, se puede escribir
la tabla de la siguiente manera:
<TABLE>
<TR><TH COLSPAN="2">Lista de precios</TH></TR>
<TR><TH>Producto</TH><TH>Precio</TH></TR>
<TR><TD>Naranja dulce (gruesa de 36 naranjas)</TD>
<TD ROWSPAN="2">26.90</TD></TR>
<TR><TD>Lim´n partido (kilo)</TD></TR>
o
</TABLE>
Con el siguiente resultado:
Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas)
29.90
Lim´ n partido (kilo)
o
Como se puede ver, cuando se usan las etiquetas de tabla <TH> y </TH> la
letra se pone en negritas y el texto queda centrado. En este caso, la tabla se ver´a
ı
mejor si alineamos a la izquierda el texto “producto”, esto se logra con la propie-
dad ALIGN=“LEFT” dentro del elemento de tabla en donde queremos conseguir
una alineaci´ n especial. As´, si ahora escribimos el siguiente c´ digo,
o ı o
42. 42 ´ ´
CAPITULO 3. EDICION CON HTML
<TABLE>
<TR><TH COLSPAN="2">Lista de precios</TH></TR>
<TR><TH ALIGN="LEFT">Producto</TH>
<TH ALIGN="LEFT">Precio</TH></TR>
<TR><TD>Naranja dulce (gruesa de 36 naranjas)</TD>
<TD ROWSPAN="2">26.90</TD></TR>
<TR><TD>Lim´n partido (kilo)</TD></TR>
o
</TABLE>
Obtenemos un resultado con mejor presentaci´ n
o
Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas)
29.90
Lim´ n partido (kilo)
o
Las propiedades de alineaci´ n s´ lo son tres: LEFT, CENTER y RIGHT. En
o o
algunos navegadores tambi´ n funciona JUSTIFY, pero debe evitarse para lograr
e
la m´ xima compatibilidad con otros programas de navegaci´ n.
a o
Por otro lado, tambi´ n hay propiedades de alineaci´ n vertical. Estas se obtie-
e o
nen utilizando la propiedad VALIGN, que controla alineaci´ n vertical. Las pro-
o
piedades de alineaci´ n vertical son tambi´ n tres TOP, MIDDLE y BOTTOM que
o e
son, respectivamente, arriba, enmedio y abajo. Pruebe poner, como ejercicio, el
29.90 alineado hacia arriba, enmedio y abajo.
En res´ men, un elemento de tabla puede tener las siguientes propiedades de
u
alineaci´ n
o
Propiedades de alineaci´ n
o
left izquierda
center centrado
Horizontal (ALIGN) right derecha
justify justificado
top arriba
Vertical (VALIGN) middle enmedio
bottom abajo
El verdadero poder de las tablas es cuando se combinan unas con otras. Es
decir, podemos poner tablas dentro de tablas. Por ejemplo, si escribe lo siguiente
43. 3.9. TABLAS 43
<TABLE>
<TR><TH COLSPAN="2">Men´ principal de Acme Corp.</TH></TR>
u
<TR><TD ALIGN="CENTER">
<TABLE>
<TR><TD>Productos</TD></TR>
<TR><TD>Precios</TD></TR>
<TR><TD>Promociones</TD></TR>
</TABLE>
</TD>
<TH ALIGN="LEFT">Portada</TH>
</TR>
</TABLE>
se obtendr´ un resultado como el que sigue
a
´
Menu principal de Acme Corp.
Productos
Precios Portada
Promociones
Este truco es muy popular en la construcci´ n de sitios web en donde se ha de-
o
cidido no utilizar marcos. Las tablas dentro de tablas es la forma m´ s poderosa de
a
organizaci´ n que tiene el HTML. Siempre habr´ novedades, pero la simplicidad
o a
de la estructura de una tabla dentro de otra permite lograr resultados espectacula-
res sin necesidad de mucho esfuerzo.
Una cosa m´ s: a veces es necesario ocultar los bordes de una tabla o hacerlos
a
m´ s grandes. Para eso se utiliza la propiedad BORDER que permite eliminar el
a
borde o hacerlo tan grueso como se quiera. En nuestro ejemplo anterior, podemos
hacer lo siguiente:
<TABLE BORDER="0">
<TR><TH COLSPAN="2">Men´ principal de Acme Corp.</TH></TR>
u
<TR><TD ALIGN="CENTER">
<TABLE BORDER="2">
<TR><TD>Productos</TD></TR>
<TR><TD>Precios</TD></TR>
<TR><TD>Promociones</TD></TR>
44. 44 ´ ´
CAPITULO 3. EDICION CON HTML
</TABLE>
</TD>
<TH ALIGN="LEFT">Portada</TH>
</TR>
</TABLE>
´
Menu principal de Acme Corp.
Productos
Precios Portada
Promociones
Como se puede observar, si una tabla no tiene la propiedad BORDER, en-
tonces autom´ ticamente supone que dicha propiedad tiene el valor 1. Es decir
a
que, si se omite la propiedad BORDER, el navegador supone que se quiere BOR-
DER=“1”.
Para tener un control preciso sobre el ancho de la tabla y de cada una de las
columnas, se debe utilizar la propiedad WIDTH que especifica la anchura de la
tabla o de la columna que la utiliza. A esta propiedad se le puede poner un n´ mero
u
de pixeles o puntos de pantalla, o bien, un porcentaje. Si se retoma uno de los
ejemplos anteriores, podr´amos escribir la tabla de la siguiente forma
ı
<TABLE WIDTH="100%">
<TR><TH COLSPAN="2">Lista de precios</TH></TR>
<TR><TH WIDTH="50%">Producto</TH>
<TH WIDTH="50%">Precio</TH></TR>
<TR><TD>Naranja dulce (gruesa de 36 naranjas)</TD>
<TD>26.90</TD></TR>
<TR><TD>Lim´n partido (kilo)</TD><TD>33.20</TD></TR>
o
</TABLE>
el resultado, como se puede observar, es una tabla que ocupa todo el espacio
disponible con columnas de anchos iguales.
Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas) 26.90
Lim´ n partido (kilo)
o 33.20