INTRODUCCION
HTML -
Es bueno saber primero qué es
HTML -
Dinámico
Hagámoslo
muy fácil con los Web-Editores
Gráficos
Hyperlinks
Downloads
Y qué
hay con los Accesorios ? ? CGIs
Publicación
de su Website en la WWW...
NOTA PREVIA: Opción
para poder trabajar con el siguiente texto
cómodamente:
Guarde
esta página en su PC ( formato .htm): a)
Seleccione en los comandos "Guardar como";
b) En la ventanilla seleccione una carpeta de destino
deseada; c) déle un nombre al documento y presione
"OK". El documento quedará archivado en su
PC, para abrirlo de nuevo utilice el
Windows-Explorer.
INTRODUCCION
Construir una Website no es tan difícil
como algunos puedan creer. Ser un IT experto o tomar
cursos tampoco es necesario y mucho menos contratar
una empresa para que le elaboren su presencia en
Internet. En caso de una Website para fines
comerciales, hasta bien lejos se puede llegar sin
ayuda ajena, todo depende del resultado final deseado
y del tiempo que se quiera invertir en ello. Mi
propia Homepage es una de tipo "personal",
con ella no gano ningún dinero ni nadie tiene que
pagar alguna cosa o adquirir un compromiso comercial
conmigo por visitarla. Lo que he ganado y sigo
ganando son muchas horas de entretenimiento,
aprendizaje y satisfacción de compartir en cierta
forma muchas de las cosas que me gustan, y tener
todos los "links" que me interesan"a
la mano" agrupados y tan sólo al alcance de un
"click".
Estas notas explicarán mi propia
experiencia en la elaboración de mi Homepage, haré
también referencia a algunas opciones existentes
para la elaboración de Websites. Sin embargo, esas
otras opciones, a las que haré notar como
"opción alterna" no han sido comprobadas
por mi y aquellas personas que estén interesadas en
seguirlas se verán en la necesidad de probar por si
mismas las herramientas y los resultados.
Yo utilicé la ayuda de sencillos
manuales al comienzo. Después de tener los
fundamentos y haber escogido los instrumentos más
adecuados para crear mi Homepage, comencé a
trabajar. Con información básica de los manuales,
direcciones donde podía conseguir gratis el software
adecuado y un pequeño bosquejo de lo que queria
fuera mi Homepage me puse a buscar en la propia
computadora de casa qué software tenía ya
instalado. Descubrí que ya tenía todo lo que
necesitaba para seguir adelante sin obstáculos.
Sólo tiempo después cuando mi Homepage estaba
suficientemente lista para ser publicada en la World
Wide Web (WWW) tuve que pensar por qué vía la
haría: 1) a través de una plataforma gratuíta,
pero con el inconveniente de tener que mostrar
propaganda y otra serie de limitaciones o; 2)
Contratar un proveedor que me diera espacio en su
Servidor, con un paquete de ventajas y buena calidad
de servicio, pagando yo una muy pequeña suma. Al
final elegí la segunda opción y como último paso
entonces tuve que instalar un pequeño programa
adicional: FTP (File Transfer Protocol), suministrado
por mi proveedor de servicio y que también se puede
conseguir gratis en algunas direcciones de Internet.
El FTP es un programa de muy fácil utilización con
el que "transporto" los archivos desde el
computador de casa hasta el Server de la WWW cada vez
que lo deseo despues de trabajar en las páginas de
mi Homepage, en forma rápida y sencilla.
HTML - Es bueno
saber primero qué es:
HTML es el Código con el cual todos los
elementos de una página Web se hacen visibles al
usuario de Internet, en determinados formatos. Sin
embargo no es necesario aprenderse cada órden de
formateo (HTML-Tags), pero es bueno tener un
conocimiento básico para entender cómo funciona el
idioma oficinal del World Wide Web. La versión
estandar del lenguaje que se utiliza actualmente es
el W3C XHTML 1.0 , para consultarlo se puede visitar
esta dirección: www.w3.org/MarkUp/
HTML se entiende como Hyper Text Markup Language. Este
estructura la información en un documento con
"órdenes de formato" -HTML Tags- en
aspectos como formato de texto, tipo de letra, color,
fondo, párrafos, gráficos y tablas. El Browser de
cada usuario "interpreta" la página HTML
en forma particular y distinta dependiento de la
versión del Software que tenga instalado en su
computadora, por ejemplo, una página que se ve
correctamente con el Nescape puede presentar algunas
diferencias con el Internet Explorer y vice versa,
sin embargo es posible editar páginas que se vean
bien con ambos Browsers. Un documento HTML es en fin
y simplemente, un documento de texto que contiene
órdenes de formato o HTML-Tags. Quién esté
acostumbrado a trabajar con el Word de Window, no
encontrará dificultad en utilizar un Web-Editor como
Front Page Express. Cada vez que usted utiliza
Internet lo que ve son documentos HTML. Como ejemplo
seleccione en la barra de comandos de su Browser la
opción View / Text Source (o el comando parecido). A
continuación se mostrará el texto original en HTML
que soporta a la página Web.
Todas las órdenes en HTML denominadas
Tags se denotan entre los símbolos: "< " y
">" correspondiendo para
cada Tag un comienzo y un final, y su efecto o
validez de formato entre ellos, así por ejemplo al
comienzo <B> y al final </B> determinará
que lo que esté escrito entre ellos se verá en
negritas (Bold).
Se pueen crear documentos HTML en el
Word de Window (a partir de la versión 98) o en
Web-Editores con el FrontPage Express y el Nescape
Composer. Estos dos últimos Web-Editores son del
tipo WYSIWYG (What You See Is What You Get). Con ellos
se crea y se formatea una página Web tal como se
verá finalmente en el Browser de los usuarios. Los
códigos de los HTML-Tags son incluidos en la
elaboración de la página en forma muy sencilla con
botones de comando (íconos). Usted no ve los Tags
mientras lleva a cabo su trabajo, lo que hace de
estos editores unas muy buenas y fáciles
herramientas. Los documentos creados tanto con el
Word de Windows o con los Web-Editores se guardan con
al extensión .html o .html ( FILENAME.EXT
). Cada página Web que vemos en nuestro Browser
podemos guardarla en nuestro Disco Duro con la orden
de comando "Guardar Como", esto es muy
útil para leer la página "Off-Line" o
para ver sus HTML-Tags con toda calma, después de
haber finalizado una sesión "On-Line" con
Internet.
El HTML es un lenguaje marcador que
sigue reglas muy precisas y se ha desarrollado hasta
la Versión 4.0, pero no todos los Browsers y
herramientas soportan esta última Versión. Muchos
usuarios todavía navegan con viejos Browsers y por
consiguiente no pueden apreciar ciertos formatos
nuevos como los "Frames". A fin de alcanzar
el mayor público posible es bueno permanecer en el
uso de los viejos Tags como los de la Versión 3.2 o
inclusive más antíguos. Yo utilizaré en los
ejemplos que se verán más adelante la Versión HTML
3.2
Para mayor información sobre HTML puede
consultarse las siguientes direcciones:
http://werbach.com/barebones . ....http://www.w3.org/Provider/Style/
Publicidad
y mercadeo para una Website: http://www.ad-guide.com/
Sugerencias
de Formato: www.oswd.org/ http://info.med.yale.edu/caim/manual/contents.html
Psicologia
del Visitante de la Web: www.rider.edu/~suler/psycyber/psycyber.html
Website-Usability:
www.useit.com
HTML -
Dinámico:
Es el denominado DHTML, que le
permite al usuario una mayor interacción en la Web.
Algunos aspectos típicos del DHTML son por ejemplo
"esconder y mostrar", efecto
"Rollover", texto dinámico, operación
multimedia SMIL, aplicaciones en tercera dimensión,
Menús "Popup" y aplicaciones DOM. Todo
tanto para Explorer como para Netscape.
Los siguientes Links agrupan toda la
documentación, con ejemplos y lecciones tutoriales: .. .. www.webreference.com/dhtml/
http://wdvl.com/Authoring/DHTML/
Los siguientes Links agrupan todo lo
necesario para trabajar con los DHTML-Scripts, muchos
pueden ser bajados como Freeware para uso no
comercial:
www.dynamicdrive.com/ www.burmees.nl/menu/menus.htm www.milonic.com/menu/ .. www.w3schools.com/dhtml/
En esta dirección se pueden encontrar
demos increibles: http://www.dhteumeuleu.com/
Hagámoslo muy
fácil con los Web-Editores:
En Internet se encuentran disponibles
aproximadamente 100 Web-Editores para bajar, se trata
de Freeware o Shareware.
Freeware son
programas 100% funcionales que pueden ser bajados sin
costo desde Internet y pueden ser utilizados gratis
en forma indefinida.
Shareware son
programas 100% funcionales que pueden ser bajados sin
costo desde Internet pero que en un determinado
tiempo (30 días aproximadamente) deben ser
registrados y pagados por el usuario.
FrontPage Express, un editor
"WYSIWYG":
Es el mejor editor del tipo WYSIWYG con
el que he trabajado hasta ahora. Si usted posee el
Internet Explorer 4.0 que viene con la instalación
del Windows 98 ya lo tiene entonces disponible y lo
puede conseguir en el menú: Start / Program /
Internet Explorer / FrontPage Express. Si no lo tiene
puede conseguirlo en la dirección: www.microsoft.com . Sin embargo
sólo es disponible gratis cuando usted tiene
instalado el Windows 98. Para las versiones
posteriores (NT, 2000, Me o Xp) la única opción es
comprar el producto "Front Page 2000" e
instalarlo. Cuando usted tiene estos sistemas
operativos más nuevos es prácticamente imposible
reinstalar el Windows 98. Los nuevos sistemas
operativos son muy atractivos en diseño y
utilización, pero a la "hora de la verdad"
dejan al usuario sólo con la opción que debe
comprar más y más nuevo software. Existe una
excelente opción para adquirir un editor WYSIWYG
completamente gratis, tan bueno y casi idéntico que
el FrontPage Express que viene junto con otras
aplicaciones muy interesantes (procesador de textos,
hoja de cálculo, banco de datos -todo con el
conocido formato de Windows), disponible con la firma
Sun Microsystems Inc. en la siguiente dirección: www.openoffice.org . Allí usted
puede bajar el paquete OpenOffice.
Las siguientes direcciones son muy
útiles para conseguir Freeware o Shareware y vale
mucho la pena visitarlas: www.tucows.com .... www.download.com ..... . www.shareware.com ..... http://cws.internet.com .......www.fortune3.com www.sausage.com
* * *
Con FrontPage Express crear la
primera página:
1) Arrancar con el Editor en el
Menú: Start / Program / Internet Explorer /
FrontPage Express.
2) FrontPage Express se abre con nu
"nuevo documento sin título". (Cuando
ya se ha trabajado con el Word de Windows o Excel
muchos de los comandos y botones le serán
conocidos).
3) Titular la página: en el comando
File / Page Properties (o parecido), se abre una
ventanilla, aquí, en el campo
"Título" escriba el título deseado
para esa página, a continuación chequee abajo
en los dos últimos campos que el tipo de letra
seleccionado es US/West Europe, entonces presione
el boton "OK".
NOTA: El título de cada página es muy
importante ya que sólamente a través de él los
buscadores (Search Engines) pueden encontrarlas.
Dele a cada una de sus páginas un título corto
y preciso.
4) Ahora puede comenzar a trabajar
en su página igual como tiene acostumbrado hacer
con Word, con todas las opciones de formato
disponibles para texto, fondo, colores, tablas y
gráficos. Pruebe simplemente cambiando el tipo
de letra y color, incluya un gráfico, cree una
tabla.
NOTAS SOBRE FORMATO:
a) Es mejor
no subrayar: en principio se
puede subrayar texto sin problema, pero no es
recomendable porque es costumbre en Internet
asociar todo texto subrayado con un
"Hyperlink" como por ejemplo: www.altavista.com . o . Regreso a mi Homepage
b) Texto en color
azul: sólo se utiliza para los
Hyperlinks. En la mayoría de las páginas es
una convención que los textos que lleven a
otra dirección (Hyperlinks) se presenten en
azul y subrayados.
c) Los colores: es
recomendable utilizar únicamente los colores
básicos ofrecidos en la paleta y no los que
se puedan definir más ampliamente en ella ya
que muchos Browsers de viejas versiones no
los pueden interpretar.
d) Tipo de letra:
como estandar utilice "Times New
Roman" o "Arial", por la misma
razón que en ( c ).
5) Guardar la página: con vista a
la publicacion de sus páginas en Internet, se
recomienda crear una carpeta en el directorio
central de su computadora ( C: ) y no dentro de
otros directorios porque esto puede traer
problemas a la hora de transferir los archivos
desde su PC al servidor de la WWW. Para esto se
puede proceder así: Se abre el Windows-Explorer
y se crea en C:\ una
carpeta con un nombre, por ejemplo :"Mi
Website"; dentro de esta carpeta no se
creará ningún subdirectorio y en ella se
guardaran todos los datos de su futura Website (
páginas, gráficos, archivos de sonido, video,
etc. ).
En general la primera página
(Homepage) recibe el nombre index.html (o también
index.htm) a que la
WWW reconoce esta página como la página de
arranque de su Website en la mayoría de los
casos, como por ejemplo para la mía que tiene la
siguiente "ruta": www.madregot.com/index.html . Puede
suceder que su proveedor de servicio de conexión
y espacio en el servidor de la WWW le indique
después cual es el nombre que le corresponda, de
todas maneras y por los momentos, puede seguir
trabajando con el nombre index.htm en su primera
página ya que cuando llegue el momento oportuno
podrá cambiarle el nombre si es el caso con el
comando "Save As".
Ahora ya puede guardar su primera
página en la carpeta "Mi Website" con
el comando File / Save As. Aparece la Ventanilla
"Save As". Apriete el último botón
abajo que se indica "As File" (o
parecido). De inmediato aparece otra ventanilla
donde se puede elegir la carpeta de destino para
el archivo. En nuestro caso seleccionamos en C:\ la carpeta
"Mi Website", y en el campo
"Filename" escriba entonces el nombre index.html y apriete
el botón "OK". La "ruta"
(path) del nuevo documento en su PC debe aparecer
así: C:\Mi Website\index.html . En
principio sus páginas pueden tener cualquier
nombre, pero tenga en consideración lo
siguiente: a) el nombre del archivo no mayor de
ocho carácteres y con la extensión .htm o .html
; b) utilice sólo letras minúsculas ; c)
utilice sólo letras y números, evite caracteres
especiales como la "ñ" por ejemplo.
La creación y archivo de las páginas
sucesivas de su Website siguen el mismo proceso,
todas ellas se conectarán entre sí y con la WWW con
la ayuda de los "Hyperlinks" como veremos
más adelante.
Cómo se ven mis páginas en el
Browser ??
a) Arranque el programa Windows
Explorer y busque en el árbol de directorios a
C:\ ( que puede también presentarse como WINDOWS
C: ).
b) En la rama de C:\ busque su carpeta "Mi
Website" y haga click en ella para abrir el
contenido que se presentará en la ventana
derecha.
c) Seleccione el archivo deseado y haga doble
click para abrirlo. Windows-Explorer tiene la
cualidad de abrir cada archivo con la aplicación
o programa que le corresponde para correrlo. En
nuestro caso "abrirá" al Browser
"Internet Explorer" donde podrá verse
la página deseada tal cual como la verían
"On-Line" los usuarios de Internet. En
el campo de la dirección usted verá lo
siguiente: .C:\Mi Website\index.htm
PARA VER SUS PAGINAS EN EL BROWSER
DEL NESCAPE NAVIGATOR - Si lo tiene instalado en
su PC, haga lo siguiente: a) Arranque el Nescape
Comunicator; b) Escriba en el campo de la
dirección del Browser: ...c:\Mi Website\index.html
y haga ENTER
NOTA SOBRE ORTOGRAFIA:
a) Mayúsculas y Minúsculas: hay
que prestar mucha atención al escribir letras
porque una misma letra sea mayúscula o
minúscula se interpreta como dos caractereres
completamente distintos y no considerar esto
puede ocasionar mensajes de error, por ejemplo:
En el Browser del Internet Explorer vemos: C:\Mi Website\index.html
( C mayúscula).
En el Browser del Netscape vemos: .c:\Mi Website\index.html
(c minúscula).
b) Barras: La inclinada
hacia la izquierda: \ , se
utiliza para la ruta interna en los directorios
de su PC , igual ejemplo que arriba: c:\Mi Website\index.html.
La barra inclinada hacia la derecha: /, se
utiliza para las direcciones en la WWW, ejemplo: http://www.madregot.com/index.html
Conveniencia de trabajar con los dos
Browsers:
Sí, es posible y fácil crear y darle
formato a documentos que se vean con resultados casi
iguales en ambos Browsers. Esto es muy importante
porque en la actualidad la mayoría de los usuarios
de Internet navegan con el Explorer o con el
Netscape. En la medida que progresa el trabajo con
una página, se la puede chequear con ambos Browser y
entonces se hacen los ajustes y correcciones
necesarios, teniendo en cuenta que antes de volverla
a chequear en ambos Browsers hay que
"salvarla" y en cada Browser se la debe
"refrescar" con el comando
"actualizar", si no se hace así, no se
verán los nuevos cambios.
* * *
OPCION ALTERNA: Usted puede
crear una "Homepage" en pocas horas
totalmente gratis pero sujeto a limitaciones y a
mostrar propaganda en su página. Esto es posible con
la gente de Yahoo! GeoCities: http://geocities.yahoo.com/ , seleccione
"Build Your Web Site". Yahoo! GeoCities
organiza las websites en "Neighborhoods"
(Comunidades) en las cuales se agrupan las Homepages
de la gente según sus intereses comunes. Como nuevo
usuario de Yahoo! GeoCities, usted recibe una
dirección en la Web que se basa sobre el
"User-ID" de Yahoo!. Usted puede utilizar
las cómodas herramientas de GeoCities para crear su
Homepage pero tenga en cuenta las siguientes
limitaciones: 1) Su Homepage no debe ser estructurada
para fines comerciales o de lucro, para mayor
información sobre las condiciones generales visite: http://docs.yahoo.com/info/terms/geoterms.html 2) No más de
15 MB de tamaño debe tener el total de su website,
lo que equivale a unas 15.000 páginas de texto
aproximadamente que todavía es bastante, pero con
miras a un futuro en el que su website puede
desarrollarse, considere que por limitaciones de
espacio quizá tenga de conseguirse un proveedor al
que usted le tenga que pagar espacio en el Servidor
de la WWW. 3) Ninguna garantía: Yahoo ! no garantiza
que el servicio Web siga siendo gratis en el futuro,
pero usted puede cambiarse de GeoCities a otro
proveedor sin problemas.
* * *
FrontPage
Express (WYSIWYG) y HTML - Ejemplos:
A
continuación se mostrarán algunos ejemplos de
formatos. A la izquierda de la tabla será tal como
se ve cuando se trabaja con FrontPage Express (con
interacción) y a la derecha la sintaxis de su
correspondiente código HTML. Los Tags se
presentarán en rojo y algunos en negritas para
llamar su especial atención. Lo que se formatea
(textos, gráficos, etc.) está en azul.
Una página nueva,
vacía y sin título
|
HTML Tags
|
| |
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage Express
2.0">
<title>pagina
nueva sin título</title>
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
|
Una
página nueva, ya salvada con título y un
texto en diferentes formatos
|
HTML
Tags
|
BIENVENIDOS A LA PAGINA DE MISIA JACINTA
Hola a todos !!
Voy a publicar mis Recetas de
Cocina en
Internet.
Quién no conoce mis
panquecas?
Quien no ha probado mi
Ponche Crema?
Ahora sí no será más un
secreto ni un privilegio de pocos.
|
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="GENERATOR"
content="Microsoft FrontPage Express 2.0">
<title>Homepage Jacinta
Pérez</title>
</head>
<body bgcolor="#FFFFFF">
<p align="left"><font
color="#008000"><strong>BIENVENIDOS A LA
PAGINA DE MISIA JACINTA</strong></font></p>
<p><font size="5">Hola a todos !!
</font></p>
<p>Voy a publicar mis <font
color="#000000"><em>Recetas de Cocina</em></font>en Internet.</p>
<blockquote><p>Quién no conoce mis
panquecas?</p></blockquote> <blockquote>
<p>Quien no ha probado mi Ponche Crema?</p>
</blockquote>
<p>Ahora sí no será más un secreto
ni un privilegio de pocos.</p>
</body>
</html> |
Una
Tabla formato en diferentes colores
|
HTML
Tags (fragmento correspondiente a
la Tabla)
|
GRUPO A
|
GRUPO B
|
GRUPO
C
|
Maria
|
Pedro
|
El
Roque
|
Antonia
|
Juan
|
Atalaya
|
Josefa
|
Mario
|
Piragua
|
|
<table border="2"
cellpadding="2" width="30%"
bgcolor="#FFFF00"
bordercolordark="#000000"
bordercolorlight="#000000"><tr>
<td width="33%"><p
align="center"><font size="4"><strong>GRUPO A</strong></font></p></td>
<td width="33%"><p
align="center"><font size="4"><strong>GRUPO
B</strong></font></p></td>
<td width="34%"><p
align="center"><font size="4"><strong>GRUPO
C</strong></font></p></td></tr>
<tr><td><p align="center"><font
color="#008000" size="4"><strong>Maria</strong></font></p></td>
<td><p align="center"><font
color="#0000FF" size="4"><strong>Pedro</strong></font></p></td>
<td><p align="center"><font
color="#FF0000" size="4"><strong>El
Roque</strong></font></p></td></tr>
<tr><td><p align="center"><font
color="#008000" size="4"><strong>Antonia</strong></font></p></td>
<td><p align="center"><font
color="#0000FF" size="4"><strong>Juan</strong></font></p></td>
<td><p align="center"><font
color="#FF0000" size="4"><strong>Atalaya</strong></font></p></td></tr>
<tr><td><p align="center"><font
color="#008000" size="4"><strong>Josefa</strong></font></p></td>
<td><p align="center"><font
color="#0000FF" size="4"><strong>Mario</strong></font></p></td>
<td><p align="center"><font
color="#FF0000" size="4"><strong>Piragua</strong></font></p></td></tr>
</table> |
Una
Foto (.jpg ó .jpeg) con texto alternativo, y
un texto como "Hyperlink".
|
HTML
Tags (fragmento correspondiente)
|
Hola !!!
Visítame ! !
|
<body bgcolor="#FFFFFF">
<p align="center"><img
src="Graf1.jpg"
alt="Welcome to my
Homepage" width="205" height="204"><br>Hola !!!<br>
<a
href="http://www.madregot.com">Visítame !!</a> </p>
</body>
|
Un
texto con un "Link" local, y una
textura de fondo
|
HTML
Tags (fragmento correspondiente)
|
Este estructura la
información en un documento con
"órdenes de formato" -HTML
Tags- en aspectos como formato de
texto, tipo de letra, color, fondo,
párrafos, gráficos y tablas. El Browser de cada
usuario "interpreta" la
página HTML en forma particular y
distinta dependiento de la versión
del Software que tenga instalado en
su computadora........
GLOSARIO
Browser: Es un
programa con el cual pueden verse
documentos en la Word Wide Web.....
|
|
<body background="Image3.jpg" bgcolor="#FFFFFF">
<p align="left"><font
color="#000080" size="3">Este estructura la
información en un documento con
"órdenes de formato" -HTML
Tags- en aspectos como formato de texto, tipo
de letra, color, fondo, párrafos, gráficos
y tablas. El </font>
<a
href="#Browser"><font
color="#0000FF" size="3"><strong>Browser</strong></font></a><font
color="#000080" size="3"> de cada usuario
"interpreta" la página
HTML en forma particular y distinta
dependiento de la versión del Software que
tenga instalado en su computadora........</font></p>
<p align="left"><font
color="#000080" size="3"><em><strong>GLOSARIO</strong></em></font></p>
<p align="left"><a
name="Browser"><font
color="#800000" size="4"><strong>Browser</strong></font></a><font
color="#800000" size="4"><strong>:</strong></font><font
color="#000080" size="3"> Es un programa con
el cual pueden verse documentos en la Word
Wide Web..... </font></p>
</body> |
Un
gráfico animado (.gif) transparente, y un
fondo de color
|
HTML
Tags (fragmento correspondiente)
|
|
<body
bgcolor="#0000FF">
<p><img src="http://madregot.com/moneda.gif" width="218"
height="192">
</p>
</body>
|
Gráficos:
La
utilización de gráficos es muy importante, pero hay
que tener en cuenta que su tamaño y cantidad
influencia el tiempo que necesita un usuario de
internet para bajar la página, yo no he tomado en
cuenta esto y mis páginas demoran mucho para bajar
en el computador de los destinatarios. Es
recomendable mantener el tamaño de cada página web
por debajo de los 50 Kb para que sean vistas con
mayor rapidez. Los gráficos son de dos tipos: GIF para todos los
animados o no, como logos, diagramas y títulos, que
utilizan una gama limitada de colores (256 colores).
El otro tipo son los gráficos JPG o JPEG que son las
fotografías digitalizadas o trabajadas con un
"scan", estas utilizan una amplia gama de
colores. Muchos programas gráficos permiten trabajar
con los dos tipos de datos, inclusive permiten la
conversión de datos .BMP o TIF a GIF. Los gráficos
GIF tienen la particularidad, además de poder ser
animados, de presentar un "fondo
transparente", esto significa que el color que
se seleccione para ser transparente, dejará ver el
fondo de la página web.
En
Internet existe el derecho de autoría también para
los gráficos, así que hay que tener cuidado en no
utilizar uno al publicar su página sin el permiso
correspondiente, a menos que haga referencia directa
a la fuente, sea para uso personal y sin fines
comerciales. Si no se posee un "scan" para
sus fotos, se pueden digitalizar estas en un
laboratorio de revelado de fotos que las graba en un
CD-Rom. Por suerte existe una cantidad de gráficos
"Freeware" en las siguientes direcciones:.. www.weststock.com ... www.eyewire.com . Los
gráficos se comportan como "texto", es
decir, pueden ser incluidos en tablas, cortados y
pegados en diferentes localizaciones, o hacerles
funcionar como "Hyperlinks", es también
muy conveniente configurarles un "texto
alternativo". En la ventana de configuración
del gráfico aparece el campo "Text", allí
usted puede dar una descripción breve del gráfico
sea éste un link o no. La recomendación de asignar
un texto alternativo está en que muchos usuarios
navegan con la opción "sin mostrar
gráficos" en sus Browsers para ganar tiempo,
pero en cambio sí pueden leer el texto alternativo y
en el caso de que el gráfico sea un Hyperlink, el
usuario no pasa por alto la información. Por último
no se olvide de archivar todos sus datos de gráficos
en la misma carpeta "Mi Website" en C:
donde están todos los demás archivos
correspondientes a su Homepage.
Información
adicional sobre trabajo con gráficos, para
Photoshop: www.handson.nu/
Tipografía:
.www.bitstream.com/ www.truedoc.com/webpages/intro/ www.1001fonts.com/ www.letterspace.com/..http://style.cleverchimp.com/font_size_intervals/altintervals.html
Hyperlinks:
Esta
herramienta es la que permite la navegación dentro y
hacia afuera de su Website. Tanto texto como
gráficos pueden ser seleccionados como Hyperlinks y
para esto es preciso primero conocer la dirección de
destino. He de recordar que el texto que se marque
para Hyperlink se presentará en azul y subrayado
(por convención). En FrontPage Express se procede
así:
1-a)
Para un Hyperlink externo:
Marque un gráfico con un click o seleccione un
texto (por ejemplo: Visite una poderosa Search
Engine.....) que como Hyperlink usted desee
programar. El ícono de Hyperlink está en la
barra de comando como un "mundito con un
clip", o en Edit/Hyperlink. Haga click en el
comando y a continuación aparace una ventana de
diálogo con diferentes posibilidades.
1-b) Estas diferentes posibilidades son:
"Página actual", "WWW" o
"Nueva Página".
1-c) Cuando el Hyperlink debe dirigirse a una
dirección externa, seleccione WWW y escriba en
el campo URL por ejemplo: http://www.altavista.com y valide
con OK. Asegúrese siempre que el prefijo http://
esté seleccionado. El URL significa Uniform Resource Locator que
básicamente significa la dirección en Internet.
Después del OK, aparecerá el texto seleccionado
en su página en azul y subrayado.
Cómo
se vé en HTML? La órden para generar Hyperlinks
en HTML es un "ANCLA":
<a href=></a> y se vé
así en nuestro ejemplo para textos:
<a href="http://www.altavista.com">Visite
una poderosa Search Engine.....</a> (ver
también ejemplo interactivo en la tabla arriba).
O para gráficos:
<a href="http://www.altavista.com"><img
src="logo.gif"
border="0"
width="156" height="37">
</a>
Detalle interesante es que usted al
tipear en su página direcciones que comiencen
con http:// o www., automáticamente se subrayan
y se colorean en azul, es decir, el link se
establece automáticamente, pero como siempre,
hay que tener muy en cuenta la correcta escritura
de la dirección, sobre todo en aquellas que son
muy largas, con muchas barras, números y
carácteres especiales ( ~ ). Debido a esto
existe otra interesante y muy fácil opción: a)
vaya on-line en el Browser y búsque la
dirección www que le interese; b) abra el
"FrontPage Express" y marque el texto
que desea programar como Hyperlink; c) Apriete el
símbolo del "mundito con el clip"; d)
en la ventanilla de creación de Hyperlinks
aparece ya escrito en el URL la dirección de
Internet deseada y ahora sólo debe validar con
"OK".
2) Para un Hyperlink
interno: Muy necesario para navegar
dentro de su Website y conectar todas sus
páginas o saltar dentro de una misma hacia un
lugar u otro. Igual que en el proceso para el
Hyperlink externo trabajará con el ícono del
"mundito con el clip" o Edit/Hyperlink,
pero un detalle muy importante debe ser preparado
antes de comenzar a establecer sus Hyperlinks
internos. Este es la "MARCA DE TEXTO".
La MARCA DE TEXTO es realmente el
destino de un Hyperlink interno en su Website.
Todo texto puede ser "marcado". En
principio la estructura de una Website viene de
la Homepage con Hyperlinks, hacia todas las otras
páginas de su Web y a su vez otros Hyperlinks en
estas páginas secundarias tienen como destino
volver a la Homepage de regreso. Es importante
facilitar la navegación entre todas las páginas
de su Website. Como se aconsejó al principio,
asegúrese que todas sus páginas estén
archivadas en el mismo directorio junto con todos
los demás archivos de datos. Para establecer una
Marca de Texto en FrontPage Express busque en la
línea de comandos la opción Edit/Textmark (o
parecido). Se abre una ventanita donde aparece el
texto; valide con OK. Posteriormente cuando se
haga un Hyperlink hacia esta "marca",
se abrirá de nuevo la ventana con las tres
opciones: "Página actual",
"WWW" o "Nueva Página".
Allí usted tiene la posibilidad de buscar la
marca en "Pagina actual", valide con
OK. Aqui volvemos con las tres opciones al
proceso de programar Hyperlinks, y ya sabemos
como hacerlos entonces dentro y hacia fuera de
nuestra Website.
Cómo se vé en HTML? La órden para
generar Hyperlinks hacia Marcas de Texto en HTML
es también un "ANCLA" con una
variación (el símbolo # ): <a
href="#></a> como
Hyperlink y el <a
name="></a> como la
marca de texto de destino. Se ve así en esencia,
como en nuestro ejemplo arriba en la tabla:
<p align="left">Este
estructura la información en un documento con
órdenes de formato-HTML Tags- en aspectos como
formato de texto, tipo de letra, color, fondo,
párrafos, gráficos y tablas. El <a
href="#Browser">Browser</a> de cada
usuario interpreta la página HTML en forma
particular y distinta dependiento de la versión
del Software que tenga instalado en su
computadora.......</p>
<p
align="left">GLOSARIO</p>
<p align="left"><a
name="Browser">Browser</a>:
Es un programa con el cual pueden verse
documentos en la Word Wide Web.....</p>
Por último podemos probar nuestros
Hyperlinks muy fácil. Mientras aprieta sin
soltar la tecla "Strg" (en el teclado,
abajo a la izquierda), mueva el ratón sobre el
texto programado como Hyperlink y haga
"click". Otra manera de probarlos es
arrancar su Browser off-line y ver su página,
allí apreciará tambien los textos alternativos
de los gráficos y aparecerá la "manito de
los links" cuando el ratón pase sobre
alguno... haga click ! .
3-a) Hyperlink hacia
direcciones email: Esta opción es
muy interesante cuando desee que los visitantes
de su Homepage se comuniquen con Usted.
Establecer este tipo de Hyperlink es muy
sencillo. Sin embargo, los cazadores de
direcciones emails pueden obtener la suya para
venderla entonces a personas que se ocupan de
enviar spam emails. Para evitar esto debe
procederse con una codificación, que será
especial y única para su dirección email.
Visite el siguiente link: PAUL GREGG
ENCODE MAILTO
Para agregar el emal como link en su página,
siga las instrucciones de copiar y pegar que
aparecen en el resultado.
Downloads:
Puede darse el caso que usted desee
poner a disposición algún archivo a sus
usuarios, como por ejemplo un documento de Word.
Esto también es posible en su Website y para
ello tiene que guardar el archivo en el mismo
directorio donde están todos los datos de su
Website. Se procede igual que al generar
Hyperlinks así: Seleccione un texto o un
gráfico y márquelo como Hyperlink. En la
ventana de edición de Hyperlinks seleccione WWW
y escriba en el campo del URL sólamente el
nombre del archivo y valide con OK. Guarde su
página web para que se actualice. Para probarlo
abra su Browser y haga click en el Hyperlink
creado. Según el tipo de Browser aparecerá una
ventana donde se le preguntará si el archivo se
abre o se guarda. Seleccione "Guardar"
y valide con OK. Se abre una ventana con las
opciones de destino, allí puede seleccionar el
directorio y el nombre deseado para el archivo.
Cuando sus visitantes deseen bajar
el archivo, únicamente tienen que seguir el
proceso de hacer click en el Hyperlink y guardar
el archivo bajado en sus PCs.
Y qué hay con
los Accesorios ? ? CGIs
Los CGIs "Common Gateway Interface Skript" son
programas que manejan informaciones suministradas por
los usuarios de su Website. Para utiliza los CGIs es
necesario obtener un permiso de su Administrador de
Sistema del Server que le preste el servicio de
conexión con la WWW. Los Frames, Formularios,
Contadores de visitantes, y Libro de Huéspedes son
varios ejemplos de CGIs. Yo no he querido complicarme
la vida con ellos y el único que utilizo es el
contador de visitantes que tengo en cada una de mis
páginas. Para incluirlo en ellas utilizo la
herramienta en la barra de comandos Insertar /
Código HTML y en la ventana que se abre escribo la
"formula" que mi proveedor de servicio al
Server me ha suministrado. Esta se vé como sigue:
<p>
<!--webbot bot="HTMLMarkup" startspan
-->
<img
src="http://www.madregot.com/cgi-std/count.pl?c=17&d=rainbow"
border="1">
<!--webbot
bot="HTMLMarkup" endspan -->
</p>
Donde: 1) cgi-std/count.pl?c es el
contador; 2) =17& es el que le toca a esta
página (mi proveedor me ofrece 100 contadores); 3) d=rainbow" es el modelo
y; 4) border "1" el tamaño.
Publicación
de su Website en la WWW...
Yo llevé a cabo la publicación de mi
Homepage en la WWW cuando ya ella tenía tamaño y
estructura suficiente. Existen muchas modalidades de
publicación, desde la posibilidad de hacerlo
"gratis" pero con ciertas limitaciones o
condiciones como la obligación de mostrar publicidad
y de no tener un nombre enteramente
"propio". Después de indagar bastante, yo
decidí contratar los servicios de un proveedor
alemán que tienen una oferta estupenda, porque es
muy importante la facilidad de contacto local para
resolver problemas o realizar cómodamente los pagos
y demás aspectos del apoyo técnico. En el caso de
recomendar un proveedor a nivel internacional yo
pudiera sugerir a la gente de GeoCities-Yahoo http://geocities.yahoo.com/ que ofrecen
diversas modalidades y por lo que he visto, ofrece un
atractivo servicio en el mundo entero. Otro proveedor
de excelente calidad es la compañía V E R I O www.verio.com , también a
través de su asociada www.domain-website-hosting.com .
A manera de referencia aquí, citaré mi propia
experiencia con el proveedor alemán www.freenet.de , para que
usted pueda comparar y tener una idea de un camino
conveniente, sencillo y seguro y pueda así tomar una
decisión a la hora de contratar un proveedor local
en su país.
Cómo ha sido con www.freenet.de :
Primero
que todo, el nombre: En la Homepage
de muchos de los proveedores del servicio de
"Domain" existe la opción de probar si el
"nombre deseado" está todavía libre y al
mismo tiempo reservarlo seleccionando el tipo de
"top-level-domain": .com, .net, .de, .info,
org... Toda transacción se hace on-line y luego de
tres días se recibe un escrito con todos los
detalles del "paquete" deseado. On-line se
puede ver por completo la oferta de servicio para los
diferentes paquetes que son definidos de acuerdo a
diferentes variables como el tamaño del espacio
ofrecido en el Server, las herramientas CGIs, el
volumen del tráfico de datos, el tipo de Domain,
Mailbox para varios emails y posibilidades de
expansión entre otros. Es muy importante tener en
cuenta la posibilidad de cambiar fácilmente de
proveedor en caso necesario.
Datos y Software:
En el escrito enviado por el proveedor se dan
instrucciones precisas para que usted se conecte al
Server, se dan ya confirmados el nombre de su futura
Website, una contraseña y un número de usuario, muy
importantes siempre para la futura transmisión de
sus datos al Server con el programa FTP: File Transfer Protocol que en mi caso
la gente de Freenet.de también me ha facilitado.
Precio, pagos y
disponibilidad de espacio: Lo que tengo
que pagar mensual es una suma mínima realmente
atractiva: 5 euros. El pago inicial de conexión
fueron 10,20 euros y freenet.de, me factura cada seis
meses. El volumen máximo permitido de tráfico sin
costo alguno es de 9 GB mensuales, cosa que nunca he
llegado a sobrepasar, en el caso de que esto así
fuera tendría que pagar sólo 0,03 Euro por cada GB
de tráfico adicional. La capacidad total que tengo
disponible en el Server -con posibilidad de
ampliarla- es de 150 MB.
Hacerce conocer en la WWW:
Mi proveedor también me ha suministrado un índice
con por lo menos 15 Search Engines para que yo
"inscriba" en ellas mi Website, esta es la
mejor manera de que ella sea encontrada por
cualquiera y para hacerlo se dan hasta 32 palabras
que describan el contenido de su Website. Yo no he
hecho esto porque no he estado muy interesada en
diseminar mi propia Web, simplemente me limito al
rango de mis amigos y familiares y como medio de
tener toda la información que me interesa
fácilmente elaborada y colocada en la WWW para
fácil y atractivo acceso.
Bajar, Instalar y configurar
el programa FTP: Este programa se puede
encontrar como Freeware en www.tucows.com por ejemplo,
el mejor es el WS_FTP LE (en Inglés) pero disponible
sólo para sistemas operativos Windows. Para
utilizarlo de todas maneras necesitará la
contraseña, el número de usuario y el nombre de su
Web, suministrados por su proveedor de servicio. En
mi caso, mi proveedor me ofreció el programa FTP sin
costo alguno por supuesto, a través de un Download
con todas las instrucciones en Inglés para bajarlo e
instalarlo. Después, he tenido que configurar las
"secciones de transmisión" con mis datos
ya mencionados y en principio ya estoy lista para
publicar mi Website en la WWW.
Bajar el FTP es muy sencillo, en el
link ofrecido para Download seleccione el
programa FTP y cuando aparezca la ventana de
dialogo con las opciones "abrir" o
"guardar en el disco duro", seleccione
la última. Después que el programa se ha
guardado, ubíquelo en el directorio que usted
seleccionó como destino y marque el archivo:
ws_ftpe.exe , haga click en él; a continuación
se abrirá una ventana de instalación de
software, haga click en "continue": 1)
Se le preguntará a qué grupo de usuario
pertenece, seleccione "Student" y haga
click en "Next" (ya que su Homepage no
tiene fines comerciales); 2) Ahora se le pregunta
dónde y para qué utilizará el FTP, usted
seleccionará para uso personal en el hogar y
haga click en "Next"; 3) Aquí viene la
aceptación de la licencia, luego de leerla haga
click en "Accept"; 4) Seleccione el
directorio de destino para el programa o
simplemente acepte el que se le sugiere, valide
con OK; 5) En esta ventanilla déle un nombre
deseado al programa FTP, este nombre aparecerá
en la barra Start/Programme/.... con la
validación OK se finaliza la instalación.
Configurar la Sección de Trabajo en
el FTP: inicie el programa FTP, se abrirá a
continuación una ventana predefinida, ésta
usted no la necesita, apriete entonces el boton
"New" para abrir una nueva. Ahora se ve
la misma ventana pero con los campos vacíos,
éstos los llena usted de la manera siguiente:
a) Escriba un
nombre deseado para su
"Sesión".
b) Host Name/Address: el nombre de su
Web, por ejemplo: www
. Su Nombre . etc
c) Host Type: Debe dejarlo como está en
"Automatic detect" para el que
programa reconozca automáticamente cuál
es el sistema del servidor que se trata.
d) UserID: el número de usuario que le
ha otorgado su proveedor.
e) Password: es el mismo que su proveedor
le ha suministrado, active la opción
"Save Pwd" para que quede así
configurado.
f) Account: puede dejar este campo vacio.
g) Comment: puede dejar este campo vacio.
Guarde la nueva
configuración de su sesión con
"aceptar"y ya está listo
entonces para transmitir sus datos.
La primera transmisión con el
WS_FTP LE: Abra el programa FTP y seleccione
de la lista "Profile Name" su sesión
(punto a), valide con OK. Antes de empezar con la
transmisión se debe proceder con los siguientes
"tips": 1) Usted ve ahora la ventanilla
de transmisión, haga click en el botón
"Options" y cámbiese para
"Session (cont'd)". Aquí usted puede
bajo "Startup Transfer Mode"
seleccionar un tipo de transmisión para sus
datos, escoja la opción "Auto Detect"
ya que con este modo se asegura que la
transmisión para cada tipo de dato se configura
automáticamente, valide entonces con OK, este
detalle "Auto" es muy importante y debe
estar activado antes de la transmisión porque si
no se hace así, hay que seleccionar manualmente
el tipo de transmisión para datos de texto
(.html, htm, txt etc) en "ASCII" y
todos los gráficos (jpg. gif, etc) en
"Binary". A continuación vuelve usted
a la ventanilla de transmisión. inicial. Al
establecer contacto con Internet ya puede
seleccionar el directorio donde están los datos
de su Website en el campo "Local
System" (su computadora), no escriba nada en
el campo "Remote Site" (su espacio en
el Server). En la ventanilla doble aparecerán a
la izquierda sus datos y a la derecha
"nada" por ahora. En la ventana
izquierda marque con el "ratón" todos
los archivos que se transmitirán y apriete la
flechita que está en el una columna central
junto a otros botones y que apunta hacia la
derecha. Los archivos comenzarán a transmitirse,
al final aparecerá tambien el "Status"
de las transmisiones que se registran con
mensajes al pie de la ventana doble, al finalizar
la transmisión aparece un mensaje que confirma
que todos los datos seleccionados se
transmitieron correctamente. Los archivos tanto
en la ventanilla derecha como en la izquierda
pueden verse según órden alfabético o de
fecha. Después de la sesión ya puede ver su
Homepage en la WWW.
Futuras sesiones con el FTP: Mientras
tanto usted puede ir creando más páginas,
ampliando y modificando las existentes, agregando
más o nuevos gráficos y otros archivos como
video y música, etc. Después de haber trabajado
en su Website por un tiempo es entonces bueno
hacer una "actualización" para que sus
usuarios vean las novedades. Aquí se procede a
transmitir nuevamente todos los datos nuevos y
los modificados al Server. Yo trabajo
generalmente con todos los datos en un solo
directorio, como el ejemplo dado "Mi
Website", allí está todo archivado y me
guío por la "última fecha" de
creación o modificación de cada archivo para
transmitirlo al servidor. Así cuando abro mi
sesión y estoy conectada con el server, hago
"click" en la barra "Date" de
la ventanilla izquierda de la ventana de sesión,
escojo los datos de las últimas fechas que he
trabajado y los transmito. Otro "tip"
es el archivo de control "WS_FTP
LE.LOG" que aparece siempre en la fecha de
la última transmisión. Los nuevos archivos y
los modificados aparecen siempre en fecha más
reciente y esto me ayuda a mejor identificarlos
para transmitirlos.
Problemas ??: Siempre hay que
esperar que pueda presentarse alguna dificultad, en
mi caso fué que mi Homepage -la página de arranque
de mi Website- no tenía el nombre index.htm o
index.html y por eso no aparecía en la WWW. La otra
dificultad fueron los archivos gráficos que por una
razón "curiosa" al archivarlos en el
programa gráfico pasaban de letras minúsculas a
mayúsculas en forma automática sin yo darme cuenta.
Al incluirlos en mis páginas sus nombres estaban con
minúsculas y esto ocasionó que no se vieran en la
WWW. Para evitar que esto ocurra, he decidido
escribir todos los nombres de los archivos en
minúsculas y me aseguro que tanto en mis páginas
html como en el directorio |
