sábado, 24 de abril de 2010

Proceso de Planificación de un Sitio Web


Pasos en el trabajo de desarrollo Web

El trabajo de desarrollo de una página Web comienza con el proceso de definición de una estrategia y unos objetivos del sitio, continúa con el diseño (en el que se define el aspecto y el funcionamiento del sitio) y avanza hasta la fase de producción y desarrollo (durante la cual se crea el sitio); la funcionalidad se comprueba para ver si se cumplen los objetivos establecidos y, al final, se publica el sitio.

Planificar sitios

Es un tópico pero no deja de ser verdad: planificar y organizar bien desde el primer momento ayuda a ahorrar tiempo más adelante. La organización del sitio implica mucho más que determinar el lugar en el que irá cada archivo: la planificación del sitio implica también investigar los requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos del sitio. Además, debe tener en cuenta requisitos técnicos tales como el acceso de los usuarios, los navegadores, ...

Una vez que haya organizado la información y que haya determinado una estructura operativa, podrá comenzar a crear el sitio.

Determine qué estrategia va a emplear y cuáles son los aspectos relativos a los usuarios que debe tener en cuenta durante la planificación del sitio.

* Utilice el "mapa del sitio" de Dreamweaver para establecer la estructura organizativa del sitio. En la ventana Sitio de Dreamweaver puede añadir, borrar y renombrar los archivos y carpetas fácilmente para cambiar la organización de la estructura. Consulte Introducción a la administración del sitio y la colaboración.

uando la creación y el desarrollo de la página se haga entre varias personas:

* Establezca sistemas que impidan que personas que puedan acceder a la página que Vd. Está desarrollando sobrescriban archivos; consulte Configurar el sistema de desprotección/protección.

* Utilice Design Notes para comunicarse con otros miembros del equipo de desarrollo Web;

Organizar la estructura del sitio

Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle frustración y tiempo más adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difícil de administrar, o con archivos relacionados repartidos por media docena de carpetas con nombres similares.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en un servidor Web cuando esté preparado para publicar el sitio y permitir al público que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos públicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio público de una vez.

Divida el sitio en categorías. Coloque las páginas relacionadas en una misma carpeta. Utilice subcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la navegación por el sitio.

Decida dónde desea colocar elementos como imágenes y archivos de sonido. Los diseñadores sitúan a veces todos los elementos que desean utilizar en un sitio y que son ajenos a HTML en una carpeta llamada Activos.


Diseñar el esquema de navegación

Otra área en la que merece la pena planificar es la navegación. Cuando diseñe su sitio, piense en la experiencia que le gustaría que tuvieran sus visitantes. Las búsquedas y los índices facilitan a los visitantes la localización de la información que están buscando.

Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea en todo el sitio. Si sitúa una barra de navegación a lo largo de la parte superior de la página principal, intente mantenerla en ese lugar en todas las páginas vinculadas.

MICROSOFT OFFICE FRONTPAGE


Microsoft FrontPage es una herramienta de construcción y edición de páginas web para el sistema operativo Windows. Forma parte de la suite nupcial Microsoft Office.Creado hace ya muchos años,y hecho para las personas que desconocen. Muchos consideran que el código HTML generado por esta aplicación es un poco descuidado y muchas veces reiterativo, especialmente en versiones antiguas. Como un ejemplo de esto, cabe señalar que la aplicación inserta todavía la etiqueta font, que ya está obsoleta ante W3C. Otro ejemplo es que posee funciones que solo funcionan en Internet Explorer (como los WebBots).

Microsoft ha dejado de producir FrontPage en 2006, y ofrece actualmente dos productos alternativos, con tecnologías más actualizadas: SharePoint Designer —parte de Microsoft Office— y Expression Web. Este último puede considerarse el sucesor directo de FrontPage.

Partes del programa:



Creación de páginas con Frontpage

