crear una web

MODULO 1 - CURSO DE DISEÑO DE PÁGINAS WEB

En este módulo, conoceremos los conceptos más importantes del Internet, éste tema es de gran importancia para el excelente desempeño de los siguientes módulos.

Introducción al Internet
Servidores de Internet
Dominios y Hosting
Diccionario de Conceptos de Internet

Los servidores de internet son los encargados de recibir las peticiones que hacen los clientes de internet, los cuales envían información al servidor con la información solicitada, y éste les devuelve los datos de la información.

Los servidores de Internet son súper computadoras que tienen la capacidad de realizar operaciones de transmisión de datos de manera muy rápida.

estamos escribiendo el Dominio de la página web:

Ejemplo:

Los dominios tienen varias extensiones: Los Dominios terminados en .COM son páginas de tipo Comercial, las terminadas en .NET son páginas de comunicación, las terminadas en .GOV son para entidades del gobierno, las terminadas en .EDU son para instituciones educativas, etc.

LISTA DE DOMINIOS - DOMINIOS GENERICOS

Para adquirir un dominio, hay que registrarse en una empresa que tenga permiso de la ICANN (Entidad reguladora de dominios) y posteriormente comprar el dominio. Los dominios se pagan Anualmente y tienen un valor promedio entre $35.000 y $72.000 dependiendo de la empresa que registra el dominio.

Luego de comprar el dominio, hay que configurarlo para que pueda funcionar en la red de redes:

1. Configurar los DNS: Los DNS son los Nombres de Dominio que contienen la información de enrutamiento hacia el servidor hosting, Esta información de enrutamiento son los IP del servidor de Hosting. Un dominio no sirve de nada, si no se configura en un servidor de Hosting.

2. Configurar la información de Contacto: Los dominios tienen diferente informacioón de contacto, está la información de contacto del Registrante, la información de contacto de la parte técnica del dominio, la información de contacto de la entidad que registra el dominio, etc.

3. Luego de realizar estos cambios, se debe esperar alrededor de unas 24 horas para que ésta información se vea reflejada en todo el mundo.

EL SERVICIO DE HOSTING

Existen servidores que se encargan almacenar la información completa de una página web. A este servicio de almacenamiento se le conoce como Servicio de Hosting.

El servicio de Hosting es de gran importancia para poder estar en internet, sin éste servicio no podríamos guardar nuestras páginas web para que puedan ser visualizadas.

El servicio de hosting tiene varias características:

Espacio Web: Cantidad de Disco disponible para almacenar nuestro sitio web.
Ancho de Banda: Cantidad de datos que se pueden transferir mensualmente. Para medir el ancho de banda, se toma el tamaño en megas de los datos.
Cuentas de Email: Número de casillas de correo que tenemos disponibles. También existen lo que se conoce como Alias de Correo, que son correos que redireccionan la información de un email recibido por el alias, a un correo especificado.
Servidor FTP: Es un servidor que sirve para conectarse a nuestro servidor web a través de el protocolo FTP. Esto nos permite manipular los archivos que se encuentren en nuestra página web.
Servidores POP: Este servidor nos permite revisar nuestro correo de email. A través de él, podemos manipular los correos (leer, borrar). para poder enviar un correo necesitamos del Servidor SMTP.
Servidores SMTP: Es el encargado de enviar los mensajes de email.
Lenguajes de Programación admitidos: son los diferentes lenguajes de programación que se pueden ejecutar en nuestro servidor. Estos lenguajes dependen del tipo de servidor en el que estemos: Si nuestro servidor es Windows, podemos ejecutar los lenguajes: ASP, ASP.NET1, ASP.NET2 (Codebehind), Perl 5.x, C++, SSI, algunos servidores windows, tienen instalado APACHE WEB SERVER que permite ejecutar los lenguajes PHP; Los Servidores que estan bajo Linux pueden ejecutar: HTML, VRML, Java, Perl, PHP4, TCL, Python, CGI, SSI, JavaScript.
Estadísticas: El interés de todo webmaster o propietario de un sitio web, es ver cuanta gente entra a la página, cual es la página mayor visitada, de donde provienen los visitantes, cual es la palabra que más buscan, etc. Para saber ésto, es necesario tener instalado un software de estadísticas, los más conocidos son: WebAlizer, AWStats, Urchin, WebStats, etc.
Panel de Control: Es el software que nos permite manipular nuestro sitio web: Crear Emails, Subir Archivos, Instalar Aplicacines, etc. Existen diferentes software para panel de control dependiendo también del tipo de servidor (Windows o Linux) algunos software están diseñados para manipular ambos entornos.

