Como Crear Tu Web Desde Cero por misa2pac (misa2pac22, el inquisidor)

Material: http://www.mediafire.com/?xn18f30r8tmqi97 Dreamweaver: http://tl.gd/c28dq6 Contacto:

Marcadores:

Estilo CSS

Cdigo HTML-PHP

[Tutorial] Creando un sitio web desde 0

Hola amigos de T! en el siguiente tutorial les mostrare a crear una web partiendo desde 0 sin ningn conocimiento, ser una web bastante bsica, puesto que la mayora de los usuarios no posen conocimientos programacin HTML, PHP, CSS, JAVASCRIP, etc.

Introduccin La Internet es un conjunto descentralizado de redes de comunicacin interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes fsicas heterogneas que la componen funcionen como una red lgica nica, de alcance mundial. Sus orgenes se remontan a 1969, cuando se estableci la primera conexin de computadoras, conocida como ARPANET, entre tres universidades en California y una en Utah, Estados Unidos. Uno de los servicios que ms xito ha tenido en Internet ha sido la World Wide Web ( WWW, o "la Web" ), hasta tal punto que es habitual la confusin entre ambos trminos. La WWW es un conjunto de protocolos que permite, de forma sencilla, la consulta remota de archivos de hipertexto. sta fue un desarrollo posterior (1990) y utiliza Internet como medio de transmisin. La web est disponible como una plataforma ms englobada dentro de los mass media. Para "publicar" una pgina web, no es necesario acudir a un editor ni otra institucin, ni siquiera poseer conocimientos tcnicos ms all de los necesarios para usar un editor de texto estndar. A diferencia de los libros y documentos, el hipertexto no necesita de un orden lineal de principio a final. No precisa de subdivisiones en captulos, secciones, subsecciones, etc.

Creando un sitio web desde 0

En la red, existen abundantes recursos que permiten seguir paso a paso el proceso de crear un sitio web. Sin embargo, Estos estn enfocados a crear sitios web, extremadamente bsicos que carecen de aplicacin en la actualidad. Este curso pretende formar y guiar el proceso que acompaa la creacin de un sitio web ms especializado.

Lo necesario
nicamente necesitaremos saber leer, y una conexin a internet, pues los recursos que utilizaremos estn disponibles en la red de manera gratuita.

