1 Dreamweaver CS4 / Guía DW CSS.005 FORMULARIO, MAPA Y FTP Contenidos de esta guía Formulario de Contacto Mapa en tu web FTP 2008 Material exclusivo de Academia MacPC www.academiamacpc.cl
Crear un Formulario 2 CREAR http://www.tele-pro.co.uk/scripts/contact_form/ Existe un sitio web en el cual puedes crear una estrcutura de formulario y el crea tanto el HTML (nombre, cajas, botones) como el archivo PHP que es el lleva la información desde el HTMl a un correo. Una vez que ingresamos a la web debes seguir los siguientes pasos. PASO 1 Figura 1 En esta parte el Email From no se llena porque es la casilla que el usuario colocará su correo y esto permitira que cuando nos llegue e correo le respondamos. En el Email To tienes que colocar el correo al cual quieres que llegue la información. El Subject es el titulo con que llegarán todos los correos a la casilla señalada anteriormente. (Figura 1). PASO 2 Figura 2 Aquí hay que colocar los nombres de las cajas que queremos crear (todo con minusculas y sin espacios) para ello tambien tenemos 3 tipos de cajas: (Figura 2). Text Box: Text Area: Checkbox: Figura 3 PASO 3 Una vez que ya decidiste que cajas colocar, debes seleccionar con que lenguaje de programación quieres los códigos. PHP es un lenguaje gratis que funciona en toda plataforma. (Figura 3).
Que códigos copiar 3 Figura 4 PASO 4 Cuando seleccionas que lenguaje te crea dos archivos, un HTML con la estructura de las cajas y un PHP que permitirá llevar la información. Del HTML debes copiar las etiquetas de <form> a </form>, lo demás son comentarios.(figura 4). Figura 5 PASO 5 El codigo que copiaste lo tienes que pegar en la parte del codigo de tu hoja HTML en donde quieras que aparezca. Despues puedes aplicar estilos a los textos, separar los textos de las cajas y ajustarlo gráficamente.(figura 5). Visión del código Visión de la parte gráfica Figura 6 PASO 6 Volviendo al sitio del formulario ahora debes seleccionar todo el codigo del PHP, copiar y pegarlo en una nueva hoja de PHP, debes borrar todo lo que tenga la nueva hoja y pegar el codigo que dió el formulario, guardarlo con el nombre de contact.php (Figura 6).
Archivos adicionales 4 Figura 7 PASO 7 El código del HTML que nos da el sitio web, viene programado a que debe conectarse a un archivo llamado contact.php, además este código viene con una programación en que si hay pasa toda la información bien, se vincula a una página llamado ok.html y si hay algún problema se vincula a error.htm. (Figura 7). Figura 8 PASO 8 Si quieres puedes utilizar una base de otra página para crear o una nueva que se llamen ok.htm y error.htm (Figura 8). página ok.htm PASO 9 Si necesitas probar el formulario debes subirlo a un servidor, al menos que tengas instalado un software para que funcione el PHP. página error.htm
Colocar mapa en tu web 5 GOOGLE MAPS Figura 9 Figura 10 No solo sirve para buscar una dirección si no que tambien puedes colocar el mapa, una vez que ya buscaste la dirección y tienes el mapa, debes ir a a la opción de Mis Mapas para guardar la dirección (Figura 9), añades un mapa y lo dejas marcado, ingresas toda la información correspondiente al lugar marcado (Figura 10), si quieres haces un clic en el icono y puedes cambiar la figura del lugar demarcado. (Figura 11) Figura 11 Una vez hecha la marca debes dirigirte a la parte superior derecha del mapa en donde dice Enlazar (Figura 12), en él tienes las opciones de la URL para enviar por correo y la segunda es el código que debes pegar en una caja del sitio web. Este está contenido en un IFRAME que es un marco y permite que cuando el mapa está en tu web te puedas mover adentro de él. (Figura 13) Figura 12 Actualizas en la parte gráfica o visualizas en el navegador el mapa. (Figura 14) Figura 14 Figura 13
Configurar el FTP 6 Figura 15 QUE ES UN FTP Existen variados softwares que permiten traspasar los archivos desde el computador al servidor o hosting. Entre ellos para mac: - Cyberduck: software FTP gratuito (Figura 15). - Transmit: software FTP pagado, visualmente muy intuitivo. (Figura 16). Figura 16 Entre ellos para pc: - Filezilla: software para windows que permite subir los archivos. (Figura 17). Cuando vamos a subir los archivos debemos tener las claves de acceso que el hosting nos enrega al momento del pago. para ello necesitamos 3 datos importantes: (Figura 18). Figura 17 - Servidor: es la dirección del FTP, si no hay un dominio comprado se coloca la IP (Ejemplo: 200.37.150.40), en cambio cuando ya está el dominio se coloca ftp.nombrefacil.cl - Usuario: principalmente se utilizan cuentas de correos como usuarios, pero tambien hay instancias en donde se aplica un usuario con letras y números (ejemplo: dn98765zj) - Contraseña: aquí se utilza cualquier palabra que se designe. Figura 18 Con estos tres elementos podemos acceder y dejar los archivos en el servidor. SE PROHIBE TODA REPRODUCCION PARCIAL O TOTAL DE ESTE MATERIAL, EN CUALQUIER FORMATO IMPRESO O DIGITAL, QUE NO SEA UTILIZADO PARA LOS FINES EDUCATIVOS DE ACADEMIAMACPC. ACADEMIAMACPC - 2009