El resto de características del servicio de hosting, ya dependen del proveedor del servicio, algunos tienen scripts que pueden ser instalados desde el panel de control tales como: OsCommerce (Comercio Electrónico), PHPBB (Foro de Discusión), PHP-Nuke (Manejador de Contenidos), etc.

Ancho de banda: Medida de capacidad de comunicación o velocidad de transmisión de datos de un circuito o línea. En un servicio de Hosting, Esta es la que limita cuanta transferencia mensual se transferirá a todos los que ingresen a la página web. Por ejemplo: Si nuestro hosting tiene 20.000 Mb. de transferencia mensual, eso quiere decir que aproximadamente podríamos recibir en promedio entre 20.000 y 40.000 Visitas Mensuales. Un ejemplo más claro sería que en nuestra página web tengamos un archivo para descarga de 1Mb, si 10 personas descargan ese archivo, quiere decir que se ha usado un ancho de banda de 10 Mb quedandonos disponibles 19.990 Mb.

Antivirus: Programa dedicado a detectar la existencia de virus en el computador y a eliminarlos, en caso de encontrarlos. Para hacerlo, emplea un módulo que revisa los archivos y otro que limpia, Normalmente se utiliza el internet para actualizar la definición de los virus del programa (serie de secuencias para detectar los nuevos virus y poder eliminarlos); Esto es de grán importancia para eliminar los nuevos virus.

Attachments: Archivos o carpetas que se envían adjuntos a un mensaje de correo electrónico. Estos pueden ser imágenes, información, audio o video.

AVI: Audio-Video Interleave. Estándar de video de Microsoft Windows.

Banner: Banner en español es bandera, estandarte. Generalmente encontrarás que, al hablar de un banner, es una imagen de tamaño especial, que se usará para anunciar páginas o productos en Internet. Banners publicitarios o de intercambio de páginas, servicios o productos. Son más frecuentes en los Portales.

Banda Ancha: Ruta o línea de comunicación de gran capacidad. Normalmente implica una velocidad entre 128 Kbps hasta unos 1544 Mbps.

Buscador: Es una página donde se han dado de Alta las páginas de Internet, de esa manera es mas fácil encontrar información mediante los Meta Tags de las paginas. Los buscadores más famosos son Yahoo y Google. Sin los buscadores sería prácticamente imposible encontrar páginas con los temas de nuestro interés.

Browser: Por Browser o Navegador se define al programa que nos permite visualizar los contenidos de la World Wide Web. El primer browser con interfase gráfica fue el Mosaic inventado en 1992. A este browser le siguió el Netscape Navigator y finalmente el Internet Explorer.

CD-ROM: Sigla que significa Compact Disc-Read Only Memory o Disco Compacto-Memoria Sólo de Lectura (no pueden ser grabados). Contienen información digital, vale decir, datos que pueden ser representado por bits: combinaciones de unos y ceros. Así, a nivel microscópico, se puede encontrar en los surcos del CD pequeñas muescas y sectores planos, para indicar esos unos y ceros, que son leídos mediante un rayo láser, que va recorriendo la superficie del disco mientras éste va girando. (Música, video, informacion, etc)

CHAT: Conversación en tiempo real a través de Internet. Si bien se aplica preferentemente a conversaciones a través de mensajes escritos, también existen Chat que incluyen intercambio de sonidos (voz) e imagen (video). (Net meeting)

Cookie: Es un archivo que se graba en tu disco duro y que es generado a partir de la visita a una página web. El objetivo de este archivo es dar a conocer cuáles son tus preferencias del sitio web visitado que generó tu cookie, para darte una atención personalizada.

