tutoria-5

TUTORIA 5•CREACION DE FORMULARIOS DE CONTACTO Y DE SONDEOS

•USO DE FILEZILLA

•PERSONALIZACION DE LA BARRA DE TITULO

CREACION DE FORMULARIO DE CONTACTO

• Para realizar los formularios de contacto existen sitios como este http://es.foxyform.com/

• En este sitio se puede seleccionar el fondo, colores y la información necesaria

CREANDO FORMULARIO DE CONTACTO

VISTA PREVIA DE FONDO, DATOS Y TEXTO

DISEÑADO EL FORMULARIO

• Una vez diseñado el formulario se da click en el botón crear formular

• Luego se copia el código generado en el body de la pagina que se este diseñando

CODIGO DEL FORMULARIO

CREACION DEL FORMULARIO DE SONDEO• En este caso se ha ingresado al sitio

web http://www.jotform.com/.• Jotform, tiene una gran cantidad de

herramientas que permite realizar cualquier tipo de formularios que para este ejemplo es uno de sondeo.

http://www.jotform.com/.

SE HA PUESTO UN ENCABEZADO Y LA OPCION DE CALIFICAR

El BOTON DE ENVIAR APARECE CON UN NOMBRE PREDETERMINADO EL CUAL SE PUEDE MODIFICAR SELECCIONANDO PROPIEDADES Y LUEGO EN MAS PROPIEDADES

PARA TERMINAR EL DISEÑO SE PUEDE ELEGIR UN TEMA O PONER EL COLOR DEL FONDO QUE SE DESEE

PARA OBTENER EL CODIGO SE DA CLICK EN CODIGO FUENTE

USANDO FILEZILLA

• Cuando se tiene el nombre del dominio, contraseña y usuario de ftp se ingresa en filezilla para subir la información en el servidor del sitio web

INGRESANDO AL SERVIDOR DEL SITIO WEB

CUANDO SE ESTABLECE LA CONEXIÓN PROCEDEMOS A SUBIR LOS ARCHIVOS DE NUESTRO PC AL SERVIDOR EN LA CARPETA PUBLIC HTML

LOS ARCHIVOS YA SE PUEDEN OBSERVAR EN EL SERVIDOR

PERSONALIZANDO LA BARRA DE TITULO

• Lo recomendable es asignar un titulo al index a través de las propiedades o en el código se puede hacer con la etiqueta <title>

• Además se puede agregar un icono en la barra que le de estilo al sitio web esto se hace convirtiendo la imagen en .ico en sitios web como http://www.jotform.com/ o http://www.favicon.cc/

• Para insertar el icon se usa el codigo <link rel="shortcut icon" href=“nombreimagen.ico"> en el head

INGRESAMOS A http://ico.bradleygill.com/index.php

SE SUBE LA IMAGEN ELEGIDA

DESCARGAMOS LA IMAGEN RESULTANTE

POR ULTIMO INGRESAR EL CODIGO AL EDITOR DE LA PAGINA

MAYOR INFORMACION EN:• http://www.caminoweb.com/docs/filezilla.html

• http://www.comocrearunsitioweb.com/subir-una-pagina-web

• http://www.pspstation.org/pc-mac-92/tutorial-poner-favicon-ico-paginas-web-8680/