1. Conceptos bsicos
1.1 Software Necesario
En cuanto al software que utilizaremos, ser Dreamweaver, Es una de las herramientas ms completas con las que disponemos actualmente. Si bien es de pago, podemos descargarnos una versin de prueba a fin de seguir este tutorial. O bien, buscar alguna alternativa full en sitios como Taringa. NOTA: El 90% del curso puede seguirse utilizando cualquier editor de cdigo fuente como el HTML-Kit o bien KompoZer (ambos totalmente gratuitos). Adobe Dreamweaver es una aplicacin en forma de estudio (enfocada a la construccin y edicin de sitios y aplicaciones Web basados en estndares. Es el programa de este tipo ms utilizado en el sector del diseo y la programacin web, por sus funcionalidades, su integracin con otras herramientas como Adobe Flash En este curso, utilizaremos la versin CS3, puesto que el CS5 es un poco trabajoso con las opciones que tiene para los que no conocen. Pues es una combinacin de eficiencia y funcionalidad. Por qu no utilizar algn software gratuito? Aun no existen herramientas verdaderamente maduras. (En cuanto al diseo web) que puedan obtenerse gratuitamente. URL descarga: http://tl.gd/c28dq6

Sea que hayamos descargado el trial, o bien hayamos obtenido alguna versin menos legal de Taringa. El proceso de instalacin ser relativamente sencillo y no vale la pena detallarlo aqu.

1.2 El espacio de Trabajo

Es hora de iniciar con la creacin de nuestro sitio web, sin embargo, es importante que configuremos nuestro espacio de trabajo. As pues, ejecutaremos el Dreamweaver y veremos algo como esto:

Aunque contamos con muchas opciones, y de hecho la posibilidad de utilizar plantillas predefinidas, en este caso, vamos a trabajar en un espacio completamente nuevo. As pues, vamos a seleccionar la Opcin Sitio de Dreamweaver.

Se nos solicitara ingresar un nombre para nuestro sitio. Yo escribir MiPrimerSitio Sin embargo, ustedes pueden seleccionar el nombre que mejor les parezca. As mismo se nos solicita ingresar una URL. Este espacio lo dejaremos en blanco por el momento pues no vamos a trabajar aun con un servidor en la red. Hacemos clic en Siguiente

Vamos a seleccionar No Por el momento, no nos har falta un servidor. Ya ser en la segunda parte de este curso que utilizaremos tecnologas como php. Solo nos queda hacer Clic en Siguiente.

Aqu podemos seleccionar la ruta para nuestros archivos locales. Yo lo dejare por defecto, la ruta sealada es el directorio raz de Mis Documentos. Clic en Siguiente Cuando se nos pregunte como nos conectaremos con nuestro servidor remoto, seleccionaremos Ninguno y hacemos clic en Siguiente.

Una vez que hemos completado la configuracin del nuevo sitio, veremos de nuevo la pantalla de bienvenida, sin embargo en el administrador de archivos, veremos algo como esto.

Esto nos permitir mantener el orden del sitio y almacenar todos nuestros archivos, as mismo creara rutas relativas al sitio y no rutas absolutas lo que nos permitir crear hipervnculos con ms facilidad, pero ese es otro tema. Es hora de crear un Nuevo HTML.

Ahora si, por primera vez podemos observar nuestro espacio de trabajo. Pero, que son todas esas barras y opciones? La barra Insertar, nos permitir manipular fcilmente algunos elementos y objetos que eventualmente utilizaremos.

Adems, contamos con la barra de propiedades, en ella podremos definir algunos elementos importantes, claro que en primera instancia aprenderemos a trabajar sin estas facilidades.

El lienzo, es probablemente el panel ms importante y representa el cuerpo de nuestros documentos.

Adems, Incluidos en el espacio de trabajo, se encuentran el inspector de CSS, El inspector de etiquetas y administrador de sitios. Todas herramientas que utilizaremos ms adelante.

1.3 El lenguaje de las etiquetas HTML

Hasta este punto, hemos evitado la mencin del susodicho lenguaje, pero. Que es HTML? Wikipedia lo define como HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboracin de pginas web. Es usado para describir la estructura y el contenido en forma de texto, as como para complementar el texto con objetos tales como imgenes.

Y de hecho, la definicin es excelente, sin embargo, simplificndola un poco. Es un lenguaje de etiquetas que se utilizan para dar formato a un documento HTML. Dicho documento es interpretado por un navegador para mostrarte lo que da a da ves en internet. Al no ser un lenguaje de programacin, no arrojara errores, si el lenguaje es ilegible, simplemente no ser interpretado.

1.4 Documentos HTML

Los documentos HTML (de extensin .HTML o .htm) son documentos cuyo formato debe ser interpretado por el navegador. Y son los que conforman las pginas web. Como todo, dichos documentos tienen una estructura bsica. Vamos a cambiar a modo cdigo en Dreamweaver para observar ms claramente de que hablamos.

Veremos algo como esto en nuestro lienzo

Todo documento HTML, debe iniciar y terminar con las etiquetas: <html> </html> Y claro, podemos identificar las etiquetas en un documento html pues estas estn denotadas por los signos <etiqueta> adems, toda etiqueta debe cerrarse si deseamos que la misma sea interpretada adecuadamente por el navegador. Una etiqueta de cierra con el signo / es decir </etiqueta> Adems, un documento HTML cuenta con dos partes claramente definidas. El encabezado y el cuerpo. Todo lo incluido en el encabezado es informacin para el navegador. Y lo incluido en el cuerpo es informacin para el usuario.

El encabezado del documento se define utilizando las etiquetas <head> </head> Y en l se incluye mucha informacin importante, como por ejemplo los documentos adicionales que deben ser cargados con el documento. Pero ms importante el titulo y la codificacin de la pagina. <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mi Primer sitio Web</title> </head> El title del sitio, es el nombre que vemos en las pestaas de nuestro navegador. Igualmente importante, tenemos el cuerpo del documento es decir todo lo incluido entre las etiquetas <body> </body> Este o no este formateado, cualquier texto que incluyamos en el cuerpo del documento, podr ser visto por quienes visiten el sitio. Si hemos comprendido estos conceptos, podemos hacer una pequea prueba. Para visualizar nuestro primer sitio, vamos a realizar las siguientes ediciones al cdigo fuente: <!DOCTYPE html PUBLIC "-//W3C//DTD "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mi primer sitio web</title> </head> <body> Este es mi primer sitio web </body> </html> Oprimiremos F12 y Dreamweaver nos preguntara si deseamos guardar el documento. Vamos a hacer clic en SI, y vamos a guardarlo con el nombre test.html XHTML 1.0 Transitional//EN"

Y pronto veremos en nuestro navegador el resultado de nuestra primera edicin

Si bien es un documento html bien estructurado, resulta muy simple, y claro no vamos a colgarlo en la red. Bueno, Es hora de empezar. Cerramos el test.html y vamos a crear un nuevo documento en blanco. Que guardaremos como index.html adems, en nuestro gestor de sitios vamos a hacer clic derecho y a crear una nueva carpeta llamada objetos

1.5 Editando Texto

El texto es probablemente una de las herramientas que mas utilizaremos en nuestros diseos. Y existen ciertas etiquetas especiales para darle formato. En primer lugar, un prrafo se denota por <p>Esto es un prrafo</p> Y claro, el texto, es una parte que deseamos pueda ser observada por el usuario, por tanto lo incluiremos dentro del cuerpo del documento Para realizar un salto de lnea, es decir, lo equivalente al Enter en un editor de textos cualquiera debemos insertar la etiqueta <br /> Tambin es importante mencionar algn formato bsico, como es el resaltar un texto en negrita o hacerlo cursivo, eso lo hacemos usando las etiquetas <b> y las etiquetas <i> as: <b>este texto esta en negrita</b> <i>este texto esta en itlica</i> Si incluimos los ejemplos anteriores en nuestro documento, obtendremos algo como esto:

Si oprimimos F12 y guardamos los cambios, veremos algo como esto en el navegador:

Tenemos un prrafo muy prolijo, sin embargo, no tiene ninguna clase de alineacin, justificado ni cualquier otro formato bsico. Para lograr un resultado ms elaborado, deberamos incluir en la etiqueta <p> ciertos atributos. Los atributos complementan la funcionalidad de una etiqueta, y algunos atributos no son exclusivos de la etiqueta en quistin. Es el caso del atributo align, cuyo valor debe estar encerrado entre comillas y puede ser: Para alinear al centro <p align=center>Esto es un prrafo</p> Para alinear a la derecha <p align=right>Esto es un prrafo</p> Para alinear a la izquierda <p align=left>Esto es un prrafo</p> O bien para justificar el texto <p align=justify>Esto es un prrafo</p> Y podemos incluirlos dentro de nuestro ndex de la siguiente manera

NOTESE que se han creado dos prrafos independientes Como habremos notado, Dreamweaver tiene la capacidad de autocompletar, herramienta que nos puede resultar muy til a la hora de trabajar en modo Cdigo fuente Si consideramos el resultado de la edicin con la tecla F12, veremos algo como esto

Existen ciertos caracteres que no pueden ser incluidos de manera directa dentro del cdigo fuente. Si deseamos visualizar caracteres especiales en nuestro documento HTML debemos hacer uso de una extensa lista que contiene los respectivos cdigos de cada carcter. Caracteres especiales bsicos En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas comillas o un & con su correspondiente carcter.

Caracteres especiales del HTML 2.0

Caracteres especiales del HTML 3.2

Otros caracteres especiales

Resulta sin embargo, que utilizar esta lista es poco prctico, pero claro, tenemos una alternativa interesante y es a la hora de crear textos, podemos utilizar el editor grafico de Dreamweaver.

As, cada vez que insertemos un carcter especial, como por ejemplo Dreamweaver lo registrara automticamente como un carcter especial.

1.6 Enlaces
Esos elementos que no pueden faltar en un sitio web, que nos permiten relacionar nuestros documentos entre s y crear contenidos dinmicos. Los enlaces estn marcados por la etiqueta <a>enlace</a> siendo enlace la palabra a la que el usu ario tendr acceso, ahora. La etiqueta <a> por si sola, no tiene demasiada utilidad. Por lo que se utiliza el atributo href que indica la ruta que debe seguir el enlace. De modo que la estructura de un enlace estndar seria: <a href=ruta>Enlace</a> Siendo ruta, el documento destino o bien puede ser un enlace externo incluyendo <a href=http://ruta.com>Enlace</a>

Dentro de nuestro documento, podemos incluir entonces un enlace a Taringa a modo de ejemplo.

Que se ver en el navegador as

Con esta sintaxis hemos creado un enlace a Taringa que se abrir en la misma ventana. Cosa que aunque para los links internos del sitio est bien, si deseamos incluir un link externo puede resultar poco conveniente para hacer que el navegador abra la ruta en una nueva pestaa haremos uso de otro atributo de la etiqueta <a>. Me refiero al atributo target= que se utiliza as: <a href=http://www.taringa.net/misa2pac2 target="_blank"><i>Misa2pac2</i></a>

1.7 Los estilos CSS

Las hojas de estilo en cascada (en ingls Cascading Style Sheets), CSS es un lenguaje usado para definir la presentacin de un documento estructurado escrito en HTML usualmente resulta un dolor de cabeza aprender este lenguaje sin embargo, aqu lo haremos fcil ;-)