Cursor: Pequeña flecha u otro tipo de indicador que se desplaza sobre la pantalla del ordenador, manejado por el ratón.

Cracker: Delincuente que accede ilegalmente a sistemas informático para destruir información, modificarla o, en general, causar daño.

Dirección IP: Descripción formal de una dirección de Internet estándar, que utiliza números en lugar de nombres (dominios).

Dominio:El dominio es la palabra que hace referencia al nombre que tiene una página web en Internet. De esa forma si tu quieres tener un site con nombre propio, por ejemplo joseperez.com debes registrar el dominio y comprarlo en Networksolutions u otra empresa autorizada para vender dominios. La compra la efectúas a través de tu tarjeta de crédito internacional.

Download: Se conoce como Download a la descarga de información que va de un servidor a una computadora personal. Información que puede ser texto, imágenes y audio.

Driver: Controlador de dispositivo. (Controladores)

DVD: Significa Digital Video Disc. Se trata de un nuevo sistema de almacenamiento de video, muy parecido en su formato a un láser disc, pero con mayor capacidad.

E-Commerce: Comercio-e. Comercio electrónico es aquel que se realiza a través de Internet.

E-mail: Correo-e. El correo electrónico es el servicio más antiguo y básico. Además es el más utilizado en Internet. Permite intercambiar mensajes, programas, audio, vídeo e imágenes a los usuarios de Internet.

FAQ: Frequently Asked Questions, (Preguntas frecuentes) Recopilación de preguntas y respuestas que se plantean frecuentemente sobre un tema en particular. Se suelen construir a partir de mensajes enviados a grupos de news.

Fibra óptica: Tipo de cable que se basa en la transmisión de información por técnicas optoeléctricas. Se caracteriza por un elevado ancho de banda, y por tanto una alta velocidad de transmisión, y poca pérdida de señal.

Firewall: Cortafuegos. Máquina que se sitúa entre una red local y el resto de Internet para limitar el tráfico que puede pasar entre las dos redes. Una de las razones de su existencia es la existencia de crackers.

Formulario: En el Web, un servicio que permite introducir información a enviar a la ubicación web remota para procesarla.

Frames: Elementos HTML que permiten al navegador separar su ventana en unidades independientes para recibir código HTML distinto en cada una.

FTP: File Transfer Protocol. Protocolo de transferencia de ficheros. Uno de los protocolos más comunes para intercambiar ficheros entre ordenadores.

Gigabyte: Un Gigabyte es la medida de almacenamiento de información que hace referencia a una capacidad de un billón de bytes. En cuanto a equivalencias para que te quede más claro un gigabyte son 1000 megabytes.

Cibernauta o Internauta: Persona que "navega" por la Internet; es un nombre que se aplica desde fuera de la comunidad de usuarios: "Es un internauta".

Hacker: Persona altamente calificada, el cual ingresa a los servidores o computadoras, normalmente hace "travesuras" mas no causa daño, el propósito es dejar en claro que la seguridad en donde entro es vulnerable, a veces lo hacen simplemente para probar su destreza, a comparación del cracker que hace daño.

Hardware: Partes físicas que componen tu PC, como puede ser impresora, scaner, monitor, cámara, micrófono, bosinas, modem, etc.

Hosting, Servicio de Hosting, Alojamiento de páginas : Host en español es Anfitrion. Es el servidor en que se guarda cualquier información que estará disponible en Internet. Este servicio es de grán importancia si queremos estar en internet, ya que es aquí donde llegaremos cuando escribamos una direccion en nuestro navegador. Si la direccion que escribimos no tiene hosting, no aparecerá la página web.

Interactivo: Es aquel elemento (de una página Web o de un programa) que responde a las acciones del usuario.

Internet: Conjunto de millones de computadoras conectadas entre sí a nivel mundial. Se le conoce como la Red.

IP: Internet Protocol, el protocolo de comunicaciones que emplean (casi) todos los ordenadores en Internet.

ISP: (Internet Service Provider o proveedor) Empresa u organización que brinda el servicio de conexión a Internet.

