Sei sulla pagina 1di 32

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing.

Carmen Infante Saavedra _______________________________________________________________________________________________________________________

UNIVERSIDAD NACIONAL DE PIURA


ESCUELA TECNOLOGICA SUPERIOR

SOFTWARE APLICATIVO II

CURSO :

MODULO IV
ING. CARMEN INFANTE SAAVEDRA

DOCENTE :

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

DREAMWAVER V 8
EJECUTAR EL PROGRAMA

PASOS PARA INGRESAR .1. 2. 3. 4. Ir a Inicio / Programas Ir a Macromedia Ejecutar Macromedia Dreamweaver 8 Seleccionamos : Crear nuevo : HTML

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

CONCEPTOS BASICOS
1.- DREAMWEAVER 8.0 .Es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

2.- VENTAJAS DE DREAMWAVER.Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provinientes de otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs introducir datos en forato XML fcil y cmodamente. Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproducin inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios, adems de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban. Interfaz mejorada: Los usuarios con problemas visuales podrn acceder auna opcin de Aumento de la pantaa en vista de diseo para analizar o trabajar con difcles

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de todos los elementos. Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir comentarios con un slo clic. Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.

EDITAR PGINAS WEB


Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver. Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

CMO TENER UNA PGINA EN INTERNET


Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn. Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

ESPACIO DE TRABAJO
1.- LA INTERFAZ DE DREAMWEAVER Flash 8 cuenta con un entorno o interfaz de trabajo de lo ms manejable e intuitiva. Su pantalla principal est dividida en :

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

LAS BARRAS
LA BARRA DE TTULO

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar. LA BARRA DE MENS

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles. LA BARRA DE HERRAMIENTAS ESTNDAR

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir , Guardar , etc.

LA BARRA DE HERRAMIENTAS DE DOCUMENTO

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

LA BARRA DE ESTADO

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

EJERCICIO 1.- CREAR LA PRIMERA PAGINA DE TEXTOS 1 Escribir los textos en la ventana diseo: Esta es mi primera pgina Universidad Nacional de Piura Facultad de Ingeniera Industrial Escuela Profesional de Ingeniera Informtica 2 Ir a Modificar /propiedades de la pgina 3 Cambiar las opciones del texto: color de la letra, fondo, tipo de letra, tamao, etc.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

4 Ubicar el cursor donde deseas colocar la imagen 5 Ir a imagen y escoger la imagen

EJERCICIO 2.- GUARDAR, CERRAR Y ABRIR UN DOCUMENTO 1 Ir a archivo / Guardar 2 Buscar el lugar donde se guardar y presionar guardar 3 Ir a archivo / Cerrar 4 Ir a archivo / abrir EJERCICIO 3.- MODIFICAR UN DOCUMENTO 1 Ir a archivo / abrir 2 Ir a la parte inferior, ventana propiedades y modificar las caractersticas del documento NOTA : All tambin encontramos el botn propiedades de la pagina

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

HIPERENLACES
1.- HIPERENLACE Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

2.-TIPOS DE ENLACES REFERENCIA ABSOLUTA: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicacin es en Internet, por ejemplo, http://www.misitio.com/pagina/pagina1.html. REFERENCIA RELATIVA AL DOCUMENTO: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. http://www.aulaclic.com, o

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

REFERENCIA RELATIVA AL SITIO: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como /pagina/secciones/seccion1.html. Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo del sitio raz y no de la ubicacin donde se encuentra. PUNTOS DE FIJACIN: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2 Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores). Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces. Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus objetos.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

3.- CREAR ENLACES La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor. Texto: es el texto que mostrar el enlace Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te crear un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las imgenes. Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada. ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos.

DESTINO DEL ENLACE El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo. _blank: Abre el documento vinculado en una ventana nueva del navegador.

_parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self:

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

TABLAS
1.INSERTAR TABLA - Ir a Insertar /tabla/aceptar NOTA : El ancho no debe exceder de 800 o 900 pixeles

2.-

MODIFICAR TABLA - Seleccionar las celdas a modificar - Hacer clic derecho en la tabla y aparecen las opciones : * Combinar celdas * Dividir celda * Insertar celdas * Eliminar celadas, etc

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

MARCOS O FRAMES
1.MARCO O FRAME Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. 2.INSERTAR MARCOS - Ir a Insertar /html/marcos ( a la derecha o a la izquierda del documento html abierto o en blanco)

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

2.-

SELECCIONAR MARCOS - Ubicarse en el marco. Si no esta activada la ventana de marcos actvela con la opcin ventana/ marcos.

3.-

GRABAR MARCOS - Ubicarse en el marco a grabar - Ir a Archivo /guardar/guardar

4.-

ASIGNAR PROPIEDADES A UN MARCO - Ubicarse en el marco a editar - Ir a propiedades y cambiar la configuracin del marco

5.-

