Curso de html y phpnuke

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

´
Indice general

1. Introducci´ n
o 7

2. Administraci´ n de un foro
o 9
2.1. Una primera mirada a PHP-Nuke . . . . . . . . . . . . . . . . . 9
2.2. El proceso de edici´ n de artćulos . . . . . . . . . .
o ı . . . . . . . 12
2.3. El punto de vista del usuario . . . . . . . . . . . . . . . . . . . . 12
2.3.1. Registro del usuario . . . . . . . . . . . . . . . . . . . . 12
2.3.2. Selecci´ n del idioma de la interfase . . . . .
o . . . . . . . 13
2.3.3. Escribir un artćulo . . . . . . . . . . . . . .
ı . . . . . . . 13
2.4. El punto de vista del administrador . . . . . . . . . . . . . . . . . 14
2.4.1. La pantalla del administrador . . . . . . . . . . . . . . . . 15
2.4.2. Alta de un nuevo editor/administrador . . . . . . . . . . . 18
2.4.3. Revisi´ n de noticias enviadas por los usuarios
o . . . . . . . 19
2.4.4. Como escribir un artćulo . . . . . . . . . . .
ı . . . . . . . 20
2.4.5. La creaci´ n de la comunidad virtual . . . . .
o . . . . . . . 21
2.4.6. Configuraci´ n inicial . . . . . . . . . . . . .
o . . . . . . . 22

3. Edici´ n con HTML
o 29
3.1. ¿Qu´ es HTML? . . . . . . . . . . . . . . . . .
e . . . . . . . . . 30
3.2. Primeros pasos (negritas, cursivas, tachadas) . . . . . . . . . . . . 31
3.3. C´ mo hacer una p´ gina web simple . . . . . . .
o a . . . . . . . . . 32
3.4. Estructura jer´ rquica del HTML . . . . . . . . .
a . . . . . . . . . 32
3.5. P´ rrafos y saltos de lńea . . . . . . . . . . . . .
a ı . . . . . . . . . 33
3.5.1. Alineaci´ n de textos y p´ rrafos . . . . . .
o a . . . . . . . . . 34
3.6. Hipervńculos o hiperligas . . . . . . . . . . . .
ı . . . . . . . . . 34
3.6.1. Estructura de directorios e hipervńculos .
ı . . . . . . . . . 35
3.7. Gr´ ficos . . . . . . . . . . . . . . . . . . . . . .
a . . . . . . . . . 36
3.8. Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

3

4 ´
INDICE GENERAL

3.9. Tablas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3.10. Comentarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.11. Tipos de letras . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.12. Estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.13. Temas que van m´ s all´ del objetivo de este curso
a a . . . . . . . . . 49

4. Instalaci´ n y configuraci´ n
o o 51
4.1. Instalaci´ n en Windows . . . . . . . . . . . . .
o . . . . . . . . . . 51
4.2. Instalaci´ n en Linux . . . . . . . . . . . . . .
o . . . . . . . . . . 55
4.2.1. RedHat 8.0 . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.2.2. Debian . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.3. Configuraci´ n detallada . . . . . . . . . . . . .
o . . . . . . . . . . 58
4.3.1. Informaci´ n general del sitio . . . . . .
o . . . . . . . . . . 58
4.3.2. Opciones multi-idiomas . . . . . . . . . . . . . . . . . . 61
4.3.3. Opciones de banners . . . . . . . . . . . . . . . . . . . . 61
4.3.4. Mensajes de pie de p´ gina . . . . . . .
a . . . . . . . . . . 61
4.3.5. Configuraci´ n del backend . . . . . . .
o . . . . . . . . . . 61
4.3.6. Enviar noticias al administrador . . . . . . . . . . . . . . 62
4.3.7. Moderaci´ n de comentarios . . . . . .
o . . . . . . . . . . 63
4.3.8. Opci´ n de comentarios . . . . . . . . .
o . . . . . . . . . . 63
4.3.9. Opciones gr´ ficas . . . . . . . . . . . .
a . . . . . . . . . . 64
4.3.10. Opciones variadas . . . . . . . . . . . . . . . . . . . . . 64
4.3.11. Opciones de usuarios . . . . . . . . . . . . . . . . . . . . 65
4.3.12. Opciones de censura . . . . . . . . . . . . . . . . . . . . 66
4.3.13. Opciones del servicio de correo web . . . . . . . . . . . . 67
4.4. Manejo de bloques . . . . . . . . . . . . . . . . . . . . . . . . . 69
4.5. A˜ adir bloques . . . . . . . . . . . . . . . . .
n . . . . . . . . . . 72
4.6. Manejo de archivos descargables o “downloads” . . . . . . . . . . 74
4.7. Editar admins . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
4.8. Editar usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
4.9. Enciclopedias . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
4.10. Efem´ rides . . . . . . . . . . . . . . . . . . .
e . . . . . . . . . . 79
4.11. FAQ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4.12. Foros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.13. HTTP Referers . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.14. Mensajes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
4.15. M´ dulos . . . . . . . . . . . . . . . . . . . . .
o . . . . . . . . . . 83
4.16. Boletń . . . . . . . . . . . . . . . . . . . . . .
ı . . . . . . . . . . 83