Java: Ambiente de programación simple, robusto, de propósito general, dinámico, multitareas, independiente de plataformas y orientado al objeto. Permite crear tanto aplicaciones como pequeños programas para Internet, redes internas y cualquier otro tipo de redes distribuidas.

LAN (Local Area Network): LAN Siglas de Local Area Network que en español es Red de Area Local. Computadoras que trabajan entre si en un área pequeña, generalmente oficinas.

Línea Dedicada: Línea privada alquilada a una empresa de telecomunicaciones. Esta puede estar activa las 24 horas del día los 365 días del año.

Link: Hipervínculo con alguna otra página de la misma web o web remota, en multimedia también funciona el término.

Login: Es el nombre de Usario, el cual te permite identificarte en un servidor (Ver Servidor)
sea de tu proveedor de internet, de correo o para el uso de un programa. Nadie mas puede tener tu login, el cual, junto a tu Password (Ver Password) te permitiran hacer uso de ellos.

Mail: Ver E-mail.

Memoria CACHE: Es una memoria similar a la RAM, pero que tiene la particularidad de mantener por mayor tiempo la información; por este motivo, es usada como un método de acceso a los datos más rápido que la memoria RAM. Normalmente una Tarjeta Madre cuenta con 256 Kb y el máximo en la actualidad alcanza a 512 Kb.

Memoria RAM: Corresponde a la sigla del término inglés Random-Access Memory, memoria de acceso aleatorio. Es un dispositivo donde se guardan datos en forma temporal. Esta se ocupa durante la operación de los programas y mientras más grande sea, más fácil y rápido pueden correr los programas.

Mouse o Ratón: Dispositivo que permite transformar los movimientos de la mano del usuario sobre un plano en movimientos de un cursor sobre la pantalla del ordenador, para elegir y activar elementos.

Multimedia: Como su nombre lo dice multimedia es la unión de muchos medios y se utiliza para designar a aquellas presentaciones de productos audiovisuales en donde conviven el texto, la imagen en movimiento, el sonido y la animación. Por ejemplo un CD-ROM de una enciclopedia o una página web en donde están presente todos estos elementos.

Nickname: En español Nickname es sobrenombre, apodo. Sobrenombre que se usa en los chats, correos, grupos de noticias y en general en Internet para ser identificados. Puede ser un sobre apodo registrado y que nadie mas tenga, o ser un sobrenombre que use el que primero entre al lugar.

Nodo: Punto de una red computacional. Puede ser una computadora personal, un servidor o un dispositivo de comunicación (router o enrutador, hub o concentrador, etc).

Página: Documento de hipertexto. La página es cada uno de los elementos que nos puede presentar un cliente Web. Las páginas contienen texto, enlaces, imágenes, y otros elementos multimedia.

Password (Clave de acceso): Password en español es Clave de acceso. El password es la palabra clave, que nadie mas que tu tiene por que saber, que junto a tu Nombre de Usuario o Login, te permite acceder a servicios y programas en
Internet o tu PC.

PORTAL: Se denomina portal a una página que pretende ser para el usuario común y corriente la puerta de entrada al fascinante mundo de Internet. El concepto apareció en Estados Unidos y está definido por una serie de servicios básicos con valor agregado que pretenden fidelizar al usuario para ser su página inicial o referencial. De esta manera casi todos los portales ofrecen acceso a un correo gratuito, noticias y un motor de búsqueda de información entre otras cosas. En la actualidad existe la idea de dividir a los portales en dos categorías. Aquellos denominados portales verticales, que no son otra cosa que páginas especializadas en una materia y portales horizontales, websites con canales de información de múltiples temas. Para terminar vale la pena señalar que una página web cualquiera no es un portal. Esta aclaración la hago por la constante confusión entre los nuevos usuarios.

QuickTime: Formato de video y audio creado por Apple y que soportan tanto Macintoch como Windows.

Red: Dos o más computadoras conectadas entre sí.

Servidor: Programa que permite a un ordenador ofrecer servicios a otro. También se denomina así al equipo que ejecuta el software de servidor. (Administrador)

