introduccion a Dreamweaver.

Dreamweaver. Crear, abrir y guardar documentos HTML

Macromedia Dreamweaver ofrece diversas formas de crear un documento. Puede crear documentos HTML nuevos y vacíos; abrir un documento HTML existente, aunque no haya sido creado con Dreamweaver; o bien crear un nuevo documento basado en una plantilla.
También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos de correo electrónico de texto normal o archivos de texto guardados con procesadores de texto o editores de texto. No podrá utilizar todas las herramientas de edición de documentos de Dreamweaver en un documento de texto normal, pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles razones para abrir un documento de texto figuran editar y depurar código JavaScript, consultar el contenido del archivo de configuración de Dreamweaver o abrir un correo electrónico que contiene un fragmento de código HTML para copiar el código y pegarlo en otro documento.
Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:
En Windows, elija Archivo > Nuevo desde una ventana de documento existente o elija Archivo > Nueva ventana desde la ventana Sitio.
Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML.
Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:
Seleccione Archivo > Abrir.
Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.
Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)
Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.

3.2 Forma de abrir Dreamweaver, crear un documento, abrir un documento y crear un documento nuevo

Dreamweaver.. ya que la gran mayoría de los que llegáis a mi blog utilizáis este programa para editar código y de una forma u otra, resulta más fácil, os voy a explicar un poquito cómo validar un formulario, para que podáis poner campos obligatorios y evitar que os lleguen emais vacíos.
Voy a validar un formulario sencillito con un campo para el nombre, otro para el teléfono y otro para el email, en unos días publicaré un artículo para validar formularios más completos, pero ya sin Dreamweaver.
Nota: Doy por hecho que tenéis un formulario previamente hecho, Dreamweaver instalado y conocimientos mínimos de éste. Es importante tener nuestros campos identificados con la etiqueta name para poder diferenciarlos.
1.- Abrimos el archivo con nuestro formulario en Dreamweaver y lo dejamos en vista “Dividir” (Ver > Código y diseño).
2.- Seleccionamos desde la pantalla de Diseño el botón Submit.
3.- Ahora nos vamos a la venta Comportamientos que aparece en el menú derecho (sino apareciera por defecto la puedes hacer visible desde el menú Ventana > Comportamientos) y clicamos sobre el signo + que aparece, acordaros de tener el botón Submit seleccionado.
4.- Nos aparecerá un menú desplegable, ahí seleccionamos Validar formulario.
5.- Se abre una ventana nueva en la que aparecen los campos de nuestro formulario, ahora tenemos que seleccionar un campo y aplicarle los atributos que deseemos.
Por ejemplo, selecciono el campo email y marco la opción de Obligatorio (para que obligue al usuario a rellenarlo, así si este no contiene algo no se enviará el formulario) y marco también la opción de Dirección de correo electrónico, para que no se pueda escribir cualquier cosa en ese campo, si no que deba ser obligatoriamente una dirección de email.
Una vez validados todos los campos le damos a Aceptar

3.3 Cuando abrimos un documento nuevo que nombre recibe y que titulo tiene

El objetivo de este proyecto es diseñar, desarrollar e implantar una Intranet en
una empresa. Utilizando un gestor de contenidos para crear el portal Web de
la Intranet. Con dicho gestor se facilitará la implementación del portal.
En un primer momento se realiza un estudio de diversos gestores. La
información servirá para decidir que gestor es el más adecuado para la
Intranet que se quiere realizar. Una vez escogido el gestor, Dotnetnuke, se
efectúan diversas pruebas con él.

Finalmente, una vez funciona todo correctamente, se realiza la
implementación final en el servidor específico de la intranet dentro de la
empresa.
Dotnetnuke es un gestor de contenidos Web. Está basado en .NET y es de
código libre. Integra dentro del mismo portal la parte de diseño y la parte de
gestión.

3.4 Nom bre de la ventana donde visualizamos y editamos la páginina