CONTENIDO DEL MARCO - Ubicarse en el marco - Ir a propiedades y hacer clic en el botn editar: - Vnculo: Escribir el nombre de la pgina - Destino: Seleccionar el marco ( rigthframe, leftframe, etc )

6.-

INSERTAR MARCOS blank: Abre el documento vinculado en una ventana nueva del navegador. parent:

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos. self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. top: Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecern al abrir el vnculo en ella.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

EJERCICIOS
EJERCICIO 1.- CREAR MARCOS 1. Crear 1 pginas web con el nombre de Men 2. Inserto una imagen 3. Inserto 4 botones flash (Tamao 190x40) 4. Grabar la pgina 5. Crear una pgina para cada botn aplicando diferentes tipos de formatos (Tamao de letra 16) 6. En propiedades en el botn editar se puede : - Escoger el tipo de botn - Escribir el nombre - Escoger Fuente, vnculo, color, etc 7. Ubicarse en el documento men y crear un marco a la derecha de ancho de columna 700 px EJERCICIO 2.- CONFIGURAR LOS MARCOS ANTERIORMENTE CREADOS A OTRAS PAGINAS 1. Hacer clic en el primer botn (INTRODUCCION) 2. ir a propiedades y hacer clic en el botn editar: - Vnculo: Escribir el nombre de la pgina html ( INTRODUCCION) - Destino: Seleccionar el marco ( rigthframe ) 3. As se repite para cada botn y su respectiva pagina html con su informacin

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

FORMULARIOS
1.FORMULARIO Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

2.-

ELEMENTOS DE UN FORMULARIO Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina.

A. Campo de texto y rea de texto Permiten introducir texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir varias.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades, marcando la opcin Una lnea o Multi lnea respectivamente.

Campo de texto

rea de texto

B. Botn Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).

Enviar

C. Casilla de verificacin Es un cuadrado que se puede activar o desactivar.

Deseo recibir informacin

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

D. Botn de opcin Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, slo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems.

hombre mujer

E. Lista/Men Es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se aaden a travs del botn Valores de lista... del inspector de propiedades. Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.

--- Elige opcin lista ---

--- Elige opcin men--Perro Gato

F. Etiqueta Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir en cada uno de ellos.

Valor 1

Valor 2

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Crear formularios
Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas rojas discontinuas, similar al de la imagen de la derecha. Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertar a travs del men Insertar, opcin Formulario. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia.

Validar formularios
La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que se enve el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse. Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3. En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Despus de esto, hay que volver a desplegar el botn , y pulsar sobre la opcin Validar formulario, debers haber seleccionado el formulario previamente.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________ Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.

Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numrico (Nmero), una Direccin de correo electrnico, etc.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

EJERCICIOS
EJERCICIO 1.- INSERTAR UN FORMULARIO 1. Insertar una tabla 2. Insertar dentro de la tabla los objeto del formulario 3. Grabar

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

SUBIR UNA PAGINA A INTERNET


I.- CONCEPTOS BASICOS A.WEB HOST.Es un proveedor de hospedaje B.DOMINIO.Un dominio de Internet es una red de identificacin asociada a un grupo de dispositivos o equipos conectados a la red internet. El propsito principal de los nombres de dominio en internet y del sistema de nombres de dominio (DNS), es traducir las direcciones IP de cada modo activo en la red, a trminos memorizables y fciles de encontrar.

C.-

DISK SPACE.Espacio del disco para almacenar archivos en un servidor web.

D.-

FTP (file transfer protocol)


Protocolo de Transferencia de Archivos) en informtica, es un protocolo de red para la transferencia de archivos entre sistemas conectados a una red TCP (Transmission Control Protocol), basado en la arquitectura cliente-servidor. Desde un equipo cliente se puede conectar a un servidor para descargar archivos desde l o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.

E.-

HTML.Es un lenguaje de programacin para crear pginas web. Un programa en HTML


se puede escribir con un sencillo editor de textos. Es bastante limitado para programar ya que solo permite elaborar pagina web estticas.

F.-

ASP Y PHP.Los lenguajes ASP (Active Server Page) y el ms moderno PHP (Personal Home Page) son usados para crear pginas web dinmicas, pero no son CGIs. Pueden cumplir funciones similares. Las instrucciones de estos lenguajes son insertadas en el documento HTML, de una pgina web. Cuando la pgina es solicitada, el servidor web, explora el documento HTML, y cuando encuentra una instruccin ASP o PHP, la ejecuta y la sustituye por el resultado. Al terminar de analizar el documento HTML original, el servidor ha generado un nuevo documento HTML, el cual es enviado al usuario.

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

G.-

MySQL.Es un sistema de gestin de base de datos relacional, multihilo y multiusuario con ms de seis millones de instalaciones. Es un software libre.

H.-

