Clase Dreamweaver Postgrado

UNJFSC – ESCUELA DE POSTGRADO

Ing. Guillermo Martin Rosel Pacora 1

PRESENTA SU CURSO:

DICTADO POR:

Ing. Guillermo Martín Rosel Pacora



CONTENIDO

1. CONCEPTOS PREVIOS

2. INTRODUCCION A DREAMWEAVER

3. ESTABLECER UN SERVIDOR WEB LOCAL

4. ABRIR UNA CUENTA DE HOSTING

5. ENTORNO DE DREAMWEAVER

6. CREAR UN NUEVO SITIO DE TRABAJO

7. CONECTANDO A UN SITIO REMOTO

8. VISUALIZAR Y EDITAR NUESTRO PRIMER ARCHIVO LOCALMENTE Y PUBLICARLO PARA LA

WEB

9. VISUALIZAR Y COMPARAR NUESTRA MODIFICACIÓN DENTRO DEL SERVIDOR WEB LOCAL

Y LUEGO CON EL SERVIDOR WEB REMOTO

10. CREAR UN NUEVO DOMINIO (nombre de nuestra pagina Web)

11. RECOMENDACIONES PARA CREAR Y DISEÑAR PAGINAS WEB

12. PRACTICAS



1. CONCEPTOS PREVIOS

INTERNET: Internet es una red de redes a escala mundial de millonesde computadoras interconectadas con el conjunto de protocolos TCP/IP.También se usa este nombre como sustantivo común y por tanto enminúsculas para designar a cualquier red de redes que use las mismastecnologías que la Internet, independientemente de su extensión o deque sea pública o privada.

HOST: Un servidor en informática o computación es: *Una computadora que realiza algunastareas en beneficio de otras aplicaciones llamadas clientes. Algunos servicios habituales son losservicios de archivos, que permiten a los usuarios almacenar y acceder a los archivos de unordenador y los servicios de aplicaciones, que realizan tareas en beneficio directo del usuariofinal. Este es el significado original del término.

NAVEGADOR WEB: Un navegador Web, o Web browser es una aplicación software que permiteal usuario recuperar y visualizar documentos de hipertexto, comúnmente descritos en HTML,desde servidores Web de todo el mundo a través de Internet. Esta red de documentos esdenominada World Wide Web (WWW) o Telaraña Mundial. Los navegadores actuales permitenmostrar y/o ejecutar: gráficos, secuencias de vídeo, sonido, animaciones y programas diversosademás del texto y los hipervínculos o enlaces.

URL: Sistema unificado de identificación de recursos en la red. Lasdirecciones se componen de protocolo, FQDN, y dirección local deldocumento dentro del servidor. Este tipo de direcciones permite identificarobjetos WWW, gopher, ftp, etc.

HTML: El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de marcación dehipertexto), es un lenguaje de marcas diseñado para estructurar textos y presentarlos en formade hipertexto, que es el formato estándar de las páginas Web. Gracias a Internet y a losnavegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatosmás populares que existen para la construcción de documentos



FTP: FTP es uno de los diversos protocolos de la red Internet, concretamente significa FileTransfer Protocol (Protocolo de Transferencia de Archivos) y es el ideal para transferirdatos por la red.

HOSTING: Servicio de alojamiento de las páginas Webque gestionan empresas especializadas. Las empresasque se dedican a este servicio son como los hotelerosde la red: ofrecen espacio para que otras compañíasalmacenen cualquier información que quieran que seaaccesible por una red, desde sus páginas Web hasta lainformación de su red interna o Intranet.

DOMINIO: Conjunto de caracteres que identifican un sitio de Internetaccesible por un usuario. El estilo de los nombres de "host" utilizadoactualmente en Internet es llamado "nombre de dominio". Algunos de losdominios más importantes son: .com (comercial-empresas), .edu(educación, centros docentes), .org (organización sin fines de lucro), .net(operación de la red), .gov (Gobierno USA) y .mil (ejército USA). Lamayoría de los países tienen un dominio propio. Por ejemplo, .us (EstadosUnidos de América), .es (España), .au (Australia). Así, por ejemplo, elnombre de dominio ".es" identifica a los usuarios españoles.

PAGINA WEB: Cualquier página de información que es accesible a través del www.

SITIO WEB: Conjunto de páginas HTML visibles permanentemente en Internet. Cada sitio Webse identifica con una dirección (URL) que es la de la página principal o portada.



SERVIDOR WEB: Un servidor Web es un programa que implementa el protocolo HTTP(hypertext transfer protocol). Este protocolo está diseñado para transferir lo que llamamoshipertextos, páginas Web o páginas HTML (hypertext markup language): textos complejos conenlaces, figuras, formularios, botones y objetos incrustados como animaciones o reproductoresde sonidos.



2. INTRODUCCIÓN A DREAMWEAVER 8

Macromedia Dreamweaver 8 es un editor HTML profesional paradiseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto sidesea controlar manualmente el código HTML como si prefiere trabajar enun entorno de edición visual, Dreamweaver le proporciona útilesherramientas que mejorarán su experiencia de creación Web.

Esta guía es una introducción para utilizar Macromedia Dreamweaver 8dirigida a los usuarios que no están familiarizados con algún aspecto fundamental de estaaplicación. Los tutoriales de que consta le guían a través del proceso de creación de un sitio Websencillo pero funcional.

Iniciar en Menú Inicio>Programas>Macromedia 8 >Macromedia Dreamweaver