Editar una Página Web El aula tiene un sofisticado editor html integrado con el que se pueden generar complejos documentos que pueden ser interpretados por un navegador web. El editor de html del aula tiene un aspecto similar al de cualquier procesador de textos y permite dar formato a nuestros documentos dándonos la posibilidad, entre otras cosas, de incorporar tablas, imágenes, hipervínculos, etc. Para agregar un recurso de tipo Página web debemos activar el modo de edición y seleccionar la opción Editar una página web de la lista desplegable Agregar recurso.
AddWordWrap("slideText1", 30);

Se mostrará el siguiente formulario, en el que habremos de configurar los diferentes parámetros. Editar una Página Web
AddWordWrap("slideText2", 30);

Slide Nombre: Es el texto identificativo con el que quedará enlazada la página web en la página principal del curso, dentro de la sección elegida. Los estudiantes accederán al contenido de este recurso haciendo clic sobre este nombre, por lo que es importante que sea bastante descriptivo, a la vez que conciso. Resumen: Es una descripción muy breve del contenido del recurso. Se puede utilizar para adelantar a los estudiantes el contenido del mismo o sus objetivos. A este informe se puede acceder a través del enlace Recursos, dentro del bloque Actividades. Texto completo: Es el lugar dónde se añade el texto que se ofrece a los estudiantes. Editar una Página Web
AddWordWrap("slideText3", 30);

Ventana: Mediante este parámetro podemos hacer que el contenido del recurso se muestre en la misma ventana de navegación o en una nueva (popup). En el primer caso, se sustituirá la página actual por la del recurso y, en el segundo, se abrirá una nueva ventana del navegador. Si hacemos clic en el botón Mostrar ajustes podremos ajustar la nueva ventana dónde se visualizará el recurso. Editar una Página Web
AddWordWrap("slideText4", 30);

Visible: Podemos ocultar el recurso a los estudiantes seleccionando la opción Ocultar. Puede ser útil si no queremos mostrar todavía el recurso. Por último, hay que pulsar sobre el botón Guardar cambios. Editar una Página Web

3.5 Cuáles son las tres formas en que DW permite visualizar el documento para su edición

Con los botones de presentación en la esquina inferior izquierda, o en el menú Ver, podemos visualizar de distinta forma un mismo documento. Normal. En esta vista se pueden aplicar formatos y realizar la mayoría de las tareas habituales. Es la vista predeterminada. En esta vista no se ven los gráficos ni los encabezados y pies de página. Diseño Web. Se utiliza para ver el aspecto de un documento Web tal y como si se estuviera viendo en Internet con un navegador como Explorer o Netscape. Diseño de impresión. Esta vista permite visualizar la página tal y como se imprimirá, con gráficos, imágenes, encabezados y pies de página, etc.
Diseño de lectura . En esta vista desaparecen todas las barras, reglas, etc. y el documento se visualiza en dos páginas por pantalla en forma de libro. Además de esto se modifican las barras de botones y se añade una para desplazarnos más cómodamente por el documento. Botones anterior página y siguiente página respectivamente.

Esquema. En esta vista aparece un marco en la parte izquierda del documento que contiene un esquema del documento. Haciendo clic en los elementos del esquema nos desplazamos a esa parte del documento. Con esta vista se puede trabajar y examinar la estructura del documento. Se puede ver el documento en diferentes niveles, es útil para documentos largos que estén bien estructurados. Para sacar utilidad a esta vista hay que utilizar la característica Nivel de esquema, que consiste en asignar a los títulos de cada tema, capítulo, apartados,... de nuestro documento un nivel jerárquico. Se puede hacer de dos formas: la más cómoda es utilizar un estilo predefinido ( Título 1, Título2, ...) cada vez que escribamos un título en nuestro documento, y la otra forma es asignar el nivel manualmente en el menú Formato, Párrafo, Nivel de esquema.

.7 Que información nos proporciona la barra de estado que se encuentra en la parte inferior de la ventana
de Dreamweaver W