JAVA SCRIPT.Es muy usado, porque permite crear pginas web dinmicas y ampliar la funcionalidad de un documento HTML. La gran ventaja de Javascript es que ejecuta en el PC o terminal del usuario. El cdigo de Javascript es insertado entre las instrucciones HTML. Normalmente est formado por funciones o rutinas de computacin, declaraciones de objetos y datos. Javascript es un lenguaje que permite programar aplicaciones complejas, tales como: verificar la consistencia de los datos ingresados en un formulario, abrir y manejar una nueva ventana del navegador, crear pginas web dinmicamente, efectuar clculos matemticos, efectuar tareas que requieren controles de tiempo, y muchas tareas ms.

H.-

JAVA .JAVA es un lenguaje de programacin orientado a objetos, moderno y muy seguro para desarrollar aplicaciones para Internet. Es similar al lenguaje C++ universalmente usado. Es un software libre. Para que un navegador o visor Web pueda ejecutar un programa en JAVA, necesita disponer de una mquina o intrprete JAVA. Los navegadores modernos tienen JAVA.

II.-

SITIOS WEB GRATUITOS

http://web.iespana.es/ http://www.000webhost.com/

Espacio : 100 MB Espacio : 1,500 MB

La activacin es al siguiente da. La activacin es inmediata.

III.-

BUSCADOR DE SITIOS WEB GRATUITOS

http://www.free-webhosts.com/

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________ IV.PASOS PARA SUSCRIBIRSE GRATUITAMENTE AL SERVICIO.1.- Ingresar a http://www.000webhost.com/ 2.- Ir a Sign Up (Para suscribirse al servicio) 3.- Escribir su dominio. Por ejemplo:

clis

y escribir sus dems datos

4.- Presionar en Create My Account

V.-

PASOS PARA INGRESAR AL ESPACIO ASIGNADO Y ADMINISTRAR.1.- Ir a Members Area (Para ingresar a tu espacio creado) 2.- Escribir : Correo, el password anteriormente escrito y se escribe el nmero/letra 3.- Hacer clic en Submit

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________ 4.- Ir a Go to Cpanel

5.- Ir a File Manager

8.- Hacer clic en la carpeta public 9.- Opciones : a.- New dir: Crea una nueva carpeta b.- New file: Crea un nuevo archivo en html c.- Upload: Sube los archivos al espacio asignado d.- Java Upload: Sube archivos de Java e.- Move: Mueve un archivo o carpeta f.- Delete: Borra un archivo o carpeta g.- Rename: Renombra un archivo o carpeta h.- Chmod: Cambia los permisos de un fichero o directorio

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________ 10.- Presionar Upload

11.- Ir a Examinar, escoger el archivo y presionar Abrir 13.- Presionar el botn de visto bueno de color verde (Submit)

14.- Presionar el botn de flecha azul (back) para ir atrs 15.- Para actualizar presione el botn con 2 flechas verdes y para salir presione el botn rojo RECOMENDACIONES: Es preferible escribir todo en minsculas para evitar problemas posteriores Cuando se carga la pgina web por primera vez, lo primero que se ve es el archivo index.html

VI.-

VER LA PGINA WEB EN EL ESPACIO GRATIS ASIGNADO Ir a Internet Explorer Escribir la direccin:

clis.netne.net

clis : Nombre de tu dominio creado

.netne.net :

Nombre del dominio del 000Webhost que por defecto pone

Universidad Nacional de Piura Escuela Tecnolgica Superior Curso : Software Aplicativo II Anlisis de Sistemas Docente : Ing. Carmen Infante Saavedra _______________________________________________________________________________________________________________________

Opciones del www.000webhost.com


Home (Inicio) View All Features (Ver todas las caracteristicas) Free Domain Hosting (Hosting de dominio gratuito) Free PHP Hosting (Hosting gratuito de PHP) Free Hosting with MySQL (Hosting gratuito con My SQL) Free cPanel Hosting (Hosting de cPanel gratuito) Website Builder (Stio Web Builder) Fantastico Autoinstaller (Fantastico autoinstalacion) Frequent Questions (Preguntas frecuentes) Web Hosting Reviews (Revisiones de alojamiento web) Website Templates (Plantillas de sitio web) Affiliate Program (Programa de afiliados)

Visit our Forum (Visite nuestro forum) Contact / Report Abuse (Pongase en contacto / informe abuso) Members Area (Area de miebros)

Para subir tus archivos tienes que hacer lo siguiente:


1.- Una vez que hayas ingresado en 000webhost vas a la opcin que dice go to Cpanel. 2.- Una vez que ingreses a Cpanel clikkeas en la primer opcin que dice view account details. 3.- Cuando entras hay una opcion que dice file uploads details y ms abajo dice web file manager click here le das click hay para ingresar. 4.- Despus te abre otra pgina donde te pide tu username y tu password pero no lo tienes que modificar por que ya queda guardado tu username y tu clave solo clikeas continuar. 5.- Y hay esta listo para subir tus archivos solo le das click a la carpeta public.html y borras un archivo que dice default y listo. 6.- Para subir tus archivos solo le das click a la opcion upload y subes todos tus archivos y listo.

Potrebbero piacerti anche