i. front page

Seminario web - Front Page
SEMINARIO WEB
Ver. 12/2002
II.. FFR
RO
ON
NTT P
PA
AG
GE
E
11.. C
CR
RE
EA
AR
RU
UN
NN
NU
UE
EV
VO
OW
WE
EB
B::
Lo primero que tenemos que hacer al trabajar en FrontPage es crear un web, de dos posibles formas:
a) Abrir web  elegimos la carpeta donde va a residir el web  se generan unos ficheros y cambia el
icono de la carpeta (según versión Win).
Ej, “Abrir web – directorio d:\IntraLink – Abrir  Ya es un web (ver cómo quedó el directorio)
b) También podemos elegir crear un Web vacío: diremos dónde, cómo se llamará la carpeta, y
empezaremos a crear o importar ficheros.
¿Por qué trabajar con “Webs” en lugar de “Directorios”?
Hay que trabajar con webs y no con carpetas para que los vínculos se hagan de forma relativa:
Ej. Modo carpetas: vínculo “d:\intralink\centros\fichero.htm)
Modo web: vínculo “centros\fichero.htm” (busca desde el directorio donde se encuentra ahora)
Ficheros y Directorios:
FrontPage creará algunos directorios y ficheros con información sobre la web, algunos necesarios otros
inútiles y otros imborrables (los vuelve a crear).
Crear unos directorios para dividir la información, pero tratar de no tener demasiados niveles.
Crear directorio “botones” (?) para las imágenes usadas frecuentemente (iconos, botones...)
Crear directorio “work” (?) para guardar ciertos ficheros útiles para la web (plantillas, ejemplos de código o
de estilos, fichero de imagen donde se crearon los botones...)
Hay que tener un fichero principal al que llamaremos Index.htm o Default.htm, que el servidor abrirá
aunque indiquemos el nombre del directorio pero no el fichero (ver propiedades del IIS en el servidor).
Recomendado tener una hoja de estilos (plantilla para definir formatos) para dar a nuestra web un aspecto
uniforme y personal. Las hojas de estilos tienen extensión .css y se ponen en el directorio raíz.
Para ver el resultado de estos estilos, haremos el fichero estilos.htm (en \work)
1
Seminario web - Front Page
22.. E
EM
MP
PE
EZZA
AR
RA
A TTR
RA
AB
BA
AJJA
AR
RC
CO
ON
N FFrroonnttP
Paaggee -- O
OB
BJJE
ETTO
OS
S
Alguien sin conocimientos de código (html) puede hacer una web bastante decente, aprovechando su
parecido con Word.
Pero es importante ver el resultado en la “Vista previa” o abriendo la página en el navegador de internet: A
menudo no coincide exactamente los espacios o disposición de los objetos.
Objetos Web
Marcos:
Una página de marcos es un tipo especial de página HTML que divide la ventana del explorador en distintas
zonas denominadas marcos, cada una de las cuales puede mostrar una página diferente.
A los marcos se les da un nombre, de forma que podamos referirnos a ellos para decidir en cuál debe
abrirse la página que queramos abrir en un vínculo (<a href=principal.htm target=_self>)
Páginas web:
Una página web es puro código, editable lo mismo en Front Page que en el Bloc de Notas.
Imágenes:
Al contrario que en Word, cuando insertamos una imagen en FP, la imagen no está realmente allí; lo que se
inserta es un vínculo con esa página, que se grabará (si no lo está ya) dentro del directorio-web.
En FP no podemos superponer objetos (poner imágenes “flotantes” sobre el texto). Cada cosa tiene su
posición y no puede ocuparla otra (aunque con código se pueden hacer “apaños”).
¿Qué imágenes usar?
GIF: para imágenes pequeñas o dibujos, o imágenes con transparencias.
JPEG: para imágenes grandes de muchos colores, fotos. Como éste es un formato de compresión, habrá
que elegir el porcentaje de compresión-calidad: a mayor compresión, menor tamaño y peor calidad.
El tamaño máximo de una imagen ahora mismo lo hemos establecido en 400px (de ancho o alto).
Tipos de documentos
.htm
/ = Hyper Text Meta Language
.html
El código más básico para crear páginas web estáticas.
= Cascade Style Sheet
.css
Holas de estilo en casacada.
Cascada: porque al elegir el estilo de un objeto sigue un criterio: 1º el formato del objeto / 2º el
estilo definido en la propia página html / 3º el estilo del fichero .css al que se vincula
<link rel="stylesheet" href="link.css" type="text/css">
= Included
.inc
Podríamos considerarlos “trozos” de ficheros. Podemos hacer referencia a ellos desde un
fichero ASP, y allá donde estuviera la llamada se colocaría el contenido del fichero .inc.
<!--#include file="tit_fin.inc"-->
= Active Server Pages
.asp
Ficheros con código VisualBasic Script (o sea, Microsoft).
Estos ficheros pueden contener código html, VBScript e incluso Jscript.
Este código se ejecuta en el Servidor.
.gif / jpg… = imágenes
= JavaScript
.js
Ficheros con código de JavaScript, a los que se puede llamar desde un htm.
También se puede ejecutar código JavaScript desde un fichero html.
El código JScript se ejecuta en el PC cliente.
= Class
.class
ficheros de Java. Ficheros creados automáticamente por FP
2
Seminario web - Front Page
33.. LLA
AS
SP
PR
RIIN
NC
CIIP
PA
ALLE
ES
SH
HE
ER
RR
RA
AM
MIIE
EN
NTTA
AS
SD
DE
E FFrroonnttP
Paaggee
MENÚ
Archivo 
Abrir web – Para abrir un web ya creado, o crearlo a partir de una carpeta existente.
Publicar web – Dónde copiar los ficheros de este web. En realidad lo único que hace es copiarlos. Podemos
elegir que al publicar, copie todo de nuevo, o sólo los modificados.
Propiedades – propiedades de la página (Márgenes, fondo, marco de destino predeterminado...)
Configurar página – Para imprimir (nada que ver con los márgenes establecidos en propiedades)
Importar – Para traer archivos al web. En realidad basta con arrastrar ficheros desde el explorador de
windows dentro del FrontPage, a la carpeta que queramos.
Menú Ver 
Página – La página web.
Carpetas – Como en el explorador de Windows.
Informes – Informes muy útiles sobre hipervínculos rotos, actualizaciones, páginas demasiado grandes...
Exploración – Estructura de exploración del web – para hacer barras de exploración (vínculos).
Hipervínculos – Muestra gráficamente los vínculos entre páginas.
Tareas – Como en Outlook. Para organizar el mantenimiento y actualización del web
Menú Insertar 
Imagen
Línea horizontal
Marcador – Marca o señal en una parte del documento para poder hacer un vínculo exactamente a este sitio
Hipervínculo – Podemos hacer vínculos a documentos, a marcadores dentro páginas web, a direcciones de
correo electrónico, incluso crear nuevos documentos.
Formulario – Para crear formularios con campos dentro de la propia página web.
Los formularios además pueden enviar los datos a una dirección de e-mail como a una base de datos, pero
no son fáciles de manejar sin un poco de código.
Componente Web – Salvo la Marquesina, no uso nada. Introduce código propio de FrontPage en la página,
y para ciertas cosas precisa tener instaladas las Extensiones de Servidor de FP.
Menú Formato 
Estilo – Podemos cambiar los estilos predeterminados para este documento
Formato del texto – fuente, color, fondo...
Formato de la imagen – tamaño, posición (izquierda, derecha...)
Fondo – Elegir un color o imagen de fondo de página. Si ponemos “marca de agua”, la imagen no se
moverá al movernos por la página con las barras de desplazamiento
También da posibilidades como PowerPoint: Temas de diseño, Transición entre páginas, objetos
dinámicos...
Efectos Html dinámico - Permite dar cierta animación al texto o imágenes de la página
Menú Tabla
Menú Marcos
Para quitar y poner marcos.
Propiedades de los marcos: con barras de desplazamiento, visibles, anchura...
Nota: Cualquier opción que elijamos a través del menú y que afecte a esta página o a uno de sus objetos,
quedará reflejado en el código de la página. Muy útil para aprender Html.
Iconos más útiles:
Vista previa en el Explorador – Abre el I.Explorer para ver el resultado de la página que tenemos abierta.
Publicar – Publica directamente en el último sitio donde se hizo.
Pestañas de la página:
Normal – Edición de la página html
Html – Código de la página (aparecerá en rojo todo código no Html (VBS, JS)
Html de la página de marcos – En caso de tener abierta una página de marcos, podemos ver el código de
la principal, donde normalmente sólo tiene información de tamaño y nombres de los marcos.
Vista previa – Cómo quedará la página web en el explorador. Aún así recomiendo abrir la página en el I.E.
3
Seminario web - Front Page
44.. P
PU
UB
BLLIIC
CA
AR
R
Publicar no es más que copiar los ficheros de nuestra web de un directorio a otro. Del origen, nuestra web
de Desarrollo (donde es modificada y probada (M:\IntraLink\) a la web de Explotación (desde donde
accederán los usuarios a través de una dirección url) (http://34.1.2.1).
No es necesario copiar los ficheros extras creados por nuestro editor web. Y de hecho y en el caso de
internet, no es ni recomendable porque duplicaríamos el espacio empleado.
Pero si publicamos con la herramienta de FrontPage, copiará todos los ficheros.
¿Cómo se publican páginas en Internet?
Copiar los ficheros de nuestro PC a un servidor de Internet (ISP) no es diferente de copiarlo al servidor web
de nuestra LAN. La diferencia es que la herramienta que suele usarse es el FTP.
Por ejemplo, cuando contratamos un host, un espacio (gratuito o no) en internet, el proveedor nos facilitará
una dirección FTP y usuario para poder subir los archivos.
55.. U
ULLTTIIM
MA
AS
SP
PR
RE
EG
GU
UN
NTTA
AS
SS
SO
OB
BR
RE
E FFrroonnttP
Paaggee
Word y FrontPage
A falta de FrontPage, Word puede hacer las funciones de editor web:
En Word podemos grabar un documento como Html, convirtiéndolo automáticamente en un documento
web. Todas las imágenes que tuviera insertadas, se convertirán en ficheros separados con nombre
image0X.gif... en el mismo directorio.
Pegas de este sistema:
- Las imágenes GIF perderán calidad (si son fotografías).
- Creará mucho código extra, que no importará al que no trabaje con código, aunque hará más difícil
retocar el formato o código después. También hará que el fichero ocupe más (aunque no demasiado).
El fichero resultante puede no parecerse en nada al original: Las imágenes descolocadas, las tablas
distintas... Probablemente haya que hacer después algún ajuste.
De todas formas con cualquier programa de Office 2000 pueden crearse páginas web (Word, Access), pero
el código generado es a menudo complicado de entender y modificar. Y en el caso de las presentaciones de
PowerPoint, creará muchísimos ficheros y ocupará mucho espacio; demasiado.
¿Por qué no instalar las Extensiones de Servidor de FP?
Aunque FP insista, no son recomendables porque permitiría acceder fácilmente vía FrontPage a una página
web para modificarla. No lo he llegado a usar por recomendación de especialistas técnicos (Softyser, AOS)
Ventajas y desventajas de FrontPage sobre otros editores web:
Hasta el Bloc de Notas sirve como editor de páginas web, siempre y cuando sepamos escribir el código.
El FP es sencillo de usar para el que ya conoce Word. Sin embargo no tiene muchas herramientas y está
orientado sobre todo al Html. Es decir, permite hacer páginas estáticas.
Tiene otras posibilidades más avanzadas, pero lo hace usando webbots, código interno de FrontPage (lo
que no resulta muy estándar).
El FrontPage 2002 ofrece ya posibilidades de conexión con bases de datos, pero sigue haciendo uso de sus
webbots y no parece muy fiable.
Además introduce mucho código xml, y crea muchos documentos extras que en realidad no debería: duplica
absolutamente todos los ficheros, además de crear los suyos propios (con código Java (.js, .class)).
Hay otros editores, como el Macromedia Dreamweaver, mucho más orientados al entorno dinámico y
multimedia (ideal para páginas Flash).
Para los programadores, trabajar directamente en un entorno de programación (el editor de Vbasic), les
será muy útil por el color que da el programa a cada elemento de código).
4