3. ESTABLECER UN SERVIDOR WEB LOCAL DE PRUEBAS

Un SERVIDOR Web es una computadora con el software adecuado, que se encargara de brindar elservicio de páginas Web ya sea a una Red Local o a Internet. Tenemos por ejemplo los siguientesproductos: Internet Information Server – IIS (Microsoft), Personal Web Server, Apache,Vertrigo, Abyss Web Server; utilizaremos este ultimo.

Abyss Web Server.

Abyss Web Server es un Servidor Web Personal de pequeño tamañopero con potentes funciones, válido tanto para sistemas basados enWindows como Linux.

Soporta HTTP/1.1, scripts CGI, alias de directorio, descargas parciales y archivos index. Además,añadir soporte para PHP y Perl es cuestión de minutos.

Incluye una interfaz gráfica que facilita enormemente la configuración y mantenimiento del servidorincluso remotamente, ya que funciona como una página Web. Es perfecto para su uso a nivelpersonal, porque ocupa poco espacio y apenas requiere recursos de sistema.

Instalación:

Ejecutar el instalador del Servidor Web Abyss.

Aceptar el contrato de licencia

Dejar las opciones predeterminadas a instalarse



Instalar en la carpeta predeterminada

Iniciará el proceso de instalación, esperar un momento.

Luego elegir la forma de arranque del programa, elegiremos la opción Automática:

Y por ultimo pedirá ejecutar el servidor Web

Podemos verificar que el Servidor Web Personal se encuentra activa si verificamos el icono ubicadoen el Área de notificación de Windows



Luego apreciaremos la ventana de configuración de nuestro Servidor Web, solicitándonos el idiomacon el que se presentara el programa, y luego un Usuario y Contraseñas de acceso a este sistemade configuración, escribimos los siguientes datos:

USER: admin.

PASSWORD: 123456

Luego cierra la ventana del navegador

Si la instalación resultó satisfactoria, en un navegador Web escribir http://localhost, apreciaremos lapágina inicial al llamar a nuestro sitio Web local.

Los archivos que elijamos publicar estarán almacenados físicamente en la siguiente dirección local:C:\Archivos de programa\Abyss Web Server\htdocs, entonces a partir de esta ubicaciónempezaremos a organizar nuestros sitios Web, por ejemplo:



Por lo tanto, para crear nuestros sitios Web, estos archivos deberán estar almacenadosdentro de esta carpeta (htdocs) y clasificados por Sitios Web



4. ABRIR UNA CUENTA DE HOSTING – VERIFICAR FTP

Primero debemos estar registrados como usuarios del correo de Yahoo, ejemplo: [email protected]

Crearse una cuenta en algún sitio Web que permita almacenar nuestros archivos de manera gratuita(Hosting). Automáticamente ya podemos usar el servicio de hosting si ya nos hemos registradocomo usuarios de Yahoo

Utilizaremos la Web de http://es.geocities.Yahoo.com/ como Hosting Gratuito; para ello ingresamoscon nuestra cuenta de correo creada previamente en Yahoo mail:

En esta ventana clic sobre la dirección asignada por Geocities para nuestra pagina Web alojada

Solo la primera vez que accedemos a nuestra página Web tendremos que elegir alguno de los temassugeridos por Yahoo.



Luego tendremos el resumen con los datos mas importantes registrados, observe bien cual es suURL

Ahora la pagina que observamos, al hacerle clic a la URL es la apariencia inicial de nuestra paginaasignada automáticamente por Geocities, esta podemos cambiarla y poner las que deseemos.



A la siguiente ventana clic sobre “Abrir el Administrador de Archivos”

Las siguientes veces la opción anterior aparecerá de manera predeterminada cada vez queaccedamos nuevamente a nuestro Hosting en Geocities

Desde ahora en adelante cuando volvamos a ingresar a la pagina de Geocities con nuestro User yPassword respectivo, Geocities nos presenta diversas herramientas para poder gestionar losarchivos dentro del servidor gratuito que nos ofrece, elegimos la opción “Administrador de archivos”



Ahora seleccionamos los formatos que deseamos ver, elegir todos los formatos, y clic sobre “Abrir elAdministrador de Archivos”

Tendremos la siguiente ventana con las siguientes partes:



A. Indica las carpetas Web que hemos agregado a nuestro espacio de Hosting en elservidor de Geocities, así como su respectivo tamaño

B. Indica los archivos Web que hemos agregado a nuestro espacio de Hosting en elservidor de Geocities, así como su respectivo tamaño

C. Estos botones permiten gestionar los archivos html que pueda tener nuestro sitio Web,podemos Crear un nuevo documento con el botón Nuevo, modificar uno existente,copiar, cambiar el nombre, mover o eliminar, algún archivo mostrado, solo tenemosque seleccionarlo y elegirla opción respectiva

A

B

C

E

D



D. Permite gestionar las carpetas dentro de nuestro sitio Web, así como la edición detodas ellas, inclusive de las sub. carpetas

E. Muestra los resúmenes estadísticos del consumo de espacio en disco del servidor,causado por el almacenamiento de nuestros archivos, también nos permite visualizarlos archivos por extensiones.

Ahora debemos de recordar los siguientes datos para ingresar mediante FTP a nuestro espacio dedisco otorgado por Geocities:



Trate de ingresar a través de estos datos mediante un navegador Web:

Si todo esta correcto visualizara los archivos de su Web dentro de una ventana similar a unexplorador de Windows, y desde la cual puede realizar edición, como por ejemplo, copiar, mover,eliminar, cambiar nombre a cualquier tipo de archivo.