´
INDICE GENERAL 5

4.17. Optimize DB . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.18. Rese˜ as . . . . . . . . . . . . .
n . . . . . . . . . . . . . . . . . . 84
4.19. Secciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4.20. Encuestas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
4.21. El manejador de temas . . . . . . . . . . . . . . . . . . . . . . . 85
4.21.1. Creaci´ n de un tema . .
o . . . . . . . . . . . . . . . . . . 86
4.21.2. Borrado de un tema . . . . . . . . . . . . . . . . . . . . . 87
4.22. Manejo de enlaces o “weblinks” . . . . . . . . . . . . . . . . . . 88

5. PHP-Nuke en profundidad 91
5.1. SQL para principiantes . . . . . . . . . . . . . . . . . . . . . . . 91
5.2. Instalaci´ n de m´ dulos . . . . . . . . .
o o . . . . . . . . . . . . . . 91
5.3. Instalaci´ n y creaci´ n de temas gr´ ﬁcos
o o a . . . . . . . . . . . . . . 93
5.4. Respaldos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.5. Actualizaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.6. Consideraciones de seguridad . . . . . . . . . . . . . . . . . . . . 94

6. Bibliograf´a
ı 95

7. Ap´ ndices
e 97
7.0.1. Preguntas de diagn´ stico . . . . . . . . . . . . . . . . . .
o 97
7.0.2. Clones de PHP-Nuke y otros sitios de inter´ s . . . . . .
e 98
7.0.3. Glosario . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

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 ´ ´
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, ﬁnalmente c´ mo instalar y modiﬁcar 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

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ńculos 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 ´ ´
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ás: 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 dá 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ću-
o ı
los publicados mediante una clasificaci´ n arbitraria. Los temas son adicionales e
o
independientes de las secciones, esto quiere decir que cada artćulo 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ćulo. Esto le da un aspecto muy vivo a una p´ gina de
ı a
noticias. En versiones anteriores, PHP-Nuke traá 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ńculos 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ćulos
ı

Contenidos

Descargas

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-
ı
diﬁcar la estructura del PHP-Nuke, tema que sobrepasa el alcance de este taller.

12 ´ ´

2.2. El proceso de edici´ n de artćulos
o ı
En PHP-Nuke existen dos formas de publicar artćulos, 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ńculo
ı
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.

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ćulo.
ı ı

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ćulo
ı
Una vez que el usuario se registra, puede colaborar con un artćulo. Para ello
ı
debe buscar la opci´ n “Enviar noticia” que est´ en el men´ principal.
o a u

14 ´ ´

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ćulo 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ćulo 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ćulos enviados por los usuarios y
ı
publica sus propios artćulos. Puede, adem´ s publicar los mensajes especiales que
ı a
aparecen en portada. Para ingresar en modo de administraci´ n se debe escribir lo
o

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´ modiﬁcar 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 ´ ´

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


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á 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ń. Envá por correo un boletń 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ćulas 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ós. Aqu´ se revisan los envós 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ńculos 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 ´ ´

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á 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ću-
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