En primer lugar, vamos a crear nuestra hoja de estilos. Vamos a hacer clic en Archivo > Nuevo

Posteriormente, nos aparecer una nueva pestaa en nuestro espacio de trabajo. Dicha pestaa estar en blanco, pero por el momento es todo lo que tenemos. Y lo guardaremos como estilos.css

Una vez definida nuestra hoja de estilos, solo hace falta que incluyamos algo de contenido (claro que esta no es la parte mas fcil) sin embargo. Seguro que siguiendo el curso todo saldr como esperamos. Volvemos a nuestro index.html y vamos a relacionar nuestra hoja de estilos con nuestro sitio. Para eso, vamos a incluir una instruccin muy sencilla en nuestro encabezado. <link rel="stylesheet" href="estilos.css" type="text/css" media="all"> Aclaro que estoy utilizando una ruta relativa a mi documento html. Es decir estilos.css est en la misma carpeta que index.html

Vale, ahora vamos a editar algunos atributos de nuestro sitio utilizando las propiedades que definiremos en nuestra hoja de estilos CSS. Vamos a cambiar el color de fondo de nuestro sitio web, de esa manera comprenderemos mejor cmo funcionan las hojas de estilo. En nuestro archivo estilos.css vamos a escribir: body {background-color: #FFFFCC} Con body indicamos la etiqueta a la cual le estamos aplicando el at ributo, posteriormente agregamos el atributo, en este caso un color de fondo.

En nuestro navegador veramos algo como esto:

Como vemos, hemos dado a nuestro sitio un color amarillo que utilizaremos de base.

1.8 Insertando Imgenes

En primer lugar, debemos considerar la imagen que deseamos insertar en nuestro documento. Yo utilizare una imagen llamada equipo dicha imagen la incluiremos en nuestra carpeta objetos

Ahora, vamos a incluirla en nuestro documento utilizando la etiqueta <img> con e l atributo src= para sealar la ruta de la imagen <img src=objetos/equipo.jpg/> Podemos incluir la imagen dentro de un prrafo si deseamos alinearla. Es conveniente, que utilicemos el atributo alt en nuestras imgenes, que es un pequeo cuadrito q ue aparece cuando ubicamos el mouse sobre las imgenes

<img src=objetos/equipo.jpg alt="Equipo" /> Tambin, podemos aadirle algn atributo adicional si deseamos redimensionarla. Por ejemplo, podramos hacerla ms pequea si agregamos <img src=objetos/equipo.jpg width="400px" height="200px" alt="Equipo" /> Aplicando esto que hemos mencionado a nuestro cdigo fuente, veremos algo como esto:

Y en el navegador:

Nuestro sitio, poco a poco empieza a tomar forma ahora tiene una hoja de estilos, texto e imgenes, pero claro, no se mira demasiado elegante sino como un montn de elementos dispersos por todos lados.

Me gustara aclarar que los atributos de las imgenes, si bien pueden editarse a travs del cdigo fuente, resulta ms prctico utilizar el editor grafico de Dreamweaver, que permite redimensionar imgenes de manera grafica. As mismo aadirlas puede ser tan sencillo como hacer un Crtl + V

Edicin de imgenes utilizando el Modo Diseo:

Claro que estas tareas sencillas realmente son muy fciles desde el modo diseo, sin embargo, el conocer el Modo Texto nos facilitara las cosas ms adelante cuando debamos realizar operaciones ms complejas que solo pueden hacerse manualmente.

Una imagen tambin puede ser usada como enlace, lo que debemos hacer es agregar a la etiqueta <a><img></a> Sin embargo, si hacemos esto, aparecer un borde alrededor de nuestra imagen, que podemos solucionar agregando el atributo border=0 a nuestra imagen Resulta ms conveniente hacerlo desde nuestra hoja de estilos CSS as: img {border-style: none} De modo que ninguna imagen a la que agreguemos un enlace, tendr borde. <a href=http://www.taringa.net/misa2pac2 target="_blank"><img src="objetos/equipo.jpg" alt="Equipo" /></a>

1.9 Creando Clases

Vale, hasta el momento tenemos un sitio bastante rudimentario, hemos aprendido a insertar imgenes y aplicar atributos sin embargo, an estamos lejos de crear un sitio lo suficientemente profesional como para mostrrselo al mundo. Entonces, qu hace falta? En primer lugar, no hemos aprendido a maquetar una web, es decir estructurarla. Tambin debemos profundizar nuestros conocimientos sobre CSS. Pues refirindonos a las hojas de estilos, nos hace falta aprender a definir clases. Es decir, grupos de atributos que podamos aplicar a ciertas etiquetas. Por ejemplo, si quisisemos que todos nuestros prrafos estuvieran alineados al centro, podramos crear en nuestra hoja de estilos p {text-align:center} Sin embargo, es poco probable que deseemos que TODOS los prrafos de nuestro sitio estn alineados al centro, es por eso que vamos a crear una clase, que podamos usar con la etiqueta <p> Para definir una clase, basta con agregar un punto antes del nombre de clase es decir. .titulos Si creamos una clase llamada ttulos para ciertos prrafos podemos definir ciertos valores como por ejemplo:

.titulos {font-family:times#new#roman; font-size:30px; font-weight:bold; text-align:center}

Y ahora, para aplicar dicho estilo a un prrafo, vamos a agregarlo mediante el atributo class= <p class="titulos" align="center">Este es mi primer <b>sitio web</b></p> Dejando nuestro cdigo fuente de la siguiente manera:

Y mostrando como resultado final en el navegador:

NOTESE que al aplicar un estilo el formato previo, incluido en el documento es ignorado. Veremos ms el uso de las clases cuando empecemos a enmarquetar nuestro sitio sin embargo este es su funcionamiento bsico.

En este captulo, hemos aprendido los conceptos y tenemos las nociones bsicas sobre el lenguaje HTML y la creacin de un sitio web, El funcionamiento de las hojas de estilo y las clases. Aunque podramos continuar trabajando sobre nuestro index.html debemos aprender a trabajar con plantillas, que nos facilitaran el trabajo. As que nuestro ndex por el momento, ser solo una referencia. De aqu en adelante comienza el verdadero curso as que borramos nuestro viejo ndex y nuestro viejo css, y crearemos nuevos.

2. Creando nuestra plantilla.

Una plantilla la podemos definir como un elemento esttico en nuestro sitio, que contendr partes editables (estas sern independientes para cada pgina), as pues si deseamos editar algn elemento de nuestro sitio solo har falta remitirnos a la plantilla. Ahora, para poder definir los elementos editables y los no editables, debemos crear una estructura bsica en nuestro sitio web. Podemos usar para ello. Tablas o Capas. Este curso, utilizaremos capas, un mtodo ms limpio y profesional.

2.1 La estructura bsica

En primer lugar, crearemos un nuevo documento HTML. Adems conviene crear una nueva hoja de estilos a la que llamaremos estilos-general.css Vamos a relacionar nuestra hoja de estilos con el documento en cuestin. Justo como lo vimos en el captulo 1.7.

Una vez hecho esto, vamos a crear nuestras capas, la etiqueta que define a una capa es <div>. Una capa no es ms que un elemento rectangular que sirve para agrupar datos dentro de bloques en un sitio web. La posicin, y tamao de una capa, est definida por su clase o por su id de clase. Pero antes de empezar a escribir <div> a lo loco, hace falta que hagamos un pequeo esquema de la estructura que deseamos. Esto lo podemos hacer en cualquier programa para la edicin de grficos.

Por qu hacer esto? Aunque es un paso adicional, nos permite darnos una idea mas clara de lo que queremos hacer. Es muy importante que a la hora de disear estemos claros de lo que deseamos hacer, plantearnos un objetivo y alcanzarlo.

Una vez que tenemos una idea clara de lo que deseamos hacer, podemos empezar crear nuestras capas. Para crear una capa, basta con definir un texto entre las etiquetas <div></div> sin embargo, el hacerlo de esta manera solo agrupa el texto en bloques sin formato alguno. Ahora, un concepto que debemos tener claro es el de clase, pero ms importante el de estilos nicos pues son un identificador para cada capa. Si bien las clases las definimos con un . los estilos nicos los definimos con # Claro que el detalle del concepto siempre es algo vago, por eso vamos a aplicarlo a nuestra plantilla definiendo nuestros 5 capas principales (1 5) ms adelante explicaremos la capa global

En nuestra hoja de estilos vamos a incluir 5 nuevos estilos nicos y vamos a definir los colores de borde para cada uno. #head {border: 3px solid #0000FF} Como habremos notado, Dreamweaver nos echa una mano en este asunto y resulta muy fcil trabajar en el CSS del sitio con una herramienta tan completa. Y adems, con su selector de color, se hace mucho ms fcil el trabajo de diseo.

Ahora, solo hace falta que definamos nuestros divs en nuestra plantilla, pero primero vamos a guardarla como plantilla.html, una vez hecho esto vamos a definir nuestros divs de la siguiente manera <div id="estilounico">AlgunTexto</div> De modo que nuestro cdigo fuente quedara as:

Nuestra hoja de estilos: @charset "utf-8"; /* CSS Document */ #head {border: 3px solid #0000FF} #menu {border: 3px solid #FF6600} #contenido {border: 3px solid #FF0000} #publicidad {border: 3px solid #3399FF} #creditos {border: 3px solid #FFFF00} Y podemos visualizarlo en el navegador, aunque claro, aun no se parece demasiado a la estructura que buscamos.

Podemos agregar el fondo a nuestro sitio, Yo he decidido sea negro.

No hay de qu preocuparse. Mas adelante arreglaremos ese problemita con el texto (si, el que no se ve) por el momento hablaremos un poco de nuestro div global. Es decir, en nuestra plantilla de diseo, nuestro div 0. Es importante, pues con el definiremos el ancho de nuestro sitio. Mas adelante, hablaremos de resoluciones dinmicas, sin embargo por el momento, vamos a tratar la resolucin de nuestro sitio como un elemento esttico.

Al ser nuestro div, global el padre de todas nuestras capas. Debemos ubicarlo de la siguiente manera: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin t&iacute;tulo</title> <link rel="stylesheet" href="estilos-general.css" type="text/css" media="all" /> </head> <body> <div id="global"> <div id="head">Div. 1 Header</div> <div id="menu">Div. 2 Menu</div> <div id="contenido">Div. 3 Contenido</div> <div id="publicidad">Div. 4 Contenido</div> <div id="creditos">Div. 5 Creditos</div> </div> </body> </html> NOTA: Aunque html no es sensible al tabulado*, recomiendo utilizarlo para mantener el orden y estructura del sitio. Nuestro estilo nico global, dictara el tamao asignado al contenido de nuestro sitio, en este caso, por ser la resolucin ms usada. Vamos a definir el ancho de nuestra web en 800px. Cmo? Adivinaron, desde nuestra hoja de estilos. Adems, vamos a definir en nuestro estilo nico global el fondo de nuestro sitio. De nuestro contenido para ser exactos. NOTA: cada propiedad en CSS dese separarse por un ; #global {width:800px; margin:4px auto; background-color:#FFFFFF; border: 3px solid #999999}

As pues, nuestra hoja de estilos quedara:

Y nuestra vista previa en el navegador revela un resultado que cada vez parece ms una pgina web.

Ahora que hemos terminado con nuestro Div global, vamos a reubicar algunos elementos. Me refiero al Div 4. Vamos a ubicarlo encima del Div3.

Una vez hecho esto, vamos a editar las propiedades CSS de nuestros divs, ubicndolos como en nuestra plantilla de diseo. Vale, ahora vamos a darle un poco mas de forma a nuestro sitio, agregando un par de propiedades ms a nuestra hoja de estilos CSS. Estas ubicaran nuestros divs, en las posiciones que le indiquemos. As pues, vamos a comenzar con nuestro men. Este lo ubicaremos a la izquierda, donde usualmente estn ubicados los mens en un sitio web. Y le daremos un ancho de 150px.

#menu {border: 3px solid #FF6600; width:150px; float:left; padding:3px; height:auto; margin:5px } Indicamos en primer lugar que el ancho de la capa ser de 150 pixeles, estar flotando a la izquierda del contenido con un padding de 3 pixeles. El padding es una especie de borde interno que har que nuestros contenidos no estn muy pegados al borde de la capa As mismo, definimos la altura de la capa como auto es decir, estar en dependencia del contenido. El margen es ese espacio que vemos entre las capas. Lo mismo haremos para el Div 4 pero vamos a cambiar left por right, es decir, que este flotara a la derecha. #publicidad {border: 3px solid #3399FF; width:150px; float:right; padding:3px; height:auto; margin:5px }

Para nuestro Div nmero 3, vamos a alinearlo a la izquierda justo despus de nuestro men siempre agregando un padding de 3 pixeles y un margen de 5 #contenido {border: 3px solid #FF0000;

width:420px; height:auto; padding:3px; margin:5px; float:left; }

Una vez que hemos definido nuestros 3 divs principales, vamos a agregar un par de propiedades al head y a los crditos a fin de crear un poco de orden. #creditos {border: 3px solid #FFFF00; width:auto; height:30px; margin:5px; clear:both; }

OJO, Adems de los elementos que ya manejamos aqu utilizamos la propiedad clear, que nos dice que no permitir elementos flotantes ni a la izquierda ni a la derecha (por eso utilizamos both).

Para el head, solamente vamos a incluir un par de mrgenes que separaran nuestra cabecera del cuerpo del sitio #head {border: 3px solid #0000FF; margin:5px }

Al final, nuestro cdigo fuente (el de la hoja de estilos) debera lucir ms o menos as:

Ahora, podemos visualizar nuestro sitio en el navegador:

Ciertamente hemos alcanzado nuestro objetivo. Y por fin nuestro sitio tiene una estructura bsica. De modo que podemos empezar a trabajar sobre esta.

2.2 Men
El men, uno de los elementos ms importantes de nuestro sitio. Y es que permite a los usuarios navegar a travs de nuestro contenido. Ya que hemos designado un espacio para nuestro men es hora de construirlo. Vale, para crear nuestro men, vamos a utilizar listas. En HTML una lista se define con la etiqueta <ul> y cada elemento se marca con la etiqueta <li> de esta manera. <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 4</li> </ul>

Dicha configuracin, dara como resultado algo como esto:

Aunque claro, nuestro men, ser un poco ms elaborado, cmo? Muy fcil, y si, seguro lo has adivinado. Con nuestra hoja de estilos. En primer lugar, ya que hemos ubicado nuestro men, el feo borde anaranjado no nos har falta, por tanto vamos a removerlo. Lo que si agregaremos, es un tipo de letra un poco ms estilizada para nuestro men. Eso lo haremos agregando a nuestro CSS una propiedad llamada font #menu { width:150px; float:left; padding:3px; height:auto; margin:5px; font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif; } Ahora, vamos a definir las propiedades especficas para cada elemento HTML dentro del men, esto lo haremos utilizando la nomenclatura: #estilounico etiqueta {propiedades} Y como primer paso, vamos a quitarle a las listas dentro de nuestra capa, esas pelotitas negras que aparecen a la par del elemento sealado. As pues, vemos como asignamos la propiedad list-style-type y le damos un valor none a las etiquetas ul y li #menu ul, li {list-style-type: none; } Adems, quitaremos el margen y el padding a nuestro listado, lo que har ver los elementos del nuestro men, perfectamente alineados. #menu ul {margin: 0; padding: 0; } Y a cada elemento de nuestro men, vamos a darle un borde que har las veces de separador para los elementos del mismo.

#menu li{border-bottom:1px solid #000000; } Ahora, vamos a darle un estilo caracterstico a cada enlace dentro de nuestro men. Para eso utilizaremos las siguientes propiedades #menu a {text-decoration:none; color:#333333; background:#FFFFFF; display:block; padding:3px 6px; width:138px; } Con la propiedad text-decoration, indicamos que no deseamos que nuestros enlaces estn subrayados. La propiedad display, indica que cada enlace, generara un bloque caracterstico. Finalmente, vamos a agregarle a nuestro men una propiedad hover. Es decir que se activara cuando pasemos el mouse sobre l elemento. #menu a:hover {background:#CCCCCC; } Ahora, debemos agregar algunos elementos a nuestro men para poder visualizar el resultado. Claro que nuestro sitio no tiene ningn enlace, as que agregaremos algunos links ejemplo cuya ruta sea # (es decir, ninguna)

Nuestra hoja de estilos, debera verse algo as una vez finalizada la edicin. (Ojo que solo estoy colocando la parte en la que trabajamos) #menu {width:150px; float:left; padding:3px; height:auto; margin:5px;

font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif; } #menu ul, li {list-style-type: none; } #menu ul {margin: 0; padding: 0; } #menu li{border-bottom:1px solid #000000; } #menu a {text-decoration:none; color:#333333; background:#FFFFFF; display:block; padding:3px 6px; width:138px; } #menu a:hover {background:#CCCCCC; } Y si presionamos F12, podremos ver en nuestro navegador un bonito men.