Esto sirvió para familiarizarnos con el servicio FTP, y poder apreciar los archivos que forman partede nuestro Sitio Web



5. ENTORNO DE DREAMWEAVER

5.1 Conocer el espacio de trabajo de Dreamweaver 8

El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y losobjetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientaspara que pueda realizar cambios en los documentos rápidamente.

1 Barra Insertar: contiene botones para la inserción de diversos tipos de "objeto", comoimágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML quele permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tablahaciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetosutilizando el menú Insertar en lugar de la barra Insertar.

2 Barra de Herramientas: contiene botones que proporcionan opciones para diferentesvistas de la ventana de documento (como la vista Diseño y la vista Código), diversas opcionesde visualización y algunas operaciones comunes como la obtención de una vista previa en unnavegador.

3 Ventana de Documento: muestra el documento actual mientras lo está creando yeditando.

4 Grupo de Paneles: son conjuntos de paneles relacionados apilados bajo un encabezadocomún. Para ampliar un grupo de paneles, haga clic en la flecha de ampliación situada a laizquierda del nombre del grupo; para desacoplar un grupo de paneles, arrastre el punto desujeción situado en el borde izquierdo de la barra de título del grupo.



5 Selector de etiquetas: aparece en la barra de estado en la parte inferior de laventana de documento, muestra la jerarquía de etiquetas que rodean a la selección actual.Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

6 Inspector de Propiedades: le permite ver y cambiar diversas propiedades del objeto otexto seleccionado. Cada tipo de objeto tiene diferentes propiedades. El inspector depropiedades no está ampliado de forma predeterminada en el diseño del espacio de trabajo delcodificador.

7 Panel de Archivos: permite gestionar los archivos y las carpetas, tanto si forman parte deun sitio de Dreamweaver como si se encuentran en un servidor remoto. El panel de archivostambién proporciona una vista de todos los archivos del disco local, como ocurre en elExplorador de Windows

NOTA Dreamweaver ofrece otros muchos paneles, inspectores y ventanas. Para abrir paneles,inspectores y ventanas de Dreamweaver, utilice el menú Ventana. Si no encuentra un panel,un inspector o una ventana que haya marcado como abierto, seleccione Ventana >Organizar paneles para disponer ordenadamente todos los paneles abiertos.

5.2 Utilización de la ventana de documento

La ventana de documento muestra el documento actual. Puede ver un documento en la vistaDiseño, la vista Código o las vistas Código y Diseño. La barra de estado de la ventana dedocumento proporciona información sobre el documento actual.

Cambio de vista en la ventana de documento

Puede ver un documento en la ventana de documento con la vista Código, con la vista Diseño ocon ambas.

Para pasar de una vista a otra en la ventana de documento, siga uno de estosprocedimientos:

Utilice el menú Ver:

Seleccione Ver > Código.

Seleccione Ver > Diseño.

Seleccione Ver > Código y diseño.

Utilice la barra de herramientas Documento:

Haga clic en el botón Mostrar vista de código.

Haga clic en el botón Mostrar vistas de código y diseño.

Haga clic en el botón Mostrar vista de diseño.

5.3 Barra de herramientas Documento

La barra de herramientas Documento contiene botones que permiten alternar entre diferentesvistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestralas vistas Código y Diseño.

La barra de herramientas contiene también algunos comandos y opciones relativos a lavisualización del documento y a su transferencia entre los sitios local y remoto.



En la barra de herramientas Documento, aparecen las siguientes opciones:

Mostrar vista de código sólo muestra la vista Código en la ventana de documento.

Mostrar vistas de código y diseño muestra la vista Código en una parte de la ventana de documentoy la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible laopción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe apareceren la parte superior de la ventana de documento.

Mostrar vista de diseño sólo muestra la vista Diseño en la ventana de documento.

Depuración del servidor muestra un informe que le ayudará a depurar la página de ColdFusion actual.El informe contiene los errores de la página, si los hay.

Título del documento permite introducir un título para el documento, que aparecerá en la barra detítulo del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.

No hay errores de comprobación de navegador permite comprobar la compatibilidad con distintosnavegadores.

Validar formato permite validar el documento actual o una etiqueta seleccionada.

Administración de archivos muestra el menú emergente Administración de archivos.

Vista previa/Depurar en explorador permite ver una vista previa del documento o depurarlo en unnavegador. Seleccione un navegador en el menú emergente.

Actualizar vista de diseño actualiza la vista Diseño tras realizar cambios en la vista Código. Loscambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta quese efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.

Ver opciones permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va aaparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: lavista Diseño, la vista Código o ambas. Para información sobre las opciones de la vista Código,

Ayudas visuales permite utilizar distintas ayudas visuales para el diseño de las páginas.

Para mostrar u ocultar una barra de herramientas, siga uno de estos procedimientos:

Seleccione Ver > Barras de herramientas y, después, seleccione la barra de herramientasque desee.

5.4 Barra de herramientas Estándar

La barra de herramientas Estándar contiene botones para las operaciones más habituales de losmenús Archivo y Edición. Nuevo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacery Rehacer. Estos botones se utilizan del mismo modo que los comandos de menú equivalentes.

5.5 Utilización de la barra Insertar

La barra Insertar contiene botones para crear e insertar objetos tales como tablas e imágenes.Los botones están organizados en categorías. Al pasar el puntero sobre un botón, aparece unadescripción de la herramienta con el nombre del botón.