“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á 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ós”. 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ćulo, se puede modificar el nombre del autor, el t´tu-
o ı ı
lo y el artćulo en s´ mismo. Tambi´ n se puede modificar cambiar la “categorá”
ı ı e ı

20 ´ ´

con lo cual se puede evitar que el artćulo aparezca en la portada. Para ello es ne-
ı
cesario inventar una nueva categorá 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ás. 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á. 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á “Artćulos”.
o ı ı
La siguiente pregunta dice “¿Se activan los comentarios para este artćulo?”ı
Esto sirve para permitir, o no, que los usuarios pongan sus comentarios al artćulo.
ı
Para crear un foro de discusi´ n a partir de un artćulo 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ćulo. El texto extendido se
ı
usa si el artćulo 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á. 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ćulo
ı
De la misma forma que un usuario puede escribir un artćulo, el administrador
ı
puede ingresar al formulario de “Nuevo artćulo”. All´ encontrar´ exactamente las
ı ı a
mismas opciones que encontr´ cuando edit´ el artćulo 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


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

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
ı


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ćulos 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ós 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
a
a

Configuraci´ n del backend
o

• T´tulo del backend
ı

24 ´ ´

• Idioma del backend

Enviar nuevas noticias al administrador

• ¿Notificar por e-mail los nuevos envós?
ı
• 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ćulos
ı

Opciones de usuarios

• Tama˜ o mńimo 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?


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én correos?
ı
• ¿Permitir que los usuarios envén 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á 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 ´ ´

Luego hay otras opciones menos inmediatas que, por ahora, simplemente se
ignorar´ n. Si se contin´ a entonces con la opci´ n “Permitir envós 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ó 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ńculos tambi´ n se comen-
ı e
tar´ n en una secci´ n posterior (4.22).
a o
El envó de noticias al administrador es muy importante. La opci´ n de noti-
ı o
ficar por e-mail los nuevos envós sirve para que, si se tiene un foro, se avise de
ı
inmediato, vá 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á, 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á el correo, por ejemplo, “El fantasma del foro”
ı
podrá 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


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ćulos 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ńimo 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ćulos 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.

28 ´ ´

Cap´tulo 3
ı

Edici´ n con HTML
o

29

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

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

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õ 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ńea. 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>,

´ ´
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ńea
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ńea 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á,ı

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ń y escriba,<BR>
o ´rase
e una nariz sayń 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 ´ ´

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á 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ńculos 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ńculos.
ı
Para hacer un hipervńculo, 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ńculo, 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

´
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ńculos
ı
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á 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ńculos 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 ´ ´

<A HREF="subdirectorio2/archivo2.html">Archivo 2</A>

En general la estructura de una hiperliga o hipervńculo 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ńculo, 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

3.8. LISTAS 37

´
Actividad: Un enlace graﬁco 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
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
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 ´ ´

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 Signiﬁcado
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

3.8. LISTAS 39

Tipo Signiﬁcado
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 ´ ´

3.9. Tablas
Las tablas constituyen, hoy en dá, 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á 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ń 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>

3.9. TABLAS 41

<TD>26.90</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
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>
<TD ROWSPAN="2">26.90</TD></TR>
<TR><TD>Limń partido (kilo)</TD></TR>
o
</TABLE>

Con el siguiente resultado:

Lista de precios
Producto Precio
Naranja dulce (gruesa de 36 naranjas)
29.90
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á
ı
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 ´ ´

<TABLE>
<TR><TH ALIGN="LEFT">Producto</TH>
<TH ALIGN="LEFT">Precio</TH></TR>
<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
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 justiﬁcado
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

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

</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 especiﬁca 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 WIDTH="50%">Producto</TH>
<TH WIDTH="50%">Precio</TH></TR>
<TD>26.90</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
o 33.20

Curso de html y phpnuke

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Curso de html y phpnuke

Similar a Curso de html y phpnuke (20)

Último

Último (20)

Curso de html y phpnuke