2.3 Header
Probablemente una de las partes ms importantes de nuestro sitio, es lo primero que los usuarios ven, y debe ser llamativo, pero no excesivamente pomposo. De cualquier manera es algo muy personal. En primer lugar, vamos a eliminar ese molesto borde azul que no hace otra cosa ms que molestar. Pero claro, no hace falta que explique nuevamente como hacerlo. Yo utilizare este:

Nota: Las imgenes que usaremos estn en el rar material, el link se encuentra al principio del tutorial. Para insertarlo, en primer lugar, necesitamos ubicar nuestro objeto en nuestra carpeta de objetos. Lo llamare webhead.png Tenemos dos opciones para insertar nuestro head. La primera, hacerlo como una imagen dentro de nuestro DIV head. Y la segunda, como fondo de nuestro DIV. Usualmente, si pensamos incluir algn contenido adicional en nuestro DIV, es recomendable utilizar la segunda opcin. Sin embargo. Por el momento no vamos a insertar nada ms en nuestra cabecera y por tanto vamos a insertarlo como si de una imagen cualquiera se tratase, espero no se les haya olvidado como insertar imgenes.

A que ahora empieza a parecer un verdadero sitio web. Aunque claro, aun tenemos muchos detalles que debemos pulir y de hecho, secciones completas que construir.