Visualización de la barra Insertar y sus categorías y menús correspondientes



Si lo desea, puede ocultar o mostrar y contraer o ampliar la barra Insertar. También puedemostrar las distintas categorías de la barra Insertar. Algunas categorías de la barra Insertartienen botones que constan de menús con comandos comunes.

Si prefiere ver las categorías como fichas en la parte superior de la barra Insertar, puedecambiar el diseño de dicha barra.

Para ocultar o mostrar la barra Insertar, siga uno de estos procedimientos:

Seleccione Ventana > Insertar.

Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la teclaControl (Macintosh) en la barra Insertar o en la barra de herramientas Documento,Estándar o Codificación y, a continuación, seleccione Barra Insertar.

Para mostrar los botones de una categoría determinada:

Haga clic en la flecha del menú desplegable situada junto al nombre de la categoría, enel extremo izquierdo de la barra Insertar y, a continuación, seleccione otra categoríaen el menú emergente.

Para mostrar el menú emergente de un botón:

Haga clic en la flecha abajo, situada junto al icono del botón.

Para mostrar las categorías de la barra Insertar en forma de fichas:

Haga clic en la flecha situada junto al nombre de categoría en el extremo izquierdo de labarra Insertar y, a continuación, seleccione Mostrar como fichas.

La barra Insertar muestra las categorías como fichas en la parte superior.

NOTA Es posible que tenga que hacer c lic en la barra de título de la barra Insertar para volvera abrirla.



Para mostrar las categorías de la barra Insertar en forma de menú:

Haga clic con el botón derecho del ratón (Windows), y a continuación, seleccioneMostrar como menús.

La barra Insertar muestra las categorías en un menú en lugar de mostrarlas en forma de fichas.

5.6 Utilización de paneles y grupos de paneles

En Dreamweaver, los paneles se organizan en grupos. El panel seleccionado en un grupo depaneles aparece como una ficha. Cada grupo de paneles puede ampliarse o contraerse yacoplarse o desacoplarse con otros grupos de paneles.

Los grupos de paneles también se pueden acoplar a la ventana de aplicación integrada (sólo enWindows). Esto facilita el acceso a los paneles sin saturar el espacio de trabajo.

6. CREAR UN NUEVO SITIO DE TRABAJO

6.1 Configuración de un sitio de Dreamweaver

Un sitio Web es un conjunto de documentos y activos vinculados con atributos compartidos,como temas relacionados, un diseño similar o un objetivo común. Macromedia Dreamweaver8 es una herramienta de creación y administración de sitios, por lo que puede utilizarla paracrear sitios Web completos, además de documentos por separado.

El primer paso al crear un sitio Web consiste en planificarlo. Para obtener resultados óptimos,diseñe y planifique la estructura del sitio Web antes de crear las páginas que va a contener.

El siguiente paso consiste en configurar Dreamweaver para poder trabajar con la estructurabásica del sitio. Si ya dispone de un sitio en un servidor Web, puede utilizar Dreamweaver paramodificarlo.

6.2 Acerca de los sitios de Dreamweaver

Un sitio de Dreamweaver permite organizar todos los documentos asociados con un sitio Web.La organización de los archivos en un sitio permite utilizar Dreamweaver para cargar el sitio enel servidor Web, controlar y mantener los vínculos de forma automática, administrar ycompartir archivos. Para aprovechar al máximo las funciones de Dreamweaver, debe definir unsitio.

Un sitio de Dreamweaver consta de un máximo de tres partes o carpetas, según el entorno dedesarrollo y el tipo de sitio Web que se desarrolle:

La carpeta local es el directorio de trabajo. EnDreamweaver esta carpeta se conoce como "sitiolocal". Esta carpeta puede colocarse en el equipolocal o en un servidor de red. En ella se almacenanlos archivos con los que está trabajando en un sitiode Dreamweaver.

Para definir un sitio de Dreamweaver, sólo tiene queconfigurar una carpeta local. Sin embargo, paratransferir archivos a un servidor Web o desarrollaraplicaciones Web, también necesita añadir datospara un sitio remoto y un servidor de prueba.

En la carpeta remota se almacenan los archivos,según el entorno de desarrollo, para fines de prueba,producción, colaboración, etcétera. En Dreamweaveresta carpeta se conoce como "sitio remoto" en elpanel Archivos. En general, la carpeta remota suelecolocarse en el equipo donde se ejecuta el servidorWeb.

Las carpetas de datos locales y remotos permiten transferir archivos entre el disco local y elservidor Web, lo cual facilita la administración de los archivos en los sitios de Dreamweaver.



En la carpeta del servidor de prueba, Dreamweaver procesa páginas dinámicas

6.3 Aspectos básicos de la estructura de carpetas locales y remotas

Cuando configure el acceso a la carpeta remota del sitio de Dreamweaver (véase mas adelanteConfiguración de una carpeta remota), debe determinar el directorio de servidor de la carpetaremota. El directorio de servidor especificado debe corresponder a la carpeta raíz de la carpetalocal. El siguiente diagrama muestra un ejemplo de una carpeta local a la izquierda y de unacarpeta remota a la derecha.

Si la estructura de la carpeta remota no coincide con la de la carpeta local, Dreamweavercargará los archivos en el lugar incorrecto y los visitantes del sitio no podrán verlos. Además, seromperán las rutas de imágenes y vínculos.