I. Abrir un nuevo gráfico II. Abrir el último trabajo que se modificó III. Abrir un trabajo previamente elaborado IV. Trabajar con la ayuda de una plantilla V. Utilizar un tutorial del programa VI. Conocer las novedades del programa En la parte inferior de esta ventana se encuentra una casilla que al encontrase desactivada, evita que aparezca esta ventana.

3.8 Forma de previsualizar en pantalla completa la página en el navegador.

Como diseñadores y desarrolladores web, que todos somos conscientes de que algunas de las más simples de herramientas pueden hacer un gran impacto en nuestro día a día de flujo de trabajo y la productividad. Utilizando un simple plugin para el navegador o aplicación ligera de Adobe AIR para automatizar y simplificar las tareas básicas que de otra manera sería innecesariamente largo y superfluo puede reducir las tareas a una fracción de segundo, haga clic o arrastrar y soltar acción.
Uso de aplicaciones de Adobe AIR y los complementos del explorador o los complementos, usted será capaz de hacer frente a todo, desde la edición de imágenes y la gestión de la combinación de colores a las imágenes de procesamiento por lotes, wireframing, depuración y pruebas del navegador.
Hemos seleccionado y una lista de 50 fantásticas aplicaciones de Adobe AIR, complementos de Firefox y plugins de Safari para simplificar las tareas y aumentando la productividad para los diseñadores y desarrolladores web

1. PAGINA WEB

WEB.

Una página Web, también conocida como una página de Internet, es un documento electrónico adaptado para la Web, pero normalmente forma parte de un sitio Web. Su principal característica son los hipervínculos de una página, siendo esto el fundamento de la Web.
Una página Web está compuesta principalmente por información (sólo texto o módulos multimedia) así como por hiperenlaces; además puede contener o asociar datos de estilo para especificar cómo debe visualizarse, y también aplicaciones embebidas para hacerla interactiva.

Un sitio web es un conjunto de páginas web, típicamente comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.
Una página web es un documento HTML/XHTML accesible generalmente mediante el protocolo HTTP de Internet.
Todos los sitios web públicamente accesibles constituyen una gigantesca "World Wide Web" de información (un gigantesco entramado de recursos de alcance mundial).
A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.
Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen muchos portales de pornografía en Internet, algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa e información económica en tiempo real, etc.

Empecemos por el principio y veamos que es un hosting. La palabra hosting viene del inglés y significa alojamiento. Es el término con el que se conocen los sitios donde normalmente se aloja una página web. No obstante normalmente los hostings también ofrecen servicios de correo electrónico, bases de datos, ftps y demás.
Basicamente a nivel hardware consiste en un servidor conectado a internet con una ip pública fija. En esa máquina servidora se ha de instalar software servidor http (apache, IIS, etc.), software servidor ftp, lenguajes de programación web (php, asp, java, etc), bases de datos (sql, oracle, mysql, etc.), servidores de correo electrónico, etc.
Una sola máquina servidora puede alojar multiples hostings. El número de hostings que aloja es algo que habrá que tener en cuenta a la hora de elegir, ya que dependiendo del tipo de nuestro sitio web requerirá más o menos recursos de la máquina y si está demasiado saturada, pues igual no nos sirve.
Dado que es un servicio bastante especifico en cuanto a infraestructura física se refiere y que expone la máquina que proporciona el hosting a todo internet, debe llevar una seguridad bastante elevada. Por lo general es un servicio que suele contratarse fuera de la infraestructura de las empresas o fuera de los domicilios particulares de los usuarios domésticos, y es por esto que existen compañías especializadas que ofrecen servicios de hosting. De estos servicios serán de los que hablaremos a lo largo de este blog.

