Hola amigos de T! esta es la segunda parte del tutorial donde 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.
Nota: Clic en las imagenes para verlas de tamaño completo.
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
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.
dijo: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 “galeria” y sus respectivas “imágenes ruta” en el directorio “imagenes”.
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.
dijo:<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 habriamos agregado otro elemento <td> dentro de cada uno de los elementos <tr>
dijo: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
dijo: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”
dijo:<?
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>
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 = "Formulario enviadon";
$cuerpo .= "Nombre: " . $HTTP_POST_VARS["nombre"] . "n";
$cuerpo .= "Email: " . $HTTP_POST_VARS["email"] . "n";
$cuerpo .= "Comentarios: " . $HTTP_POST_VARS["coment"] . "n";
//mando el correo...
mail("[email protected]","Formulario recibido",$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í
dijo: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, 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 sudominio que hemos especificado y ¡FINALMENTE hemos creado un sitio web!
Espero que le haya agradado el tutorial puesto que me esforcé mucho para crearlo recuerden dejar sus comentarios.
AQUI PUEDEN VER EL SITIO FINAL DE PRUEBA : http://www.sitiodepruebamisa2pac2.netii.net/