El directorio raíz remoto deberá haberse creado antes de que Dreamweaver intente conectarcon él. Si no dispone de un directorio raíz para la carpeta remota, cree uno o pida aladministrador del servidor que le cree uno.

Aunque sólo desee editar una parte del sitio remoto, deberá duplicar toda la estructura de larama correspondiente del sitio, desde su carpeta raíz hasta los archivos que desea editar.

Por ejemplo, si la carpeta raíz del sitio remoto, denominada public_html, contiene dos carpetas,Project1 y Project2, y desea trabajar únicamente con los archivos HTML de Project1, no seránecesario que descargue los archivos de Project2, pero deberá asignar su carpeta raíz local apublic_html, no a Project1.



6.4 Configuración de un sitio de Dreamweaver nuevo

Después de planificar la estructura del sitio, o si ya posee un sitio, debe definir un sitio enDreamweaver antes de iniciar el desarrollo. Configurar un sitio de Dreamweaver permiteorganizar todos los documentos asociados con un sitio Web.

NOTA También puede editar archivos sin configurar un sitio de Dreamweaver.

Después de configurar un sitio de Dreamweaver, es recomendable exportar el sitio para disponer deuna copia de seguridad local.

6.5 Para definir un sitio de Dreamweaver:6.5.1 Seleccione Menú Sitio > Administrar sitios.

Aparece el cuadro de diálogo Administrar sitios.

NOTA Si no tiene ningún sitio deDreamweaver definido, aparecerá elcuadro de diálogo Definición del sitioy podrá omitir este paso y continuarcon el siguiente.

6.5.2 Haga clic en el botón Nuevo.

Aparecerá el cuadro de diálogo Definición del sitio.

6.5.3 Siga uno de estos procedimientos:

Haga clic en la ficha Básicas para utilizar el asistente para la Definición del sitio, que leguiará a través del proceso de configuración.

NOTA Se recomienda que los nuevos usuarios de Dreamweaver utilicen el asistente para laDefinición del sitio. Es probable que los usuarios que tengan más experiencia conDreamweaver prefieran las opciones avanzadas.

Haga clic en la ficha Avanzadas para utilizar las opciones avanzadas, que le permitenconfigurar carpetas locales, remotas y de prueba por separado según convenga.

NOTA Para empezar, puede configurar un sitio de Dreamweaver completo, o simplementerealizar el primer paso, la configuración de la carpeta local.

6.6 Realice el proceso de definición del sitio de Dreamweaver:

En el asistente para la Definición del sitio, responda a las preguntas de cada pantalla y, acontinuación, haga clic en Siguiente para avanzar en el proceso de configuración o haga clic enAtrás para regresar a una pantalla anterior.

6.6.1 Como opciones avanzadas, complete las categorías Datos locales, Datos remotosy Servidor de prueba según corresponda

SUGERENCIA Después de configurar un sitio de Dreamweaver, es recomendable exportarel sitio para disponer de una copia de seguridad local. Para más información,consulte Importación y exportación de sitios.

Esto lo realizaremos de la siguiente manera:

6.6.2 Trabajaremos con la ficha Básica, donde configuraremos únicamente los datos locales,los datos para acceso remoto al servidor los configuraremos mas tarde. Para este pasoinicial tendremos que escribir el nombre de nuestro SITIO WEB de trabajo.



6.6.3 Luego tendremos que elegir una tecnología de servidor, seleccionamos SI, y elegimosde la lista PHP MYSQL

6.6.4 Elegimos la opción para editar los archivos de manera local, para posteriormentecargarlos al servidor de remoto.

Luego tenemos que indicar el lugar donde se almacenaran los archivos queconformaran nuestro sitio Web local .

Esta ubicación debe coincidir con la carpeta Web asignada por nuestro Servidor Web,para nuestro caso la carpeta asignada por el Abyss Web Server es HTDOCS, ubicadaen C:/Archivos de Programa/Abyss Web Server/htdocs.

Dentro de esta ubicación organizaremos los diferentes Sitios Web que vayamos atrabajar (Crear carpeta por cada sitio Web)



Una vez dentro de la carpeta, hacer clic sobre Seleccionar. Apreciaremos la siguientevista:

6.6.5 Elegimos la opción para editar los archivos de manera local, para posteriormentecargarlos al servidor de remoto.

6.6.6 Luego se nos pide seleccionar el servidor de prueba tendremos que seleccionar unservidor de prueba local. (Esto lo configuraremos mas tarde).



6.6.7 Veremos un resumen de los datos que acabamos de configurar. Para terminarhacemos clic sobre COMPLETADO

6.6.8 Regresaremos a la vista de la ventana Administrador de Sitios, luego solo hacer clicsobre Listo. Ya entonces hemos creado satisfactoriamente nuestro Sitio Web Localpara nuestro primer ejercicio.

6.6.9 Ahora visualizaremos los archivos que tengamos dentro de nuestro sitio Web desde elpanel Archivos, notemos lo siguiente



1. Permite visualizar y cambiar de manera rápida entre todos los sitios Webconfigurados por Dreamweaver, estos archivos se visualizaran en la parteinferior.

2. Especifica la ubicación de los archivos que se van a visualizar, ya sea demanera remota (Hosting), de manera local o dentro del servidor de prueba, odel mapa del sitio (estructura), estos archivos se visualizaran en la parteinferior.

3. Realiza la conexión con el servidor remoto (Hosting)

4. Actualiza la vista actual de los archivos