Las páginas web sirven para preparar materiales en este formato y ser utilizados con los navegadores de Internet y también para ser publicados en Internet.Frontpage es del grupo de Microsoft Office y en la versión 2000 aparece junto con Word, Access, Excel, etc. El entorno que ofrece es muy parecido a Word y se trabaja igual en líneas generales. Ya iremos viendo las opciones que puedan ser diferentes.Hasta hace poco las páginas web había que hacerlas escribiendo el código html y comprobando el resultado en un navegador. Pero con el tiempo fueron apareciendo programas wysiwyg (what you see is what you get), es decir, que se puede trabajar directamente sobre los resultados finales.En la creación de páginas web Frontpage 2000 es uno de estos programas que nos permite trabajar directamente sobre los resultados finales. También sigue manteniendo la posibilidad de trabajar con el código, que es necesario cuando se trabajan con opciones más avanzadas en la creación de páginas web como, por ejemplo, con java script.En las tres pestañas que aparecen en la parte inferior de la ventana de trabajo podemos ver: Normal: Es el modo edición de trabajo en la que se trabaja la página y todas las modificaciones que necesite. HTML: Es donde aparece todo el código de la página y que podemos también modificarlo. Frontpage va creando el código de forma automática. Vista previa: Es el resultado de la página, es decir, tal como se vería en Internet Explorer, ya que ambos programas pertenecen a Microsoft. Este mismo resultado lo podemos ver directamente en el navegador con el icono .

La forma en que funcionan las páginas es a través del código, que es ASCII. Este código es el que viaja por las líneas telefónicas y cuando llegan al navegador de un ordenador, éste lo interpreta y muestra los resultados. Nosotros vamos a trabajar en modo normal, pero para quienes les interese profundizar en el lenguaje html pueden encontrar en Internet manuales completos.

¿Qué es el WWW?

Es un conjunto de servicios basados en hipermedios, ofrecidos en todo el mundo a través de Internet, se lo llama WWW (World Wide Web - Telaraña de Cobertura Mundial). No existe un centro que administre esta red de información, sino más bien está constituida por muchos servicios distintos que se conectan entre sí a través de referencias en los distintos documentos, por ejemplo, un documento contenido en un computador en Canadá, puede tener referencias a otro documento en Japón, o a un archivo en Inglaterra, o a una imagen en Suecia.
Al hablar de hipermedios nos referimos a información que puede presentarse utilizando distintos medios, como documentación ejecutable, de texto, gráficos, audio, vídeo, animación o imagen.
El WWW fue desarrollado inicialmente en el CERN (el Laboratorio Europeo de Física de Partículas) pero por su extrema flexibilidad ha cambiado mucho últimamente.
Cuando una persona ingresa al WWW lo hace mediante un programa "examinador" en general llamado Browser, y a partir de ése momento él esta en el Web.

Multimedia

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3-igWFRqgdOhCLDtIO_l5f1fkz_UoRJWDZX6oFuFO_OYwuUq6kqDJ_HndCiH42PYHZlmxSdWcu5YjTzvEH_-5GYqXh-JahVHItYUET-4CsWxG0qJObzxavn1Av-k9iiTqAuE6nPp8zrQ/s1600/multimedia.jpg">
Sonidos.

Una página del Web puede tener sonidos incorporados, bien sea como un fondo
sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario.


Fondo sonoro para el Microsoft Internet Explorer

Para las versiones 2.0 en adelante, se utiliza la etiqueta:

""

El fichero de sonido puede estar en formato .mid o .wav.

El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que
se debe ejecutar el fichero de sonido. Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez.

Ejemplo 1

La etiqueta para que se ejecute el fichero prv89.mid dos veces en el Explorer es:
""

Activación del sonido por el propio usuario

Hasta aquí hemos visto cómo poner un sonido de fondo en una página. Hay otra opción, mucho más sencilla, y es la de poner un enlace a un fichero de sonido, de tal
manera, que al pulsarlo se ejecute el fichero. (Ver el Capítulo 3, en el que se explica cómo crear enlaces).

Por ejemplo, vamos a poner un enlace al fichero prv89.mid:

musica

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el
sonido. Esto es válido para todos los navegadores, incluso las versiones más antiguas, con la única condición de que se haya configurado un programa auxiliar capaz de ejecutar ficheros .mid o .wav.


Imágenes y enlaces

Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las
veces bastante poco estético. Por medio del parámetro BORDER podremos alterar el grosor de ese borde o incluso eliminarlo poniéndolo a cero.

""
"Netscape 4.0"
"
"

Se ve así:

http://www.netscape.com/http://www.netscape.com/

Sin embargo,

""
"-Netscape 4.0"BORDER=0>"
"
"

Botones

Se definen mediante la tag a la que le acompañan los atributos:

* type="" Seguido de submit para enviar los datos del formulario y seguido de reset para borrar los datos que se han introducido.
* Value="" Indica el texto que incorporaran los botones. Normalmente, enviar y borrar.


href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYjv2d7C4UdJPn4chetL4xjQxXd8k30myXnRTkNE-bTxJvRH0Js3u7gmEuEMcEnJXQkElcCAGLfzqaxw4pjSQ4iDL5_1v_z8RcqRopAX9GPMIMgyleljmmZVCV35Lyj8Q8GyghSqAr_8/s1600/botones_html.bmp">

Trabajar en HTML

Formularios

La manera general para que los lectores de nuestra página se puedan comunicar con
nosotros es por medio de un enlace a nuestra dirección de email, con lo que recibiríamos un email convencional.

Pero puede ser que lo que necesitemos sea sólamente una respuesta concreta a unas
opciones que presentaremos nosotros mismos, o un comentario del usuario, para lo que le suministraremos un espacio en donde introducirlo.

Se puede hacer todo esto, además de otras cosas, utilizando los formularios, con los
que se pueden confeccionar páginas que contengan los elementos necesarios para ello, tal como botones de radio, listas de selección, cajetines de introducción de texto y de control, etc., como vamos a ver.

Los formularios permiten que los demás nos envíen la información directamente a
nosotros o bien a nuestro servidor, en donde hemos instalado un programa que procese esta información.

Estructura de un formulario

La estructura general de un formulario es:
1. Etiqueta de inicio:
-


2. Cuerpo del formulario, con los distintos elementos para poder introducir los datos.

3. Botones de envío y de borrado.

4. Etiqueta de cierre


Etiqueta de inicio

El atributo ACTION indica la acción que se debe efectuar y que es que los datos
sean enviados por email a la dirección indicada. (Si hiciéramos uso del CGI, sería
precisamente aquí donde indicaríamos su localización en el servidor, que abitualmente es el directorio cgi-bin, para que procese los datos).

El atributo METHOD=POST indica que los datos sean inmediatamente enviados
por correo a la dirección de email, nada más pulsar el usuario el botón de envío.
Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un fichero de texto, perfectamente legible y sin codificar.

Elementos para introducir los datos

a) Introducción por medio de texto
b) Introducción por medio de menús
c) Introducción por medio de botones

La introducción de los datos se consigue por medio de la etiqueta:
-

En donde:

xxx es la palabra que indica el tipo de introducción.
yyy es el nombre que le asignamos nosotros a la variable de introducción del dato.

Tablas

Hasta que no se empezaron a usar las tablas, la única manera de tabular las cosas era
utilizar la etiqueta de preformateado, con la que es necesario poner manualmente los
espacios en blanco para que quede todo alineado formando filas y columnas, con un
resultado muy poco estético.
Estructura de una tabla
Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para
confeccionar las tablas.
1. La etiqueta general, que engloba a todas las demás es
y
. Es
decir:

-

-[resto de las etiquetas]
-


Para que los datos vayan dentro de cajas formadas por un borde tenemos que añadir el
atributo BORDER a la etiqueta, es decir:

-

-[resto de las etiquetas]
-


En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row)de la tabla, que son y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería:

-
-[etiquetas de las distintas celdas de la primera fila]
-
-
-[etiquetas de las distintas celdas de la segunda fila]
-

En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son
y , que engloban el contenido de cada celda concreta (texto, imágenes, etc.).

Hay que repetirla tantas veces como celdas queremos que haya en esa fila.
Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas.
Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:

-

-


-



-
-

-



-
-
fila1-celda1 fila1-celda2 fila1-celda3
fila2-celda1 fila2-celda2 fila2-celda3


Frames

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para
dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.

Una de sus características más importantes es que pulsando un enlace situado en un
frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas.

De esta manera se facilita la navegación entre las páginas, pues aunque se vaya
pasando de unas a otras, siempre estará a la vista el índice del conjunto. Para comprender los distintos conceptos vamos a desarrollar un ejemplo, creando una página con dos frames. El de la izquierda va a servir de índice de lo que veamos en el de la derecha, y en éste veremos inicialmente una página de presentación.

Documento de definición de los frames

Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser
el contenido de cada una de ellas.

Todo lo anterior se refleja en el siguiente ejemplo HTML:
-
-
-
-
-
-
-
-
-