tutorial crear una web desde 0 por misa2pac
TRANSCRIPT
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
Código 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 ningún
conocimiento, será una web bastante básica, puesto que la mayoría de los usuarios no posen
conocimientos programación HTML, PHP, CSS, JAVASCRIP, etc.
Introducción
La Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la
familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen
funcionen como una red lógica única, de alcance mundial. Sus orígenes se remontan a 1969, cuando se
estableció la primera conexión de computadoras, conocida como ARPANET, entre tres universidades en
California y una en Utah, Estados Unidos.
Uno de los servicios que más éxito ha tenido en Internet ha sido la World Wide Web ( WWW, o "la Web"
), hasta tal punto que es habitual la confusión entre ambos términos. 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 transmisión.
La web está disponible como una plataforma más englobada dentro de los mass media. Para "publicar"
una página web, no es necesario acudir a un editor ni otra institución, ni siquiera poseer conocimientos
técnicos más allá de los necesarios para usar un editor de texto estándar.
A diferencia de los libros y documentos, el hipertexto no necesita de un orden lineal de principio a final.
No precisa de subdivisiones en capítulos, 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 están enfocados a crear sitios web, extremadamente básicos que carecen de
aplicación en la actualidad. Este curso pretende formar y guiar el proceso que acompaña la creación de
un sitio web más especializado.
Lo necesario
Únicamente necesitaremos saber leer, y una conexión a internet, pues los recursos que utilizaremos
están disponibles en la red de manera gratuita.
1. Conceptos básicos
1.1 Software Necesario
En cuanto al software que utilizaremos, será Dreamweaver, Es una de las herramientas más completas
con las que disponemos actualmente. Si bien es de pago, podemos descargarnos una versión 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 código fuente como el HTML-Kit o
bien KompoZer (ambos totalmente gratuitos).
Adobe Dreamweaver es una aplicación en forma de estudio (enfocada a la construcción y edición de
sitios y aplicaciones Web basados en estándares.
Es el programa de este tipo más utilizado en el sector del diseño y la programación web, por sus
funcionalidades, su integración con otras herramientas como Adobe Flash
En este curso, utilizaremos la versión CS3, puesto que el CS5 es un poco trabajoso con las opciones
que tiene para los que no conocen. Pues es una combinación de eficiencia y funcionalidad.
¿Por qué no utilizar algún software gratuito? Aun no existen herramientas verdaderamente maduras. (En
cuanto al diseño web) que puedan obtenerse gratuitamente.
URL descarga: http://tl.gd/c28dq6
Sea que hayamos descargado el trial, o bien hayamos obtenido alguna versión menos “legal” de Taringa.
El proceso de instalación será relativamente sencillo y no vale la pena detallarlo aquí.
1.2 El espacio de Trabajo
Es hora de iniciar con la creación 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
Opción “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 tecnologías 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
señalada es el directorio raíz 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 configuración 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 hipervínculos con más 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 fácilmente algunos elementos y objetos que eventualmente
utilizaremos.
Además, 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 más importante y representa el cuerpo de nuestros documentos.
Además, Incluidos en el espacio de trabajo, se encuentran el inspector de CSS, El inspector de etiquetas
y administrador de sitios. Todas herramientas que utilizaremos más adelante.
1.3 El lenguaje de las etiquetas HTML
Hasta este punto, hemos evitado la mención 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 elaboración de páginas web. Es usado para describir la
estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como
imágenes.”
Y de hecho, la definición es excelente, sin embargo, simplificándola 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 día a día ves en internet.
Al no ser un lenguaje de programación, no arrojara errores, si el lenguaje es ilegible, simplemente no
será interpretado.
1.4 Documentos HTML
Los documentos HTML (de extensión .HTML o .htm) son documentos cuyo formato debe ser interpretado
por el navegador. Y son los que conforman las páginas web.
Como todo, dichos documentos tienen una estructura básica. Vamos a cambiar a modo código en
Dreamweaver para observar más 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 están denotadas por los
signos <etiqueta> además, 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>
Además, un documento HTML cuenta con dos partes claramente definidas. El encabezado y el cuerpo.
Todo lo incluido en el encabezado es información para el navegador. Y lo incluido en el cuerpo es
información para el usuario.
El encabezado del documento se define utilizando las etiquetas
<head>
</head>
Y en él se incluye mucha información importante, como por ejemplo los documentos adicionales que
deben ser cargados con el documento. Pero más importante el titulo y la codificación 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 pestañas 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 pequeña prueba. Para visualizar nuestro
primer sitio, vamos a realizar las siguientes ediciones al código fuente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"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”
Y pronto veremos en nuestro navegador el resultado de nuestra primera edición
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 además, 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 diseños. Y existen
ciertas etiquetas especiales para darle formato.
En primer lugar, un párrafo se denota por
<p>Esto es un párrafo</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 línea, es decir, lo equivalente al “Enter” en un editor de textos cualquiera
debemos insertar la etiqueta
<br />
También es importante mencionar algún formato básico, 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 itálica</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 párrafo muy prolijo, sin embargo, no tiene ninguna clase de alineación, justificado ni
cualquier otro formato básico. Para lograr un resultado más elaborado, deberíamos 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 quistión. 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 párrafo</p>
Para alinear a la derecha
<p align=”right”>Esto es un párrafo</p>
Para alinear a la izquierda
<p align=”left”>Esto es un párrafo</p>
O bien para justificar el texto
<p align=”justify”>Esto es un párrafo</p>
Y podemos incluirlos dentro de nuestro índex de la siguiente manera
NOTESE que se han creado dos párrafos independientes
Como habremos notado, Dreamweaver tiene la capacidad de autocompletar, herramienta que nos puede
resultar muy útil a la hora de trabajar en modo “Código fuente”
Si consideramos el resultado de la edición con la tecla F12, veremos algo como esto
Existen ciertos caracteres que no pueden ser incluidos de manera directa dentro del código fuente.
Si deseamos visualizar caracteres especiales en nuestro documento HTML debemos hacer uso de una
extensa lista que contiene los respectivos códigos de cada carácter.
Caracteres especiales básicos
En realidad estos caracteres se usan en HTML para no confundir un principio o final de etiqueta, unas
comillas o un & con su correspondiente carácter.
Caracteres especiales del HTML 2.0
Caracteres especiales del HTML 3.2
Otros caracteres especiales
Resulta sin embargo, que utilizar esta lista es poco práctico, 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 carácter especial, como por ejemplo μ Dreamweaver lo registrara
automáticamente como un carácter 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 dinámicos.
Los enlaces están marcados por la etiqueta <a>enlace</a> siendo “enlace” la palabra a la que el usuario
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 “estándar” 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 pestaña 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 inglés Cascading Style Sheets), CSS es un lenguaje usado para
definir la presentación de un documento estructurado escrito en HTML usualmente resulta un dolor de
cabeza aprender este lenguaje sin embargo, aquí lo haremos fácil ;-)
En primer lugar, vamos a crear nuestra hoja de estilos. Vamos a hacer clic en Archivo > Nuevo
Posteriormente, nos aparecerá una nueva pestaña en nuestro espacio de trabajo. Dicha pestaña 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 fácil) 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 instrucción 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 cómo 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 atributo, posteriormente agregamos el
atributo, en este caso un color de fondo.
En nuestro navegador veríamos algo como esto:
Como vemos, hemos dado a nuestro sitio un color amarillo que utilizaremos de base.
1.8 Insertando Imágenes
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 el atributo src=”” para
señalar la ruta de la imagen
<img src=”objetos/equipo.jpg”/>
Podemos incluir la imagen dentro de un párrafo si deseamos alinearla.
Es conveniente, que utilicemos el atributo “alt” en nuestras imágenes, que es un pequeño cuadrito que
aparece cuando ubicamos el mouse sobre las imágenes
<img src=”objetos/equipo.jpg” alt="Equipo" />
También, podemos añadirle algún atributo adicional si deseamos redimensionarla. Por ejemplo,
podríamos hacerla más pequeña si agregamos
<img src=”objetos/equipo.jpg” width="400px" height="200px" alt="Equipo" />
Aplicando esto que hemos mencionado a nuestro código 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 imágenes, pero
claro, no se mira demasiado elegante sino como un montón de elementos dispersos por todos lados.
Me gustaría aclarar que los atributos de las imágenes, si bien pueden editarse a través del código fuente,
resulta más práctico utilizar el editor grafico de Dreamweaver, que permite redimensionar imágenes de
manera grafica. Así mismo añadirlas puede ser tan sencillo como hacer un Crtl + V
Edición de imágenes utilizando el “Modo Diseño”:
Claro que estas tareas sencillas realmente son muy fáciles desde el modo diseño, sin embargo, el
conocer el “Modo Texto” nos facilitara las cosas más adelante cuando debamos realizar operaciones
más complejas que solo pueden hacerse manualmente.
Una imagen también 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 más 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 imágenes y
aplicar atributos sin embargo, aún estamos lejos de crear un sitio lo suficientemente “profesional” como
para mostrárselo al mundo.
Entonces, ¿qué hace falta? En primer lugar, no hemos aprendido a maquetar una web, es decir
estructurarla. También debemos profundizar nuestros conocimientos sobre CSS.
Pues refiriéndonos 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 quisiésemos que todos nuestros párrafos estuvieran alineados al centro, podríamos crear
en nuestra hoja de estilos
p {text-align:center}
Sin embargo, es poco probable que deseemos que TODOS los párrafos de nuestro sitio estén 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 títulos para ciertos párrafos 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 párrafo, vamos a agregarlo mediante el atributo class=””
<p class="titulos" align="center">Este es mi primer <b>sitio web</b></p>
Dejando nuestro código 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 más el uso de las clases cuando empecemos a enmarquetar nuestro sitio sin embargo este es
su funcionamiento básico.
En este capítulo, hemos aprendido los conceptos y tenemos las nociones básicas sobre el lenguaje
HTML y la creación de un sitio web, El funcionamiento de las hojas de estilo y las clases.
Aunque podríamos 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 “estático” en nuestro sitio, que contendrá partes
editables (estas serán independientes para cada página), así pues si deseamos editar algún 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
básica en nuestro sitio web. Podemos usar para ello. Tablas o Capas. Este curso, utilizaremos capas, un
método más limpio y profesional.
2.1 La estructura básica
En primer lugar, crearemos un nuevo documento HTML. Además 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 cuestión. Justo como lo vimos en el
capítulo 1.7.
Una vez hecho esto, vamos a crear nuestras capas, la etiqueta que define a una capa es <div>.
Una capa no es más que un elemento rectangular que sirve para agrupar datos dentro de bloques en un
sitio web. La posición, y tamaño 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 pequeño esquema de la
estructura que deseamos. Esto lo podemos hacer en cualquier programa para la edición de gráficos.
¿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 diseñar 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 más 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) más 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 fácil trabajar en
el CSS del sitio con una herramienta tan completa.
Y además, con su selector de color, se hace mucho más fácil el trabajo de diseño.
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 código fuente quedaría 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 diseño,
nuestro div 0.
Es importante, pues con el definiremos el ancho de nuestro sitio. Mas adelante, hablaremos de
resoluciones dinámicas, sin embargo por el momento, vamos a tratar la resolución de nuestro sitio como
un elemento estático.
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í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 tamaño asignado al contenido de nuestro sitio, en este caso, por
ser la resolución más usada. Vamos a definir el ancho de nuestra web en 800px. ¿Cómo? Adivinaron,
desde nuestra hoja de estilos.
Además, 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 quedaría:
Y nuestra vista previa en el navegador revela un resultado que cada vez parece más una página 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, ubicándolos como en
nuestra plantilla de diseño.
Vale, ahora vamos a darle un poco mas de forma a nuestro sitio, agregando un par de propiedades más
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
están ubicados los menús 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 estén 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 número 3, vamos a alinearlo a la izquierda justo después 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 créditos a fin de crear un poco de orden.
#creditos {border: 3px solid #FFFF00;
width:auto;
height:30px;
margin:5px;
clear:both;
}
OJO, Además 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 márgenes que separaran nuestra cabecera del cuerpo
del sitio
#head {border: 3px solid #0000FF;
margin:5px
}
Al final, nuestro código fuente (el de la hoja de estilos) debería lucir más o menos así:
Ahora, podemos visualizar nuestro sitio en el navegador:
Ciertamente hemos alcanzado nuestro objetivo. Y por fin nuestro sitio tiene una estructura básica. De
modo que podemos empezar a trabajar sobre esta.
2.2 Menú
El menú, uno de los elementos más importantes de nuestro sitio. Y es que permite a los usuarios
navegar a través 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 configuración, daría como resultado algo como esto:
Aunque claro, nuestro menú, será un poco más elaborado, ¿cómo? Muy fácil, 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 más “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 específicas 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 señalado.
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;
}
Además, 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 característico 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 estén subrayados.
La propiedad display, indica que cada enlace, generara un bloque característico.
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 ningún enlace, así que agregaremos algunos links “ejemplo” cuya ruta sea “#”
(es decir, ninguna)
Nuestra hoja de estilos, debería verse algo así una vez finalizada la edición. (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 más 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 más que molestar. Pero
claro, no hace falta que explique nuevamente como hacerlo. Yo utilizare este:
Nota: Las imágenes que usaremos están 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 algún
contenido adicional en nuestro DIV, es recomendable utilizar la segunda opción.
Sin embargo. Por el momento no vamos a insertar nada más 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
imágenes.
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 Créditos
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
estáticas del sitio.
Es decir esas que van a variar independientemente de la sección en la que nos encontremos.
En este momento, vamos a trabajar en una de las partes más importantes del sitio. Los créditos. ¿Por
qué importante? Fácil, porque si hemos creado todo esto desde 0, mínimo incluir nuestro nombre en el
pie de página.
Pero más importante que ser reconocidos, es que con el “pie de página” vamos a aprender a redondear
esquinas.
Aunque se me ocurrió en un principio redondear las esquinas de nuestro contenedor utilizando CSS y
algunas imágenes. Le di muchas vueltas al asunto de las esquinas redondeadas. Y es que hay muchas
opciones. Sin embargo por ser la más flexible y como pauta para la implementación 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 pequeño programa que automatiza ciertas tareas.
Y ¿cómo se usa? Muy fácil. 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 raíz.
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 parámetro, podremos llamar a la función Nifty(), señalando 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 función
Nifty.
En nuestro head, debería verse más 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 quedaría más 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 todavía un par de capas a las que no
hemos aplicado ningún 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 imágenes.
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 imágenes, aunque claro puedes utilizar cualquier editor de
imágenes.
Así pues, llamaremos a nuestras imágenes:
curva-superior.png
fondopubli.png
curva-inferior.png
Y las guardaremos en nuestra carpeta de objetos, ubicada en nuestro directorio raíz. 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 imágenes 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é dirección. 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 tamaño. 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 capítulos pasados hemos tratado
con más detenimiento la edición 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 más que definir las propiedades más elementales de
cada uno de los componentes.
OJO: Claro que pudimos utilizar este método anteriormente para crear las esquinas redondeadas
de nuestros “créditos” sin embargo, en el curso, se pretende presentar algunas técnicas de
diseño y no “normalizar” un procedimiento.
Una vez concluida la edición, 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 sección “contenido” para definir el sitio donde irán los “Títulos” y donde ira propiamente
nuestro “Contenido”
Esto nos facilitara darle formato a los distintos tipos de letras que vamos a crear, además dará un orden
riguroso a nuestro sitio haciéndolo mas profesional.
Hecho esto, vamos a darle algunas propiedades en nuestra hoja de estilos a sus respectivos id’s
Claro que no voy a detallar este procedimiento, pues lo hemos repetido ya en varias ocasiones a lo largo
del curso. Además no utilizaremos al menos por el momento, ninguna propiedad nueva.
Vale, una vez que hemos definido las propiedades más básicas, vamos a definir el tipo de letra, tamaño
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 de la letra. Font-family, Font-size y Font-
weight marca el tipo, tamaño y grosor de nuestra fuente.
Podemos entonces, revisar si hemos asignado correctamente la propiedad, dando formato en nuestro
código fuente a un texto.
Que en el navegador, luciría 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 más que pueden ver a continuación:
Vamos, a finalmente, definir las partes editables de nuestro sitio web. Esto lo haremos en modo diseño.
Haremos clic derecho sobre nuestro “DIV 3”, y vamos a seleccionar donde dice “plantilla” – “Nueva
región editable”
Dreamweaver nos mandara un advertencia, de que nuestra página se convertirá automáticamente en
una plantilla y si queremos continuar, nosotros le daremos “si”
Cuando nos solicite un nombre para la región, 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 información
que Dreamweaver nos solicite.
Ahora, vamos a crear un nuevo archivo, (Archivo > Nuevo) pero vamos a irnos a plantillas de la página
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 páginas creadas a partir
de la plantilla. Pero no la estructura de la misma en cada página individual. Para editarlas todas al mismo
tiempo. Solo vamos a editar nuestra plantilla en cuestión, que se habrá guardado en una nueva carpeta
llamada templates. Con extensión .dwt
Le damos crear, y guardaremos el documento como index.html (sobrescribiendo nuestro primer índex)
Si vemos nuestro código 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 más o menos así:
Ya en el siguiente capítulo, trabajaremos mas en el contenido y en la edición de los elementos que aun
están vacíos, como el espacio para la publicidad o bien, el menú. Además crearemos una galería
fotográfica y un formulario de contacto.
3. Contenido del Sitio
En este capítulo vamos a preparar nuestro sitio para colgarlo en internet, ya hemos creado una plantilla y
no vamos a tener mayores problemas de diseño. Sin embargo, seleccionar el contenido, es
probablemente uno de los mayores desafíos a los que se enfrenta un diseñador.
3.1 Secciones
En primer lugar, vamos a desarrollar un pequeño 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
* Galería
* Recursos
* Contacto
Ustedes pueden crear más 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 más 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 más o menos así:
En principio, Editaremos nuestro <title>, cambiaremos donde dice
Por el título de la pagina en cuestión, en este caso, siguiendo con mi esquema
Y guardaremos nuestro documento como historia.html (siempre en nuestro directorio raíz)
NOTA: Las rutas son sensibles a mayúsculas y minúsculas, es recomendable trabajar en
minúsculas.
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 raíz.
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 raíz 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.
Además, 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 Estáticos
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 estas dos
secciones.
3.2.1 Galería
Crear una galería, puede ser tan simple como agregar algunas imágenes a nuestra página, sin embargo.
Quisiera que nuestra galería incluyera un efecto “lightbox” Lo haremos con la inclusión de un script
adicional desarrollado por un tercero, justo como hicimos con nuestras esquinas redondeadas.
Dicho script lo incluiremos únicamente en la pagina “galería” a fin de no incrementar demasiado el peso
de nuestro sitio web.
En primer lugar, vamos a descargar el script desde su página 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 raíz.
Debería verse más o menos así:
Abrimos pues nuestra página “galería.html” en el Dreamweaver, y vamos a incluir en nuestro
<head></head> algunas referencias a los archivos que hemos copiado a nuestro directorio raíz.
OJO: Recuerda que solo podrás 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 código fuente
<!-- InstanceBeginEditable name="head" →
Hecho esto, vamos a incluir las imágenes que incluiremos en nuestro “content” pero claro, no queremos
ubicar imágenes pesadas en nuestro contenido, pues harían que nuestro sitio fuese muy pesado.
Vamos a crear dos imágenes, una será una “miniatura” y la otra la imagen que utilizaremos como
“destino”.
Crearemos un directorio dentro de nuestro directorio raíz, llamado “galería” que contendrá un directorio
en su interior llamado “imágenes” Las miniaturas las ubicaremos en nuestro directorio “galería” y sus
respectivas “imágenes ruta” en el directorio “imágenes”.
Si te has enredado, la cuestión es más 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 imágenes 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 hubiésemos
querido una tabla de 2 x 4 habríamos 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 vínculo a nuestra imagen, utilizando
como texto para el vínculo nuestra miniatura.
Agregando a nuestra etiqueta <a> un nuevo atributo. rel=”lightbox” que indica que nuestro la una relación
entre nuestro enlace y la función lightbox que incluimos en nuestro <head>
Si vemos nuestra galería en el navegador, veremos algo como esto:
Y al hacer clic sobre la imagen, veremos algo como esto, aunque claro, ustedes pueden agregar muchas
más imágenes, 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 página de contacto, incluiremos un formulario que utilizara un lenguaje de programación
llamado PHP. Uno de los más comunes en el desarrollo web. Aunque claro, en este curso. No
aprenderemos PHP. Eso será quizás 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 introducirán datos,
que luego serán 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 señale al archivo “enviar.php”
Una vez hecho esto, vamos a copiar nuestro programa dentro de nuestro DIV “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("[email protected]","Mensaje de contacto",$cuerpo);
//doy las gracias por el envío
echo "Gracias por rellenar el formulario. Se ha enviado correctamente.";
}
?>
Como mencione antes, en este curso no aprenderemos PHP así que no comentare el código fuente,
pues tendríamos que remitirnos a conceptos tan básicos como las variables. Y están fuera de contexto.
Vista en nuestro navegador, nuestra página de contacto, luciría más o menos así
OJO que el formulario no funcionara hasta que no hayamos montado nuestro sitio en la red,
además depende del servidor y su soporte de la función 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 través del protocolo http:// En este curso, vamos a subir nuestros archivos, a un
servidor gratuito que tenga la función mail () habilitada. Dicha función permitirá que enviemos correos
desde nuestro formulario de contacto.
NO SON MUCHOS los servidores gratuitos que admiten la función mail (), uno de ellos sin embargo es
000webhost.com
En la página principal, http://000webhost.com vamos a hacer clic sobre el botón “Sign Up”
Veremos un formulario como este (trabajaremos con un subdominio más 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 raíz.
Ahora, vamos a realizar la conexión utilizando los datos que nos suministro 000webhost.
Establecida la conexión, 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 más 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: [email protected]