5. Permite colocar (publicar) u obtener (descargar) los archivos desde o haciala carpeta seleccionada en ese momento.

6. Permite proteger o desproteger un documento contra los cambiosaccidentales.

7. Amplia la vista del explorador de sitios Web

Carpeta local de nuestro sitioWeb ubicada en HTDOCS



7. CONECTANDO A UN SITIO REMOTO

Ahora conectaremos nuestros archivos locales con nuestro Sitio Web Remoto creado en el Hostingde Geocities, para ello utilizaremos los datos proporcionados durante la creación de nuestroHosting:

Sigamos estos pasos:

iniciamos el proceso de conexión con el servidor remoto desde el menú Sitio>AdministrarSitios>Editar

Ahora trabajaremos con la pestaña Avanzada, e ingresaremos los datos como corresponde:



Para verificar que los datos ingresados son correctos, hacemos clic sobre el botón PRUEBA,tiene que aparecer el siguiente mensaje

Finalmente clic en Aceptar y luego en Listo.

Ahora manejemos las vistas desde el explorador de archivos (Panel Archivos) y verifiquemos lasdistintas vistas para el trabajo de nuestros archivos, apreciaremos las distintas vistas de nuestrosarchivos.

Para la vista local veremos nuestro documento (aun vacía)

Para la vista remota de nuestro sitio realizaremos otro procedimiento adicional de la siguientemanera:

Seleccionar primero Vista Local y luego clic al botón conectar

Apreciaremos un único archivo (el creado en el Hosting de manera predeterminado).



8. VISUALIZAR Y EDITAR NUESTRO PRIMER ARCHIVO LOCALMENTE YPUBLICARLO PARA LA WEB

8.1 Descargar El Archivo Desde El Servidor Remoto Al Servidor Local

Desde la vista remota seleccionar al archivo almacenado durante la creación del Hosting.

Empieza el proceso de descargar del o los archivos seleccionados

Dreamweaver pregunta si deseamos obtener (descargar al servidor local) los archivosdependientes, es decir, todos los objetos incluidos dentro del archivo Web que vamos adescargar como imágenes, archivos flash, etc.

Respondemos de acuerdo al contenido de la pagina o lo que necesitemos editar.

Ahora visualicemos la vista local, y apreciaremos el mismo archivo



8.2 Abrir El Archivo Remoto Del Servidor

Desde la vista remota hacer doble clic al único archivo almacenado durante la creación delHosting.

Si no ha descargado previamente el archivo, Dreamweaver pregunta si deseamos obtener(descargar al servidor local) los archivos dependientes, es decir, todos los objetos incluidosdentro del archivo Web que vamos a descargar como imágenes, archivos flash, etc.

Respondemos de acuerdo al contenido de la pagina o lo que necesitemos editar.

Ahora estaremos visualizando los archivos desde el servidor remoto

8.3 Hacer una modificación al archivo local y luego publicarlo

Desde la vista local hacer doble clic al único archivo almacenado, dicho archivo se presentara enel área de la ventana del documento



Hacemos Una pequeña modificación, como por ejemplo escribimos nuestro nombre en la partesuperior izquierda del documento y grabamos los cambios presionando [CTRL] + S

Cerrar el archivo



9. VISUALIZAR Y COMPARAR NUESTRA MODIFICACIÓN DENTRO DELSERVIDOR WEB LOCAL Y LUEGO CON EL SERVIDOR WEB REMOTO

Debemos visualizar los cambios en nuestro documento antes de publicarlos en la Web, para estotenemos que acceder vía URL a nuestro servidor Web local (HTDOCS) desde un navegadorutilizando el siguiente formato: http://ServidorLocal/carpeta/archivo.htm, para nuestro caso:http://LocalHost/sitio_Web01/index.htm.

Ahora veamos y comparemos con el archivo ubicado dentro del servidor remoto desde unnavegador utilizando el siguiente formato:http://www.servidor.com/carpeta/archivo.htm, para nuestro caso:http://es.geocities.com/mis_clases_Web/index.htm.

Como apreciamos, aun ambas páginas son distintas a pesar que ya hemos hechomodificaciones, lo que sucede en realidad es que esas modificaciones se han realizado demanera local y no en el servidor remoto, lo que restaría simplemente seria entonces actualizarla página en el servidor remoto, de la siguiente forma:

Mantener la vista local de los archivos en Dreamweaver y seleccionar el archivo a publicar(Colocar), luego hacer clic al botón Colocar:



Si tenemos archivos dependientes que hayamos modificados diremos que si deseamos incluirlos

Ahora automáticamente empezara la actualización de archivos en el servidor remoto.Terminado este proceso, volvamos a ingresar a nuestra página Web del Servidor Remoto. sitodo salio satisfactoriamente se nos mostrara un mensaje de confirmación

Ir a la URL del servidor remoto y verificar los cambios publicados



10.CREAR UN NUEVO DOMINIO (nombre de nuestra página Web.)

Utilizaremos una página especializada en asignar servicios de nombres de dominio de maneragratuita (a costo de una pequeña publicidad por ser así).

Una vez en la Web de tendremos que elegir un nombre de dominio con el cual será ubicada(redireccionada) nuestra pagina Web ubicada en el Hosting de Geocities, es decir, que para accederdesde Internet a nuestra pagina, ya no será necesario escribir:http://es.geocities.com/ID_DE_YAHOO/, sino, simplemente, http://www.CUALQUIER-NOMBRE.TK

Para ello realizamos los siguientes pasos