2.4 Crditos
Quiz en este momento te preguntaras, A qu hora empezaremos a trabajar en el contenido? Pero debemos recordar que estamos trabajando en la plantilla. Por tanto, debemos definir primero las partes estticas del sitio. Es decir esas que van a variar independientemente de la seccin en la que nos encontremos. En este momento, vamos a trabajar en una de las partes ms importantes del sitio. Los crditos. Por qu importante? Fcil, porque si hemos creado todo esto desde 0, mnimo incluir nuestro nombre en el pie de pgina. Pero ms importante que ser reconocidos, es que con el pie de pgina vamos a aprender a redondear esquinas. Aunque se me ocurri en un principio redondear las esquinas de nuestro contenedor utilizando CSS y algunas imgenes. Le di muchas vueltas al asunto de las esquinas redondeadas. Y es que hay muchas opciones. Sin embargo por ser la ms flexible y como pauta para la implementacin de scripts, me decid a utilizar Nifty Corners Cube. Un script liberado balo la licencia GPL que planea facilitarnos la vida, al menos hasta que CSS3 est bien soportado por todos los navegadores. Vale, pero que es un script?, es un pequeo programa que automatiza ciertas tareas. Y cmo se usa? Muy fcil. En primera, nos vamos a descargar este paquete desde el sitio oficial. http://www.html.it/articoli/niftycube/NiftyCube.zip