Software: A diferencia del hardware, es lo que no se ve, es decir los programas y aplicaciones que están guardadas en un disco duro, CD-ROM o disquetes.  Ejemplo: (un programa).

SPAM: Se llama así al envio masivo con correo electrónico, es decir, mandar grandes cantidades de correo o mensajes muy largos a muchos usuarios. Este puede ser enviado a nuestra base de datos "Limpia" con buen resultado. El SPAM no esta penado por la ley pero hay que considerar poner el aviso de "Remover" para no ser considerado como tal.

TCP: Transmission Control Protocol, es uno de los protocolos de comunicaciones sobre los que se basa Internet. Posibilita una comunicación libre de errores entre ordenadores en Internet.

TCP/IP: Transfer Control Protocol / Internet Protocol. Familia de protocolos que hace posible la interconexión y el tráfico de red en Internet. Los dos protocolos más importante son los que dan nombre a la familia, TCP e IP.

URL: Uniform Resource Locator. Utilizado para especificar la dirección de un objeto (archivo, grupo de news, etc.) en la red.

VGA: (Video Graphics Array o Arreglo para Gráficas de Video) Sistema introducido en 1987 por IBM que ofrece diversas formas de usar una pantalla, variando para ello la cantidad de píxeles que emplea. Las resoluciones más usadas son 800 X 600 y actualmente 1024 X 768

Vínculo: Conexión lógica desde una posición en una página web a otro recurso.

Virus: Programa cuyas instrucciones se ejecutan sin que el usuario se dé cuenta. Normalmente están diseñados para causar problemas, como borrar archivos o el disco duro del computador.

WINZIP: Winzip es un utilidad de compresión que permite a los usuarios reducir el tamaño de sus archivos para transferirlos más rápidamente a través de Internet. Esta utilidad también descomprime archivos comprimidos con formatos PKZIP o TAR. ver: ZIP www.winzip.com

Web Master: Operador del sistema de un sitio Web.Es la persona que se encarga de administrar, actualizar la información y contenido de un sitio web.

WWW (World Wide Web): Sistema de Internet para vincular mediante hipertexto en todo el mundo documentos multimedia, permitiendo un fácil acceso, totalmente independiente de la ubicación física, a la información común entre documentos.

ZIP: "Zipear" (es decir, hacer una copia de menor tamaño, pero igual) un archivo mediante "winzip", el archivo resultante se denomina un archivo "zip". Suele terminar con la extensión ".zip". Hacer una compresión de una carpeta o archivo.

Archivos más comunes utilizados en páginas web

.JPG: Es la abreviatura de JPEG, un popular estándar de compresión para fotografías y otras imágenes.

.GIF: Significan Graphics Interchange Format (formato de intercambio de gráficos), un estándar creado por Compu Serve a finales de los 80. Ambos formatos de gráficos son independientes de plataformas, lo que quiere decir que los puede usar en una máquina PC, Mac o UNIX, siempre y cuando usted tenga un visualizador para ellos.

.AVI: Formato de video sumamente pesado, hecho para PC

.BMP: Bitmap, es el formato gráfico más usado para almacenar imágenes en ambiente Windows.

.MPG (abreviatura de MPEG), el cual es independiente de cualquier plataforma, pero requiere su propio reproductor

.MOV y .QT: Para películas QuickTime. Fue desarrollado inicialmente sólo para Macintosh, pero ahora se ejecuta en Windows y UNIX también.

.MP3: Archivo de sonido más popular tanto para Mac como para PCs.

.WAV: El formato de sonido nativo para Windows.

Terminología del Internet en el desarrollo y diseño de páginas web

HTML: Lenguaje de programación básica que se utiliza para desarrollar páginas NO DINAMICAS.

ASP/PHP/ASPNET/CGI/JAVASCRIPT/ADO/BVSCRIPT: Lenguaje de programación avanzado que se utiliza para desarrollar páginas DINAMICAS.

TABLAS: Son utilizadas para el diseño de páginas web con características de precisión en el tamaño de la página.

FRAME/IFRAME: Son ventanas que se acoplan a una página y contienen información distinta al de la pagina principal. También pueden ser utilizadas como ventanas flotantes.