10.1 Ingresaremos a la página http://www.Dot.Tk/es/index.html

10.2 En la parte inferior de la pagina, escribimos la dirección URL con la que deseamos quenuestra pagina sea localizada, por ejemplo: www.MiPaginaWeb.tk (solo escribirMiPaginaWeb, el WWW y el .tk son agregados de manera automática)



10.3 Para verificar si el nombre esta disponible (ya que es único para Internet), hacemos clicsobre el botón siguiente.

10.4 Si todo esta correcto visualizamos la pantalla de confirmación, anunciando que el dominioelegido esta aun disponible, solo tendremos que seleccionar la opción “Dominio gratis” yluego Siguiente

10.5 Ahora tendremos que ingresar la URL asignada por nuestro Hosting gratuito (el deGeocities), y un correo electrónico personal para que llegue un mensaje de confirmación deDominio creado satisfactoriamente



10.6 Ahora crearemos la cuenta dentro del servicio de dominio para la Web de Dot.tk, para serusuarios de este servicio.

Ya tendremos creada nuestra cuenta para el servicio de dominio dentro de la página de DOT.TK.



10.7 Ahora ingresaremos a nuestra cuenta desde la pantalla inicial dehttp://www.dot.tk/es/index.html

10.8 En la siguiente ventana Ingresamos nuestro USUARIO Y CONTRASEÑA inscritos en DOT.TK

Apreciaremos el panel de control del dominio gratuito.

Ahora ya podemos acceder a nuestro sitio Web a través de nuestro dominio redireccionadorWWW.Lo–QueQUIERAS.tk y apreciaremos la misma pagina creada en Geocities



11.RECOMENDACIONES PARA CREAR PÁGINAS WEB

11.1 Los nombres de los archivos

Una de las principales dificultades a la hora de realizar un documento WWW es quenosotros estamos trabajando en un PC con el entorno Windows, pero nuestras páginas vana residir en una máquina con el sistema operativo UNIX. En UNIX son especialmenteimportantes las mayúsculas/minúsculas, lo que debemos tener en cuenta a la hora deponer el nombre a un fichero y hacer un enlace al mismo: si pusimos el nombre enminúsculas, deberemos hacer igual los enlaces. Si no lo hacemos así, puede que losenlaces e imágenes se vean bien en nuestro PC, pero no será así en el servidor. Lo mismosucede con las extensiones de los ficheros: podemos emplear ".html" o ".htm", ".jpg" o".jpeg" pero deberemos respetar esto a la hora de hacer los enlaces.

Otros elementos que debemos evitar al poner nombres a los ficheros son:

Caracteres especiales como ñ, ç, ¿ ª ", etc. Espacios en blanco Letras con acentos

11.2 Longitud de las páginas

Las páginas deberán hacerse lo más cortas y concisas posible. Está demostrado que a lagente no le gusta leer en la pantalla de un ordenador: la vista se cansa y la gente se"aburre". Además, el hecho de tener que desplegar mucha cantidad de texto (y/oimágenes) en la pantalla, puede producir desorientación en el lector, ya que pierde lasreferencias de la cabecera y las ayudas a la navegación. Cuanto más importante sea unapágina y más atención requiera por parte de los lectores, más corta debe ser. Si elcontenido es especialmente interesante, esto se debe demostrar dentro de lo que se ve enel primer pantallazo.

Suele recomendarse un máximo de 4 pantallazos como longitud aceptable para una página.

11.3 Tipografía

Al escoger la tipografía que vamos a emplear en nuestra página, debemos tener en cuentaque estamos diseñando un documento para que ser leído en la pantalla de un ordenador.Por lo tanto, debemos escoger tipos de letras no muy grandes, para no hacer demasiadolarga la página, pero tampoco excesivamente pequeños, que puedan causar dificultades delectura a las personas que no tengan una buena visión.

Usa tipos de letras que sean casi universales, como Arial o Times, ya que el usuario solopodrá ver los tipos de letras que tiene instalados en su ordenador. De nada sirve que seutilicen letras raras que solo veremos nosotros.

El excesivo uso de mayúsculas dificulta la lectura.

No se debe usar el subrayado para destacar un texto: en las páginas Web estamosacostumbrados a que las partes subrayadas sean enlaces y la gente suele pulsar sobreellos esperando acceder a otra página.

11.4 Páginas con frames o marcos

Las páginas con frames o marcos permiten dividir la pantalla en diferentes ventanas, conun documento html diferente en cada una de ellas. Se suelen utilizar bastante ya que nospermiten ejercer un gran control sobre la disposición general y la apariencia de la página.Sin embargo, deben utilizarse con cautela, ya que tienen algunos inconvenientes:

No se podrán hacer bookmarks o marcadores a las partes. Habrá dificultades para imprimir las páginas individuales. No se pueden "copiar" las URLs. El botón de anterior o back de los navegadores puede no funcionar correctamente.



Reducen el espacio útil donde visualizar la información. No todos los navegadores soportan marcos. Podemos tener dificultades si alguien quiere hacer un enlace a una de nuestras

páginas: al aislar una parte del resto de los marcos, esta puede perder el sentido.

Algunas recomendaciones para páginas con frames:

Eludir la fragmentación excesiva. Si se van a utilizar más de dos frames, hay queevitar la impresión de parcelación en múltiples ventanitas. Por lo menos una deellas debe ser mayor que las demás y actuar como página principal.