Una vez lo hemos descomprimido (sea con winrar o cualquier otro gestor de paquetes) y copiaremos estos 4 archivos:

En nuestro directorio raz. Ahora, en nuestra plantilla vamos a incluir lo siguiente, dentro de nuestro <head></head> <script type="text/javascript" src="niftycube.js"></script> Una vez establecido este parmetro, podremos llamar a la funcin Nifty(), sealando el div, que queremos afectar. <script type="text/javascript"> window.onload=function(){ Nifty("div#creditos","big";); } </script> Donde div#creditos indica que la capa cuyo id nico de estilo sea #creditos, ser afectada por la funcin Nifty. En nuestro head, debera verse ms o menos as:

Una vez hecho esto, vamos a colorear nuestro DIV y a cambiar el color del texto desde nuestra hoja de estilos. El resultado final ser:

Que visto en el navegador quedara ms o menos as:

A qu se van a emocionando con el resultado he? Pero aun nos falta un poco para acabar.

2.5 Contenido adicional

Vale, estamos a punto de terminar nuestra plantilla, pero hay todava un par de capas a las que no hemos aplicado ningn estilo. En este caso, quisiera agregar a nuestra capa una imagen de fondo. Pero claro, dicha imagen debe poder acoplarse al contenido de la misma, por tanto, vamos a crear no una sino 3 imgenes. De modo que en la parte superior, veremos una imagen, en medio, los bordes y en la parte inferior la imagen que cerrara la caja de contenido Yo utilizo adobe photoshop para crear estas imgenes, aunque claro puedes utilizar cualquier editor de imgenes.

As pues, llamaremos a nuestras imgenes:

curva-superior.png

fondopubli.png

curva-inferior.png

Y las guardaremos en nuestra carpeta de objetos, ubicada en nuestro directorio raz. Ahora, es importante mencionar que cada capa, solo puede incluir un fondo, por tanto, vamos a crear tres capas adicionales para darle a DIV publicidad, una estructura. <div id="publicidad"> <div id="curvasuperior"></div> <div id="contenidopubli"></div> <div id="curvainferior"></div> </div> Esto implica que nuestro div, publicidad, contendr 3 divs adicionales (justo como hicimos con nuestro div global) Ahora, vamos a crear los estilos nicos para cada DIV, donde incluiremos cada una de las imgenes de fondo que seleccionamos para nuestra web. Para la curva superior y la curva inferior: Utilizaremos la propiedad background-image, para definir la imagen de fondo de nuestra capa. La propiedad repeat, indica si se repetir o no y en qu direccin. El width lo fijaremos al 100% para que ocupe todo el espacio posible dentro de nuestro contenedor y el height lo fijaremos en 30px (el alto de nuestra imagen) Para nuestro div de contenido, vamos a fijar nuestro height en auto, para que nuestra capa pueda variar su tamao. Y haremos que el background-image se repita en el eje y de modo que en nuestra hoja de estilos, agregaremos lo siguiente: NOTESE: que no estoy detallando el procedimiento, pues ya en captulos pasados hemos tratado con ms detenimiento la edicin del CSS #publicidad { width:150px; float:right; padding:3px; height:auto; margin:5px

} #curvasuperior {background-image:url(objetos/curva-superior.png); background-repeat:no-repeat; width:100%; height:30px; } #contenidopubli { width:auto; height:auto; padding:5px; background-image:url(objetos/fondopubli.png); background-position:center; background-repeat:repeat-y; } #curvainferior { background-image:url(objetos/curva-inferior.png); background-repeat:no-repeat; width:100%; height:30px; } Como pueden observar, no hemos hecho nada ms que definir las propiedades ms elementales de cada uno de los componentes. OJO: Claro que pudimos utilizar este mtodo anteriormente para crear las esquinas redondeadas de nuestros crditos sin embargo, en el curso, se pretende presentar algunas tcnicas de diseo y no normalizar un procedimiento. Una vez concluida la edicin, podremos ver en nuestro navegador algo como esto:

2.6 Creando los componentes editables

Finalmente hemos llegado al famoso Div. 3 Contenido no os empezaba a estorbar ya esa cajita roja? Bueno, es hora de trabajar en nuestro contenido y estandarizar algunos elementos antes de definir las secciones editables en nuestro sitio. En primer lugar, vamos a eliminar finalmente el feo marco rojo y a crear un par de DIVs adicionales dentro de nuestra seccin contenido para definir el sitio donde irn los Ttulos y donde ira propiamente nuestro Contenido Esto nos facilitara darle formato a los distintos tipos de letras que vamos a crear, adems dar un orden riguroso a nuestro sitio hacindolo mas profesional.

Hecho esto, vamos a darle algunas propiedades en nuestra hoja de estilos a sus respectivos ids Claro que no voy a detallar este procedimiento, pues lo hemos repetido ya en varias ocasiones a lo largo del curso. Adems no utilizaremos al menos por el momento, ninguna propiedad nueva.

Vale, una vez que hemos definido las propiedades ms bsicas, vamos a definir el tipo de letra, tamao y color que utilizaremos en nuestras etiquetas h, que se refieren a los encabezados. Para la etiqueta h1 (que usualmente marca el titulo de nuestro sitio) vamos a definir ciertas propiedades. #titulo h1 { color:#660000; font-family:Arial, Helvetica, sans-serif; font-size:18px;

font-weight:bold; } Siendo color efectivamente la propiedad que marca el color d e la letra. Font-family, Font-size y Fontweight marca el tipo, tamao y grosor de nuestra fuente. Podemos entonces, revisar si hemos asignado correctamente la propiedad, dando formato en nuestro cdigo fuente a un texto.

Que en el navegador, lucira as:

Ahora, vamos a darle a nuestro content propiedades para la etiqueta p, y as definir claramente el tipo de letra que utilizaremos. #content p { font-family:Arial, Helvetica, sans-serif; font-size:12px; } Una vez hecho esta, y un par de correcciones ms que pueden ver a continuacin:

Vamos, a finalmente, definir las partes editables de nuestro sitio web. Esto lo haremos en modo diseo.

Haremos clic derecho sobre nuestro DIV 3, y vamos a seleccionar donde dice plantilla Nueva regin editable Dreamweaver nos mandara un advertencia, de que nuestra pgina se convertir automticamente en una plantilla y si queremos continuar, nosotros le daremos si

Cuando nos solicite un nombre para la regin, podemos llamarle contenido por ejemplo. Y ahora en nuestro condigo fuente, veremos algo como esto:

Para darle elementos editables a nuestro Head, vamos a dejar nuestro title entre:

Una vez hemos hecho esto, vamos a guardar nuestro documento. Completando cualquier informacin que Dreamweaver nos solicite. Ahora, vamos a crear un nuevo archivo, (Archivo > Nuevo) pero vamos a irnos a plantillas de la pgina en vez de HTML en blanco. Y Voila! Nuestra plantilla esta lista para usarse. Que quiere decir esto, significa que ahora podremos editar el contenido de las pginas creadas a partir de la plantilla. Pero no la estructura de la misma en cada pgina individual. Para editarlas todas al mismo tiempo. Solo vamos a editar nuestra plantilla en cuestin, que se habr guardado en una nueva carpeta llamada templates. Con extensin .dwt

Le damos crear, y guardaremos el documento como index.html (sobrescribiendo nuestro primer ndex) Si vemos nuestro cdigo fuente, solo tenemos permisos para editar el contenido y el title de nuestro sitio. Aunque claro, siempre podemos editar la estructura desde nuestra plantilla.

Agregando algo de contenido a nuestro DIV content (no hace falta que explique esta parte) tendremos algo ms o menos as:

Ya en el siguiente captulo, trabajaremos mas en el contenido y en la edicin de los elementos que aun estn vacos, como el espacio para la publicidad o bien, el men. Adems crearemos una galera fotogrfica y un formulario de contacto.

3. Contenido del Sitio

En este captulo vamos a preparar nuestro sitio para colgarlo en internet, ya hemos creado una plantilla y no vamos a tener mayores problemas de diseo. Sin embargo, seleccionar el contenido, es probablemente uno de los mayores desafos a los que se enfrenta un diseador.

3.1 Secciones
En primer lugar, vamos a desarrollar un pequeo esquema, que nos facilitara las cosas, vamos a definir que contenido vamos a mostrar en nuestro sitio.

En mi caso, incluir en el sitio ejemplo: * Inicio * Historia * Galera * Recursos * Contacto Ustedes pueden crear ms o menos secciones. A partir de aqu, el curso es un mero ejemplo de las cosas que podemos hacer una vez creada nuestra plantilla y definidos los aspectos ms importantes de nuestro sitio. En primer lugar, vamos a crear nuestros documentos html, esto lo haremos desde Archivo > Nuevo y seleccionando Pagina de Plantilla para seleccionar nuestra plantilla. Nos aparecer algo ms o menos as:

En principio, Editaremos nuestro <title>, cambiaremos donde dice

Por el ttulo de la pagina en cuestin, en este caso, siguiendo con mi esquema

Y guardaremos nuestro documento como historia.html (siempre en nuestro directorio raz)

NOTA: Las rutas son sensibles a maysculas y minsculas, es recomendable trabajar en minsculas. Una vez hecho esto, vemos como en nuestro rbol de archivos, aparece un nuevo archivo llamado historia.html

Repetiremos este procedimiento para cada una de las secciones de nuestro sitio, de modo que tendremos cinco archivos .html en nuestro directorio raz.

Hecho esto, abriremos nuestra plantilla para poder editar los elementos de nuestro men. Esto podemos hacerlo desde nuestro rbol de objetos, seleccionando el archivo plantillaprinc.dwt en la carpeta Templates

Finalmente, con una ruta que dar a nuestros enlaces, empezaremos a definirlos en nuestro men.

OJO, que estamos agregando ../ A nuestras rutas, lo que indica que nuestro documento siempre buscara en el directorio raz el archivo especificado. Guardamos nuestra plantilla y Dreamweaver nos preguntara si deseamos actualizar los archivos

Nosotros, seleccionaremos Actualizar es decir, a todos los archivos hijos de nuestra plantilla se les aplicaran los cambios que apliquemos a nuestra plantilla. Adems, agregare algo de contenido a mi DIV publicidad actualizando todos mis documentos. As pues, abrimos nuestro index.html y presionamos F12, para verlo en nuestro navegador

Como podemos observar, todo cambio que apliquemos a nuestra plantilla ser visible en los archivos hijos de la misma.

3.2 Contenidos Estticos

Para nuestro index.html, recursos.html y nuestro historia.html, solo hace falta editar el contenido del div content y modificar el div titulo de modo que no har falta que explique mayor cosa para e stas dos secciones.

3.2.1 Galera
Crear una galera, puede ser tan simple como agregar algunas imgenes a nuestra pgina, sin embargo. Quisiera que nuestra galera incluyera un efecto lightbox Lo haremos con la inclusin de un script adicional desarrollado por un tercero, justo como hicimos con nuestras esquinas redondeadas.

Dicho script lo incluiremos nicamente en la pagina galera a fin de no incrementar demasiado el peso de nuestro sitio web. En primer lugar, vamos a descargar el script desde su pgina oficial http://www.huddletogether.com/projects/lightbox2/#download Una vez lo hemos guardado, vamos a descomprimirlo, veremos 3 carpetas y un index.html, nosotros vamos a copiar las tres carpetas a nuestro directorio raz. Debera verse ms o menos as:

Abrimos pues nuestra pgina galera.html en el Dreamweaver, y vamos a incluir en nuestro <head></head> algunas referencias a los archivos que hemos copiado a nuestro directorio raz. OJO: Recuerda que solo podrs incluir contenido dentro de una pagina generada a partir de una plantilla si cuentas con una instancia editable en la misma, para identificar dichas regiones, busca en tu cdigo fuente <!-- InstanceBeginEditable name="head"

Hecho esto, vamos a incluir las imgenes que incluiremos en nuestro content pero claro, no queremos ubicar imgenes pesadas en nuestro contenido, pues haran que nuestro sitio fuese muy pesado.