ETIQUETAS: Son divisiones que se utilizan para definir un objeto dentro de una página web, también sirven para asignarles propiedades a dichos objetos, como nombre, tamaño, color, etc.

FORMULARIO: Se utilizan para capturar información de un visitante

LAYERS: Igual que los iframes, son ventanas flotantes.

Programas de Diseño de Páginas Web

Para diseñar una página web , no es necesario de utilizar un programa especifico, si conocemos el código HTML, podríamos desarrollar nuestras páginas web incluso, desde el NotePad que viene con el Windows.

 Para comprobarlo, hagamos la siguiente tarea:

1. Abrimos nuestro editor de texto NOTEPAD o Bloc de Notas. (Inicio » Programas » Accesorios » Bloc de Notas)
2. Al abrir el programa, escribamos el siguiente código:

<html>
<head>
<title>Bienvenidos a mi pagina web</title>
</head>
<body>
este es el contenido de mi primera pagina web
</body>
</html>

Al terminar, le damos Archivo » Guardar y le colocamos como nombre: pagina.html. Ahora abrimos el archivo y vamos a ver algo como esto:

Esto es una sencilla página web, en la que tenemos: Título y Contenido textual. Vamos a explicar el código un poco, para que puedan entender lo que hace cada línea:

1. Línea: <html>

Para iniciar siempre una página web, debemos empezar a por la etiqueta <html>, esta etiqueta es necesaria para que nuestros navegadores puedan identificar el contenido que va a mostrar.

2. Línea: <head>

La etiqueta HEAD la contienen todos los documentos y es la cabecera de información y siempre aparece en la parte superior del documento.

3. Línea: <title>Bienvenidos a mi pagina web</title>

Se encuentra situado entre la etiqueta HEAD y es la que le da el título al documento. Por lo general aparece en la parte superior.

4. Línea: </head>

Este es el cierre de la etiqueta Head, Es necesario cerrar cada una de las etiquetas para que no existan errores.

5. Línea: <body>

La etiqueta BODY se pone después de la estructura HEAD y dentro del la etiqueta BODY se pone todo el contenido de la página web: imágenes, textos, ligas (links) etc. La etiqueta BODY es importante para que no se pierdan los parámetros de otras etiquetas.

6. Línea: este es el contenido de mi primera pagina web

Esta frase es el contenido de la página web, si queremos ver mucho más contenido, puedes escribir más texto en esta parte.

7. Línea: </body>

Esta es la etiqueta de cierre de la etiqueta <body>

8. Línea: </html>

Esta es la etiqueta de cierre de la etiqueta <html>

Veremos un poco más acerca del código HTML en los siguientes módulos para realizar documentos web mucho más complejos.

Los programas que existen en el mercado, simplemente lo que hacen es escribir el código HTML solo con hacer unos simples clic desde el programa.

Los más utilizados son: Macromedia Dreamweaver, Microsoft Front Page, Adobe GoLive, HomeSite, Web Developer, etc.

En nuestro curso veremos todo sobre Macromedia Dreamweaver, Considerado como el más completo programa de diseño y programación de páginas web.

Macromedia Dreamweaver

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

Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver, o bien añadir objetos Macromedia Flash.

Dreamweaver también ofrece un entorno de codificación con todas las funciones, que incluye herramientas para la edición de código (tales como coloreado de código y terminación automática de etiquetas) y material de referencia de lenguajes sobre hojas de estilos en cascada (CSS), JavaScript, y ColdFusion Markup Language (CFML), entre otros. La tecnología Roundtrip HTML de Macromedia importa los documentos con código manual HTML sin modificar el formato del código. Posteriormente, si lo desea, puede formatear el código con el estilo que prefiera.

Dreamweaver permite crear aplicaciones Web dinámicas basadas en bases de datos empleando tecnologías de servidor como CFML, ASP.NET, ASP, JSP y PHP.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar métodos abreviados de teclado e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos, inspectores de propiedades e informes de sitios.

Descargar Macromedia Dreamweaver