Evitar la rigidez de las frames (uso de las etiquetas html noresize oscrolling="no"). No debemos impedir que los usuarios puedan "mover" las frames,ya que lo pueden necesitar por tener una resolución de pantalla diferente de lanuestra.

Enlaces exteriores a nuestro Web. No es conveniente que queden prisionerosdentro de nuestra estructura de frames, ya que suele ser muy molesto debido aque la nueva página quedará en un espacio reducido. Además, seguramentetendrá un estilo diferente a la nuestra. Todavía puede ser peor si la página a laque enlacemos tiene a su vez frames. Para evitar esto podemos utilizar la etiquetahtml target="_top" con lo que la nueva página se cargará en una pantallacompleta.

11.5 Imágenes

Como ya mencionamos al hablar sobre la lentitud de las redes de comunicaciones, lainclusión de imágenes en nuestras páginas, debe valorarse con detalle a fin de que la cargade la página se lo más rápida posible. Suelen considerarse páginas rápidas, aquellas de untamaño no superior a unos 40 o 50 Kb (fichero + imágenes).

Dado que cuanta mayor calidad tiene una imagen, más ocupa, deberemos encontrar uncompromiso entre la calidad de la misma y la información que se quiere mostrar. Son muyraras las ocasiones en que es necesario poner una imagen de alta calidad en nuestraspáginas. Existen programas de tratamiento de gráficos que permiten "bajar" la calidad deuna imagen de forma razonable.

También podemos jugar con el tamaño de las imágenes a la hora de quitar peso a nuestrapágina, tratando de que estas sean lo más pequeñas posible. Si necesitamos incluir algunaimagen grande, es mejor poner en la página una pequeña muestra de la misma, indicandoque se puede pinchar sobre ella para verla en tamaño grande. Así, solo tendrán quesoportar una espera larga aquellos lectores que realmente tengan interés en verla. No sedebe reducir el tamaño de la imagen con el programa con el que estamos editando lapágina (Netscape Composer, etc.): nos da la falsa impresión de que la imagen es máspequeña, pero lo único que hace es reducir la forma en que vemos la imagen, que enrealidad es la misma. Para reducir de verdad el tamaño de la imagen deberemos usar unprograma de tratamiento de gráficos.

Se puede referenciar la misma imagen todas las veces que se quiera. No debemossobrecargar el servidor poniendo una y otra vez la misma imagen en diferentes directorios:basta con ponerla una vez y referenciar la misma. Esto tiene además la ventaja de que siun usuario ya ha cargado ese icono en alguna ocasión, lo conservará en la "caché" de suordenador y no necesitará cargarla de nuevo, con lo que se acelera la transmisión. Por estarazón, para iconos sencillos como son las "bolitas" para listados, líneas de separación, etc.,puedes utilizar los que están ya cargados en nuestro Web en nuestro archivo gráfico.

Los formatos de imágenes más extendidos son: GIF y JPG (o JPEG):

El formato GIF utiliza hasta un máximo de 256 colores o 64 tonos de grises (sepueden usar menos, con lo que ocupa menos la imagen) y permite la posibilidadde definir fondos transparentes y animación de gráficos. Este formato usa unsistema de compresión (para reducir el tiempo de transmisión por la red) con elque no se pierde calidad. Por ello, este formato es apropiado para imágenespequeñas y con buena resolución y para dibujos con bordes bien definidos.



El formato JPG permite calidades de más de 256 colores, de hecho permitehasta 16 millones. El problema es que muchos usuarios tienen una resolución depantalla de solo 256 colores, con lo que puede que se vean las imágenes de formadefectuosa. Este formato tiene un sistema de compresión que hace que sutransmisión por la red sea más rápida, por los que es el formato más apropiadopara imágenes grandes. Sin embrago, este sistema de compresión puede bajar lacalidad de la imagen.

Las imágenes animadas deben utilizarse con mucho cuidado:

Ocupan bastante más espacio que las imágenes normales. Distraen la atención del lector de la información útil y acaban cansando. Dificultan el saber cuando ha terminado de cargarse una página. Si se tiene abierta la página Web y se cambia a una ventana distinta con otra

aplicación, el PC sigue procesando la repetición de la imagen, con lo que ralentizala velocidad de trabajo del ordenador.

Dificultan una impresión "limpia" de la página.

11.6 Colores y fondos

En nuestras páginas Web deberemos tener cuidado en emplear una armonía de colores queno perturbe la lectura de las páginas, procurando no emplear colores estridentes ocombinaciones extrañas. No se deben cambiar los colores standard de los enlaces (azulpara los enlaces, violeta para los enlaces visitados), puede confundir a los lectores. De lamisma manera, no se deben utilizar estos dos colores a lo largo del texto, ya que la gentetiene tendencia a pinchar sobre ellos.

Lo mejor es utilizar fondos de colores claros y texto de color oscuro, ya que son tonos quese suelen leer con más comodidad, por lo que siempre se debería hacer así en páginas enlas que predomina el texto. En el caso de usar un color de fondo muy oscuro tendremosque emplear una tipografía en blanco u otro color muy claro, con lo que se impide laimpresión correcta de la página (pocas personas tienen configurado su navegador para queimprima los fondos).

En el caso de que se emplee una imagen como fondo, deben seguirse los mismosconsejos que acabamos de dar y usar texturas simples y tenues, procurando no usartexturas muy rugosas que se ven mal en pantallas de baja resolución.

Clase Dreamweaver Postgrado

Documents

Transcript of Clase Dreamweaver Postgrado