Menos no hasta tener un volumen de negocio considerable. Logicamente cuando hablamos de hostings hablamos también de certificados, instalaciones específicas de aplicaciones para clientes con requerimientos especiales, y en definitiva un abanico de servicios lo más profesional y amplio posibles, para que sí te genere rentabilidad.La mejor opción es que ofrezcáis paralelamente servicios profesionales alternativos y complementarios, como pueden ser la ayuda en la migración de páginas webs, creación de aplicaciones, páginas, SEO, etc. Esto te puede ayudar mucho a que los clientes que tengas te referencien.Además si tienes un buen soporte humano y técnico, te lo agradecerán bastante.También te digo que hay dos tipos de clientes, los que pagan mensualmente normalmente buscan un servicio económico, y luego están los que pagan anualmente que suelen tener negocios consolidados y por supuesto pagan anualmente para quitarse de problemas.

Definición de los objetivos.

El primer paso, para la creación de páginas WEB bien estructuradas, es saber de antemano el mensaje que se desea transmitir. Las imágenes y los elementos a utilizar serán distintos si se plantea una WEB para vender un producto, o para dar información o para publicar un trabajo científico. En este último caso, la página debe dar una imagen más formal.

2. Perfilar una línea de diseño.

Hay que tener en cuenta que los WEBs profesionales tienen una apariencia más formal, y que su diseño es tan importante como el de la imagen de una institución.
En un plano más profesional, se debe cuidar la presentación, manteniendo siempre una imagen corporativa a lo largo de todas las páginas y un estilo adecuado al perfil de la institución. Esto te permitirá recopilar los materiales que incluirás en ella: imágenes, gráficas, impresos, formularios, logotipos, etc.
La línea de diseño debe ser coherente y homogénea, que mantenga una apariencia visual común: los mismos colores o motivos de fondo, el mismo estilo de líneas divisorias horizontales y verticales, los mismos iconos o viñetas o los mismos logotipos gráficos siempre en la misma posición de la página.
Su aspecto profesional con elementos comunes hará que los usuarios visiten las páginas con orden y no se pierdan pensando que están en otra Web.


3. Crear el organigrama de navegación.

A continuación debes planificar cómo van a desplazarse los usuarios por ellas. Se debe realizar un diagrama de flujo claro para definir los índices principales, las páginas secundarias y las ramificaciones de todos los documentos.
Si utilizas una sola página WEB y esta es muy extensa deberás poner enlaces a las diferentes partes del documento al principio y al final de tu página y de esta forma facilitar la lectura de la misma, sin tener que depender tanto de las barras de desplazamiento.

Una de las divisiones que podemos realizar entre todos los tipos de páginas Web existentes podría ser entre estáticas y dinámicas.
Una página Web estática presenta las siguientes características:
Ausencia de moviemiento y funcionalidades.
Absoluta opacidad a los deseos o búsquedas del visitante a la página.
Realizadas en XHTML o HTML.
Para cambiar los contenidos de la página, es imprescindible acceder al servidor donde está alojada la página.
El usuario no tiene ninguna posibilidad de seleccionar, ordenar o modificar los contenidos o el diseño de la página a su gusto.
El proceso de actualizacion es lento, tedioso y escencialmente manual.
No se pueden utilizar funcionalidades tales como bases de datos, foros, etc.
Por el contrario, una página Web dinámica tiene las siguientes características:
Gran número de posibilidades en su diseño y desarrollo.
El visitante puede alterar el diseño, contenidos o presentación de la página a su gusto.
En su realización se utilizan diversos lenguajes y tecnicas de programación.
El proceso de actualización es sumamente sencillo, sin necesidad de entrar en el servidor.
Permite un gran número de funcionalidades tales como bases de datos, foros, contenido dinámico, etc.
Pueden realizarse íntegramente con software de libre distribución.
Existe una amplia comunidad de programadores que brinda apoyo desinteresado.
Cuenta con un gran número de soluciones prediseñadas de libre disposición.
En definitiva, el concepto de página Web dinámica se ha impuesto en el mundo del diseño y de la empresa en Internet. Páginas como Yahoo!, Google, Amazon e incluso ésta, son excelentes ejemplosd e páginas Web dinámicas que permiten interactuar con el visitante y le ofrecen posibilidades realmente sorprendente: carritos de compra, posibilidad de incluir sus propias críticas en libros y discos, buscar en base a criterios determinados, participar en discusión...