Dentro del curso de Diseño de Páginas web, vamos a utilizar Macromedia Dreamweaver. Para que puedas desarrollar todas las tareas y aprender más de ésta herramienta, debemos descargar la versión gratuita de 30 días. Esta versión nos permitirá desarrollar todas las tareas sin limitaciones.

Para descargar, debemos hacer clic en este enlace: www.adobe.com/la/products/dreamweaver Cuando entremos a éste sitio, debemos hacer clic en "Versión de prueba gratuita para 30 dias"

Al ingresar en este Link, vamos a encontrar un formulario en donde nos piden un Email y la clave de acceso, como nosotros no tenemos esta clave de acceso, debemos crear una cuenta

Para crar nuestra cuenta, debemos ir al formulario en la parte de Inscríbase o inicie una sesión ahora, Ahora en el formulario, debemos ingresar nuestro Correo Electrónico, y como no tenemos una clave de acceso, en la pregunta de "Tiene una contraseña para Adobe", seleccionamos: No, creare una cuenta ahora. y luego hacemos clic en el botón Continuar.

La siguiente página, nos muestra un formulario más completo en el cual, debemos llenar todos los campos que tengan el asterisco rojo *

Cuando finalicemos, recibiremos un email confirmando nuestra cuenta de acceso y luego, ingresamos nuevamente a: www.adobe.com/la/products/dreamweaver, hacemos click en Versión de Prueba Gratuita y luego llenamos el formulario con los datos que recibimos en el email.

Cuando le demos en Continuar, entraremos en una nueva página donde nos muestran todos los productos Macromedia que podemos descargar de forma gratuita.

Para este curso, debemos descargar el Macromedia Dreamweaver Versión Español:

Instalando el Macromedia Dreamweaver

Cuando descarguemos el archivo, debemos ejecutarlo para poder instalarlo en nuestro computador, al hacerle doble clic, veremos la siguiente ventana:

Cuando le demos finalizar, nos pregunta si tenemos un serial para nuestro equipo, debemos seleccionar EVALUAR. Luego nos muestra una pequeña ventana que pregunta acerca del modo de programación, debemos seleccionar MODO DISEÑADOR y listo. Ya tenemos instalado nuestro MACROMEDIA DREAMWEAVER.

Espacio de Trabajo del Dreamweaver

El espacio de trabajo del macromedia dreamweaver es muy parecido a un documento de Microsoft Word o Similares. Tenemos barras de herramientas que nos ayudan a visualizar y construir nuestro código de forma muy rápida, estas herramientas son: La Barra Insertar, Barra de herramientas de documento, Ventana de Documento, Grupos de Paneles, Selector de Etiquetas, Inspector de Propiedades y nuestro Panel de Archivos. A continuación veremos una explicación más detallada de estas barras de herramientas.

Vista de los Documentos de Página

El dreamweaver tiene dos modos para visualizar el documento en el cual estamos trabajando:

La vista Diseño es un entorno de diseño para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.

La vista Código es un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código.

Barra de Herramientas del Documento

En la barra de herramientas de 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 documento y la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en 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 de tí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 distintos navegadores.

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 un navegador. 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. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se 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 a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.

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

Barras del Espacio de Trabajo

BARRA DE ESTADO

La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.

El selector de etiquetas muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido.

La herramienta Mano permite hacer clic en el documento y arrastrarlo hasta la ventana de documento.

La herramienta Zoom y el menú emergente Establecer nivel de aumento permiten establecer el nivel de ampliación del documento.