Vamos a crear dos imgenes, una ser una miniatura y la otra la imagen que utilizaremos como destino. Crearemos un directorio dentro de nuestro directorio raz, llamado galera qu e contendr un directorio en su interior llamado imgenes Las miniaturas las ubicaremos en nuestro directorio galera y sus respectivas imgenes ruta en el directorio imgenes. Si te has enredado, la cuestin es ms o menos as

Ahora, en nuestro DIV content vamos a crear una tabla de 3 x 2, esto lo haremos para crear ordenar un poco las imgenes que incluiremos. Esto lo hacemos utilizando la etiqueta table.

<table width="100%" border="0"> <tr> <td>Primera Celda</td> <td>Segunda Celda</td> <td>Tercera Celda</td> </tr> <tr> <td>Cuarta Celda</td> <td>Quinta Celda</td> <td>Sexta Celda</td> </tr> </table> Donde <tr> indica es un separador vertical y <td> un separador horizontal. Es decir, si hubisemos querido una tabla de 2 x 4 habramos agregado otro elemento <td> dentro de cada uno de los elementos <tr> NOTA: las etiquetas <tr> y <td> admiten atributos como width.

Hecho esto, dentro de nuestra primera celda, vamos a insertar un vnculo a nuestra imagen, utilizando como texto para el vnculo nuestra miniatura.

Agregando a nuestra etiqueta <a> un nuevo atributo. rel=lightbox que indica que nuestro la una relacin entre nuestro enlace y la funcin lightbox que incluimos en nuestro <head> Si vemos nuestra galera en el navegador, veremos algo como esto:

Y al hacer clic sobre la imagen, veremos algo como esto, aunque claro, ustedes pueden agregar muchas ms imgenes, siempre siguiendo el procedimiento descrito mas arriba. Probemos hacer clic sobre nuestra imagen y Voila! Un efecto lightbox que queda excelente con nuestro sitio.

A que ha quedado muy profesional? pueden centrar su imagen en la celda, utilizando los atributos para la etiqueta <p>

3.2.2 Contacto
En nuestra pgina de contacto, incluiremos un formulario que utilizara un lenguaje de programacin llamado PHP. Uno de los ms comunes en el desarrollo web. Aunque claro, en este curso. No aprenderemos PHP. Eso ser quizs en el siguiente (claro que depende si logro un xito moderado con este :-)) Pero bueno, vamos a crear en primer lugar un formulario, donde nuestros usuarios introducirn datos, que luego sern utilizados por nuestro script en php. Abrimos nuestro contacto.html y seleccionaremos Archivo > Guardar Como Vamos a marcar en Tipo

Y seleccionar Archivos PHP para guardarlo como enviar.php

OJO que una vez realizados estos cambios, conviene editar en la plantilla la ruta del men para que seale al archivo enviar.php Una vez hecho esto, vamos a copiar nuestro programa dentro de nuestro DI V content <? if (!$HTTP_POST_VARS){ ?> <form action="enviar.php" method=post> <p>Nombre: </p> <p> <input type=text name="nombre" size=16> <br> </p> <p>Email:</p> <p> <input type=text name=email size=16> <br> <p>Comentarios:</p> <p> <textarea name=coment cols=32 rows=6></textarea> <br> <input type=submit value="Enviar"> </p> </form> <? }else{ //Estoy recibiendo el formulario, compongo el cuerpo $cuerpo = "Alguien se ha contactado con usted: \n"; $cuerpo .= "Nombre: " . $HTTP_POST_VARS["nombre"] . "\n"; $cuerpo .= "Email: " . $HTTP_POST_VARS["email"] . "\n"; $cuerpo .= "Comentarios: " . $HTTP_POST_VARS["coment"] . "\n"; $cuerpo .= "IP: " . $_SERVER["REMOTE_ADDR"] . "\n"; //mando el correo... mail("tucorreo@servidor.com","Mensaje de contacto",$cuerpo); //doy las gracias por el envo echo "Gracias por rellenar el formulario. Se ha enviado correctamente."; } ?> Como mencione antes, en este curso no aprenderemos PHP as que no comentare el cdigo fuente, pues tendramos que remitirnos a conceptos tan bsicos como las variables. Y estn fuera de contexto. Vista en nuestro navegador, nuestra pgina de contacto, lucira ms o menos as

OJO que el formulario no funcionara hasta que no hayamos montado nuestro sitio en la red, adems depende del servidor y su soporte de la funcin mail () De modo que hemos terminado con nuestro sitio, es hora de montarlo en la red, y echarlo a andar. Genial no? Estamos a punto de terminar, y que duro ha sido, pero seguro ha valido la pena.

4. Publicando un Sitio Web

Para poder publicar un sitio en la red, necesitamos un servidor que aloje los archivos de nuestro sitio, y los haga accesibles a travs del protocolo http:// En este curso, vamos a subir nuestros archivos, a un servidor gratuito que tenga la funcin mail () habilitada. Dicha funcin permitir que enviemos correos desde nuestro formulario de contacto. NO SON MUCHOS los servidores gratuitos que admiten la funcin mail (), uno de ellos sin embargo es 000webhost.com En la pgina principal, http://000webhost.com vamos a hacer clic sobre el botn Sign Up

Veremos un formulario como este (trabajaremos con un subdominio ms adelante consideraremos un dominio):

En dicho formulario, ingresaremos Nuestros datos. Terminado el proceso de registro, veremos algunos datos importantes

Conviene que los guardemos en un archivo para acceder a ellos cuando los necesitemos. Una vez hemos guardado los detalles de nuestra cuenta, vamos a necesitar un cliente FTP (File Transfer Protocol) para subir los archivos de nuestro ordenador. Aunque existen muchos clientes FTP (y de hecho Dreamweaver lo incluye en su gestor de sitios), en este curso utilizaremos FileZilla

En el cuadro rojo, podemos acceder a nuestros archivos locales. Es importante que nos ubiquemos sobre nuestro directorio raz. Ahora, vamos a realizar la conexin utilizando los datos que nos suministro 000webhost.

Establecida la conexin, veremos en nuestro Servidor Remoto una carpeta llamada public_html Debemos subir TODOS los archivos de nuestro sitio local al servidor remoto. (si no son muchos ms que en este curso, no tardara mas de unos pocos segundos)

Dicho proceso es muy similar en un servidor de pago. Claro que la velocidad de carga en un servidor de pago, ser muy superior. Concluido el proceso. Solo hace falta apuntar nuestro navegador al subdominio que hemos especificado y FINALMENTE hemos creado un sitio web! Aqu pueden ver el sitio final de prueba : http://www.sitiodepruebamisa2pac2.netii.net Cualquier duda no olviden contactarme: misa2pac@gmail.com