El menú emergente Tamaño de ventana (que sólo aparece en la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas.

A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.

LA BARRA INSERTAR

La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.

Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.

La barra Insertar está organizada en las categorías siguientes:

La categoría Común permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.

La categoría Diseño permite insertar tablas, etiquetas div, capas y marcos. También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de diseño, se pueden utilizar las herramientas de diseño de Dreamweaver: Dibujar celda de diseño y Dibujar tabla de diseño.

La categoría Formularios contiene botones que permiten crear formularios e insertar elementos de formulario.

La categoría Texto permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.

La categoría HTML permite insertar etiquetas HTML para las reglas horizontales, el contenido de la sección head, las tablas, los marcos y los scripts.

Las categorías de código de servidor sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.

La categoría Aplicación permite insertar elementos dinámicos como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.

La categoría Elementos Flash permite insertar elementos de Macromedia Flash.

La categoría Favoritos le permite agrupar y organizar los botones de la barra Insertar que utiliza con más frecuencia en un lugar común.

BARRA DE HERRAMIENTAS DE CODIFICACION

La barra de herramientas de Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al código e insertar fragmentos de código utilizados recientemente. La barra de herramientas de Codificación sólo está visible en la vista Código y aparece verticalmente en el lado izquierdo de la ventana de documento.

IINSPECTOR DE PROPIEDADES

El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen en la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).

PANEL DE ARCHIVOS

El panel Archivos se utiliza para ver y administrar los archivos del sitio de Dreamweaver

.

Adquiriendo un Hosting Gratis

Para realizar los primeros ejemplos y diseñar nuestro sitio web, debemos tener un servidor de hosting en donde podremos subir los archivos de nuestra pagina y poder visualizarla desde internet. Para configurar un hosting gratis, debemos seguir los siguientes pasos:

PASO 1

Debemos de crear una cuenta en un servidor de hosting (dominio) gratuito para poder alojar nuestra pagina donde desarrollaremos las actividades del curso, en este caso utilizaremos los servicios que nos ofrece lycos: http://www.tripod.lycos.es

Al ingresar a la página veremos lo siguiente:

Ahora debemos hacerle clic en el botón REGISTRATE que se encuentra en la parte izquierda de la página. Al hacer esto, veremos la siguiente página:

Debemos darle en el boton aceptar para poder continuar con el siguiente paso, en el cual, nos piden nuestros datos para que ellos puedan configurar el hosting gratis:

Es importante que llenemos todos los campos que tengan (*), ya que si no se llenan, no podremos continuar con el siguiente paso. LAMENTABLEMENTE, en la parte de Pais, no se encuentra COLOMBIA, por lo tanto, seleccionamos ESPAÑA y en codigo postal escribimos NA.

Cuando llenemos todos los datos, veremos la siguiente página, en la cual nos dice que debemos entrar a nuestro correo y activar la cuenta.

Al revisar nuestra cuenta de email, y hacerle clic en el enlace que nos indican, veremos la siguiente página:

Ahora llenamos los datos que nos solicitan que es la clave del servidor FTP para poder subir los archivos al servidor. Llenamos todos los datos y le damos clic en Siguiente. Al hacerle clic veremos la siguiente página:

Para finalizar con el proceso de registro, debemos hacerle clic en Comenzar a usar mi cuenta la cual nos lleva a la pagina de Login en donde escribiremos nuestro usuario y contraseña:

Cuando iniciamos sesion, entraremos a nuestro pánel de usuarios del hosting. en donde podremos modificar los datos de la cuenta.

Para acceder a nuestra página web, debemos escribir la direccion que aparece en la parte de TU SITIO, en donde dice: Tu Url del Sitio.

Para acceder al FTP y subir los archivos, debemos configurar nuestro Macromedia Dreamweaver para subirlos directamente desde el programa.

Configurando nuestro sitio web

Para configurar nuestro sitio web, debemos seguir los siguientes pasos:

Para comprobar que nuestra configuración del servidor FTP, debemos hacer clic en Conexión de Prueba, si el macromedia muestra un mensaje de conexión exitosa, entonces, procedemos al siguiente paso:

Al hacerle clic en LISTO, vamos a finalizar de configurar nuestro sitio web. Ahora ya podremos realizar nuestros primeros ejemplos de diseño de páginas web en nuestro siguiente módulo.

Tipos y Categorías de una página web

Antes de diseñar y desarrollar una página web, debemos tener muy claro el tipo de diseño que queremos hacer. Por ejemplo: si nuestra empresa vende productos, nuestra página debe ser de tipo catalogo virtual. Si nuestra empresa ofrece servicios, la página debe ser de tipo profesional.

PRIMER TIPO:
Informativas (Sencillas)