Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 12: Formularios y JavaScript.
|
|
|
- Eva Prado Cuenca
- hace 8 años
- Vistas:
Transcripción
1 Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 12: Formularios y JavaScript. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012
2 Formularios y JavaScript Interactuar con el usuario Cuando se complementa HTML con otros lenguajes, conseguimos crear verdaderas aplicaciones interactivas que se ejecutan a través del navegador. Las páginas web HTML o las acciones que se generan mediante JavaScript conforman recursos que se ejecutan del lado del navegador, es decir, en nuestro ordenador. Este proceso se puede complementar con una trabajo que se ejecuta en el lado del servidor, mediante lenguajes como PHP, ASP, etc. Así el servidor es capaz de crear páginas sobre la marcha, que se transmiten al usuario. En este punto nos centraremos, exclusivamente, en lo que sucede en el lado del navegador en nuestro propio equipo. Programación Objetivos específicos Crear formularios. Conocer los diferentes campos de un formulario. Gestionar eventos dentro de una página web. Contenidos Formularios. Campos de un formulario. Eventos. Creación de scripts con JavaScript. Criterios de evaluación Diseñar formularios. Controlar eventos mediante scripts. Requisitos mínimos Conocimientos sobre HTML. Conocimientos sobre navegadores web. Conocimientos de procedimientos en el ordenador: seleccionar, cortar y pegar. Ministerio de Educación, Cultura y Deporte INTEF 1
3 Recurso TIC: Formularios y JavaScript Seguiremos avanzando en nuestro conocimiento de las propiedades más empleadas de las hojas de estilo, centrándonos ahora en aquellas que conllevan posicionamiento de objetos, incluyendo algunas que definen su apariencia, pero más en un ámbito espacial. Formularios Las páginas más completas y más complejas suelen contar con algún grado de interactividad. Esa interactividad comienza por recoger alguna operación que realiza el usuario y responderle de algún modo. El ejemplo más claro de esto es el uso de formularios, para realizar una recogida de datos que el navegador mandará por correo electrónico o que se almacenarán en una base de datos en el servidor, para que a su vez puedan ser procesados. Para poder gestionar la información, remitida mediante el servidor y una base de datos, necesitaremos conocimientos avanzados de otras tecnologías que se ejecutan en el lado del servidor, lo que excede a los propósitos de este material. No obstante, sí podremos avanzar en el diseño de formularios, para enviar información por correo o para realizar algunas interacciones mediante JavaScript. Insertar un formulario La creación de un formulario se realiza mediante la etiqueta <form> y su correspondiente </form>. Así generamos un bloque dentro del cual podemos introducir todos los contenidos que queramos: tablas, imágenes, etc. También incluiremos en su interior diferentes elementos HTML orientados a esa recogida de datos. Probemos con un ejemplo elemental. Incorporaremos este texto en el <body> de una página vacía: <form name="miformulario"> <h1>bienvenido</h1> Introduce tu nombre: <input type="text" name="nombre" /> <br />Mensaje: <input name="mensaje" type="textarea" size="60" /> <br /><input type="submit" value="probar" /> </form> Al probar esta página, se obtiene el resultado de la figura: Ministerio de Educación, Cultura y Deporte INTEF 2
4 El formulario incluye un sencillo título y dos elementos de formulario: un cuadro de texto y un botón de envío. Opciones de formulario Nuestro formulario no tiene programada ninguna acción. Cuando se pulsa el botón Probar, no sucede nada. Se puede modificar el comportamiento del formulario y algunas opciones más mediante parámetros. El parámetro action se acompaña de una URL que indica a dónde se saltará cuando el usuario pulse en el botón de envío (el botón de tipo submit, como veremos más tarde). Un formulario como el nuestro se podría remitir por correo mediante una URL del tipo mailto así: <form name="miformulario" action="mailto:antoniop@iteite.es" method="post" enctype="text/plain"> y obtendríamos el resultado de la figura, donde se despliega la aplicación de correo que el usuario tiene configurada para remitirnos nuestro formulario por correo electrónico: Ministerio de Educación, Cultura y Deporte INTEF 3
5 Esta opción de remisión de formularios por correo se emplea poco en la actualidad; obliga al usuario a tener configurada una aplicación de correo. Lo normal aquí sería ejecutar algún script en el lado del servidor que procesase el formulario, lo que, como decíamos anteriormente, no será tratado en este módulo. Junto a action cada formulario suele tener otros tres parámetros: name: especifica un nombre único para el formulario. Es muy importante al ser procesado en el servidor, ya que permite discriminar entre varios formularios, si la página los tuviese. method: indica el formato de envío que se va a emplear para el formulario. Tenemos la opción post que remite la información de forma oculta y sin limitaciones de tamaño y, por otro lado, la opción get, que transmite los datos como parte de la URL de la página. El método post suele ser el más recomendable y es el que emplearemos en casi todos los casos. enctype: se usa para indicar el formato de codificación de los datos que estamos remitiendo. El valor predeterminado application/x-www-form-urlencoded. text/plain hace que se reemplacen los espacios por el signo +; se emplea para textos sencillos. Si vamos a enviar archivos, fotos, etc. usaremos la codificación multipart/form-data donde ningún carácter se codifica. Aún hay algunos valores más, como autocomplete (con valores on u off) que decide si al rellenar el formulario se nos harán sugerencias (que es el comportamiento predeterminado) o no. Ponerlo en off es útil para formularios en los que se introducen datos personales. También podemos activar el valor novalidate, para que el formulario no se compruebe antes de enviarlo. Pregunta de Elección Múltiple El parámetro action en los formularios suele ir acompañado otros tres: name, method y enctype. Estos parámetros sirven para especificar un nombre único para cada formulario. Sirven para indicar el formato de envío que se va a emplear para el formulario. Sirven para indicar el formato de codificación de los datos que estamos remitiendo. Todas las anteriores son falsas. Ministerio de Educación, Cultura y Deporte INTEF 4
6 Actividad 1 Generaremos un pequeño formulario para ir probando los diferentes tipos de campos que se pueden añadir. En el parámetro action optaremos por una acción de envío por correo electrónico, para así poder comprobar los valores que se mandan en cada correo. Campos de un formulario Un formulario puede contener cualquier tipo de recurso, como ya hemos dicho antes, pero hay algunos campos que son específicos del formulario y cuyo valor se enviará cuando éste se remita. Cuadro de texto Un cuadro de texto es un espacio definido para que el usuario introduzca un texto libre. Se crea con: Introduce tus apellidos: <input type="text" name="apellidos" /> Como todos los elementos de un formulario, además del tipo se establece un nombre único mediante el parámetro name. Ese valor nos permite manipular el valor mediante scripts del lado del servidor o utilizando JavaScript. Nota La etiqueta <input> cuenta con un copioso número de parámetros. No todos son aplicables a todas las etiquetas input; depende del tipo que indiquemos en el valor type. Más tarde veremos algunos valores. Cuadro de contraseña Los campos de contraseña son iguales que los de texto, pero al escribir dentro de ellos sólo se ven asteriscos o algún carácter similar, para evitar que otras personas alrededor puedan ver la clave. Introduce tu clave: <input type="password" name="clave" /> Botones radiales El usuario puede seleccionar uno de los valores del bloque, pero sólo uno de ellos; son excluyentes. Selecciona el color de tu icono:<br /> <input type="radio" name="coloricono" value="rojo" /> Rojo<br /> <input type="radio" name="coloricono" value="verde" /> Verde <br /> <input type="radio" name="coloricono" value="azul" /> Azul <br /> Dos detalles fundamentales para que este conjunto funcione: El valor indicado en name tiene que ser el mismo en todas las opciones; así es como el navegador sabrá qué elemento del conjunto está seleccionado. Ministerio de Educación, Cultura y Deporte INTEF 5
7 Se incorpora un parámetro nuevo, value. Cuando el formulario se envíe para ser procesado, el campo coloricono de nuestro ejemplo tomará el valor indicado en value. Este valor no tiene por qué coincidir con el texto que mostramos a continuación. El conjunto se ve así, tras seleccionar la tercera opción: Casillas de verificación En este tipo (denominado checkbox) el usuario sí puede seleccionar varias opciones. Todas ellas se remitirán para ser procesadas, asociadas bajo el mismo nombre, indicado en el parámetro name: <hr />Selecciona los días con disponibilidad:<br /> <input type="checkbox" name="dias" value="l" /> Lunes<br /> <input type="checkbox" name="dias" value="m" />Martes<br /> <input type="checkbox" name="dias" value="mm" />Miírcoles<br /> <input type="checkbox" name="dias" value="j" />Jueves<br /> <input type="checkbox" name="dias" value="v" />Viernes<br /> Bajo el valor dias se transmitirá a la página web encargada de procesar el resultado del formulario una secuencia con todos aquellos cuadros que hayan sido activados. Se transmitirá el valor que aparece dentro de cada value, únicamente. Por ejemplo, si enviamos el formulario de la figura, se mandará la secuencia l, m y j. Ministerio de Educación, Cultura y Deporte INTEF 6
8 Nota En el ejemplo hemos reemplazado los caracteres con tilde por entidades html. Por ejemplo, la secuencia í se reemplazará por una "í". Es apropiado hacer estos cambios para asegurarnos de que nuestra página se muestra siempre correctamente. Los editores web suelen hacerlo por nosotros. No obstante, si tenemos que hacerlo, podemos encontrar una lista de entidad html en varios sitios, por ejemplo en Botón de envío Un campo de tipo submit generará un botón que, al ser pulsado, hará que se aplique la acción indicada en el formulario: <input type="submit" value="haz clic para enviar la informacíon" /> Botón de limpieza Un campo de tipo reset eliminará todo el contenido introducido en un formulario, dejándolo limpio de nuevo. La figura muestra el botón anterior y uno de tipo reset. <input type="reset" value="comenzar a rellenar de nuevo" /> Ministerio de Educación, Cultura y Deporte INTEF 7
9 Botón estándar También podemos crear un botón que no sea del tipo submit o reset, sino genérico, mediante el tipo button. <input type="button" value="haz clic sobre mi" /> Ese botón tal y como está no hace absolutamente nada. Podemos pasarnos el día entero pulsándolo sin conseguir ningún resultado. Para que esos botones interactuen tenemos que definir en ellos el evento onclick. Así podremos asociarle una función JavaScript, cargar una página en el lado del servidor o simplemente remitir una información por correo electrónico. <input type="button" value="haz clic sobre mi" onclick="javascript:window.location=' /> Este botón sí realiza ya una operación. Al hacer clic sobre él, se ejecuta una pequeña acción de JavaScript (window.location=' que hace que el navegador salte a la página indicada. Nota Más tarde analizaremos los eventos y su funcionamiento. Archivo Un elemento input de tipo file nos sirve para enviar un archivo al servidor. Se emplea con frecuencia para enviar alguna imagen, documentos de texto, etc. Podemos remitir cualquier tipo de archivo. Adjunta tu curriculum vitae <input type="file" name="curriculum" /> El resultado es éste: Ministerio de Educación, Cultura y Deporte INTEF 8
10 Valores ocultos El tipo hidden se emplea para remitir información al servidor dentro de los formularios, pero sin que esta información se muestre en la pantalla. Su sentido es el de proporcionar datos complementarios, como podría ser la fecha, desde dónde se ha rellenado el formulario o cualquier otro aspecto que no necesitamos que rellene el usuario, sino que podemos definir por otros medios. Todo lo que podamos evitar que sea rellenado aligerará el formulario y favorecerá la interactuación del usuario con nuestra página. <input type="hidden" name="campaña" value="primavera" /> Más tipos La aparición de HTML5 nos trae varios tipos de campo <input> añadidos. En concreto las nuevas opciones son las siguientes: color, date, datetime, datetime-local, month, week, time, , number, range, search, tel y url. En la actualidad casi todos ellos se muestran como cuadros de texto normales pero, a medida que se implante el estándar, iremos viendo cómo se producen cambios. Por ejemplo, si definimos un campo indicando que será de tipo tel (teléfono) y accedemos mediante un dispositivo móvil, el teclado se cambiará automáticamente al numérico; o si definimos un campo de tipo (correo), el navegador será capaz de realizar una validación previa para comprobar si es una dirección correcta. En conclusión, puede ser interesante ir conociéndolos e incorporándolos a nuestra rutina, al diseñar formularios. Otros campos diferentes a input En los formularios emplearemos otros recursos diferentes a los que nos facilita la etiqueta input. Área de texto Un área de texto es similar a los cuadros creados con <input type="text"> pero más amplios, pensados para albergar secuencias de texto tan largas como sea preciso. Se crean mediante la etiqueta <textarea> y en ellas podemos indicar el tamaño visual del campo mediante los parámetros cols (columnas) y rows (filas). Ministerio de Educación, Cultura y Deporte INTEF 9
11 <textarea name="mensaje" cols="60" rows="6" /> </textarea> La figura muestra la etiqueta anterior: Como se puede observar, esta etiqueta lleva su cierre correspondiente. Si colocamos cualquier texto entre ambas etiquetas, se mostrará dentro del cuadro al cargarse la página. Listas desplegables La etiqueta <select> y </select> se utiliza para crear una lista desplegable de opciones, donde el usuario puede seleccionar una de ellas. Su sentido es similar al de los botones radiales, pero en un espacio más reducido, sobre todo si tenemos muchas opciones. Tiene también la ventaja de que con el teclado podemos desplazarnos rápidamente hasta la opción que comience con la letra que pulsamos, algo muy útil en las listas muy largas. Cada opción de una lista desplegable se engloba en la etiqueta <option>, por lo que el conjunto quedaría así: Selecciona el día preferente:<br /> <select> <option value="l"> Lunes</option> <option value="m">martes</option> <option value="mm">miércoles</option> <option value="j">jueves</option> <option value="v">viernes</option> </select> Al probarlo, obtendremos una lista como la de la figura: Ministerio de Educación, Cultura y Deporte INTEF 10
12 Si queremos que de forma predeterminada el valor seleccionado sea diferente del primero, podemos añadir el parámetro selected al elemento. Así: <option value="j" selected>jueves</option> También es habitual añadir un elemento en blanco al principio o con un texto animando a realizar la selección: <option value=""> Seleccione un día</option> El cambio se vería de esta manera: Al no tener valor asociado, podríamos saber, al tratar el formulario, que el usuario no ha escogido ningún día. Grupos de opciones La etiqueta optgroup nos proporciona una variante de los campos de tipo option. Su diferencia es que podemos agrupar las opciones con subtítulos. Observemos este ejemplo: <hr /> Escoja una materia: <select> <optgroup label="obligatorias"> <option value="mat">matemáticas</option> <option value="len">lenguaje</option> </optgroup> <optgroup label="optativas"> <option value="cor">corte y confección</option> <option value="ast">astronomía</option> </optgroup> </select> Se mostraría así: Ministerio de Educación, Cultura y Deporte INTEF 11
13 Elementos complementarios En formularios largos conviene agrupar los grandes bloques de elementos mediante la etiqueta <fieldset>. Es una división visual marcada por una simple línea. Si empleamos la etiqueta <legend> podremos además añadir un nombre a ese subconjunto. Observemos este ejemplo y cómo se mostraría en el navegador: <fieldset> <legend>datos personales</legend> Introduce tu nombre: <input name="nombre" type="text" /> <br /> Mensaje: <textarea name="mensaje" cols="60" rows="6"></textarea> <br /> </fieldset> Esta división es meramente visual y no afecta de ninguna manera al comportamiento del formulario, aunque sí le aporta un sentido semántico. Además, podemos utilizar la etiqueta <label> para establecer un nombre para un campo. Esta etiqueta no se muestra, por lo que aplicarla vuelve a ser una medida apropiada para favorecer la accesibilidad del formulario e incluso para aplicar estilos, pero no tendrá efecto en el formulario. Se utiliza junto al parámetro for, así: <label for="nombre">nombre</label> Introduce tu nombre: <input id="nombre" name="nombre" type="text"> <br> Su valor debe ser el mismo que el valor id del campo, por lo que nos obligamos a añadir un valor id a cada elemento. Parámetros comunes La mayoría de los elementos de un formulario cuentan con algunos parámetros comunes muy útiles: size: en los cuadros de texto se emplea para definir el tamaño del campo. Por ejemplo size="20". Ministerio de Educación, Cultura y Deporte INTEF 12
14 maxlenght: también en los cuadros de texto nos servirá para limitar el tamaño. Por ejemplo: <input type="text" name="telefono" maxlenght="9" size="9" /> readonly: en los cuadros de texto hace que el valor sea de sólo lectura, que no se pueda cambiar. Por ejemplo: <input type="text" name="pais" readonly="readonly" />España disabled: hace que el elemento se encuentre desactivado y no se pueda modificar. Sirve con varios elementos diferentes. Se añade así: disabled="disabled" placeholder: permite añadir un texto dentro del cuadro, que desaparece automáticamente al hacer clic sobre él. Son muy útiles para incorporar pequeñas indicaciones sobre el valor que se espera. Se añade así: placeholder="introduce tu nombre" tabindex: es habitual desplazarse por un formulario presionando la tecla Tab para avanzar al campo siguiente o Mayús-Tab para ir al anterior. Mediante tabindex podemos modificar el orden de esos saltos entre los campos de nuestro formulario. Iremos numerando cada campo mediante un número, así : <input type="password" name="clave" tabindex="1" /> Con todo esto tenemos todos los recursos necesarios para diseñar los formularios más completos. Sólo nos faltará aplicar los estilos adecuados para que el formulario se integre correctamente con nuestro sitio. Pregunta Verdadero-Falso Las siguientes afirmaciones, son verdaderas o falsas? Para que los botones radiales funcionen hay que tener en cuenta que el valor introducido en name tiene que ser el mismo en todas las opciones, además hay que escribir el parámetro input. Verdadero Falso El parámetro checkbox sirve para el usuario pueda seleccionar varias opciones de una lista dada. Verdadero Falso El parámetro reset eliminará sólo el contenido de los botones radiales, dejándolo limpio de nuevo. Verdadero Falso La etiqueta <select> y </select> se utiliza para crear una lista desplegable de opciones, donde el usuario puede seleccionar una de ellas. Verdadero Falso Nota Con los estilos podemos modificar cualquier valor de los campos. Podemos cambiar los colores de los botones, el fondo de los campos, etc. Actividad 2 Ministerio de Educación, Cultura y Deporte INTEF 13
15 Incorporaremos a nuestro formulario diferentes tipos de campos. Intentaremos que sean lo más variados posibles. Insertar un formulario con un editor web Una vez más los editores web vienen a nuestro rescate, permitiéndonos mantener un conocimiento más relajado de toda la sintaxis de un formulario. Podremos insertar todo tipo de campos con facilidad. En BlueGriffon seguiríamos un procedimiento similar a éste: 1. Abrimos la aplicación y creamos un documento nuevo. 2. En el menú Insertar seleccionamos la opción Formulario>Formulario. 3. En la ventana de la figura estableceremos los datos básicos del formulario y hacemos clic en Aceptar. 4. El formulario se muestra delimitado por una línea azul. A partir de aquí podemos crear contenidos dentro del formulario o fuera. Incluso podemos crear más formularios dentro de la página. 5. Para insertar un campo, haremos clic en el interior de la zona azul y seleccionaremos una de las opciones del menú Insertar>Formulario, que se recogen en la figura: Ministerio de Educación, Cultura y Deporte INTEF 14
16 6. En la categoría Entradas encontramos todos los elementos denominados <input>, así como otros que se están incorporando en la actualidad en el desarrollo de HTML5. En todos los casos, al seleccionar un tipo, aparecerá una ventana desde la que estableceremos los datos básicos del campo. Es así de sencillo; luego sólo debemos ir incorporando los campos necesarios, intercalándolos con las etiquetas que aclaren su funcionamiento. El siguiente vídeo reproduce la creación de un formulario. Vídeo Creación de un formulario Nota Algunos otros elementos como <progress> y <meter> no están directamente vinculados con los formularios, aunque el autor de la aplicación ha estimado que es un buen lugar para ubicarlos. Estos dos elementos, en concreto, se emplean para realizar barras de progreso y de medición. Actividad 3 Diseñaremos un formulario con un editor web que incluya al menos 6 tipos de campos diferentes. Para hacer las pruebas, podemos crearlo con una acción de tipo mailto. Así podremos comprobar qué resultados se envían al componer el correo electrónico. Ministerio de Educación, Cultura y Deporte INTEF 15
17 Eventos Con independencia del tratamiento que realicemos con un formulario, que como venimos diciendo requiere en ocasiones que se complemente con otras tecnologías diferentes a las que estamos aprendiendo, podemos profundizar en la interactividad de las páginas web gracias a los eventos. Un evento es algo que sucede en el navegador, de tal manera que, cuando ocurren, podemos definir algún comportamiento concreto, una respuesta por parte de la página web, mediante nuestro medio o utilizando esas otras tecnologías del lado del servidor. Veamos un ejemplo sencillo que nos ayudará a entender este concepto: Carga y descarga de la página Cada vez que el navegador termina de cargar una página, le remite al documento una indicación de que se ha producido un evento que se llama onload. De este modo, desde la página web podemos saber en qué preciso momento se ha terminado de cargar la página completamente y podemos realizar alguna acción. Para realizar estas acciones podemos, por ejemplo, utilizar el lenguaje JavaScript, con el que ya hemos realizado un par de prácticas. Observa la línea siguiente: <body onload="javascript:alert('perfecto. La página ya se ha cargado.');"> alert es una función del lenguaje JavaScript que se utiliza para mostrar un mensaje en la ventana del navegador, como una ventana emergente. Se suele acompañar de un pequeño texto, que será el que se muestre. Ésta es una función muy utilizada, porque permite averiguar los mensajes que se están generando dentro de la página web. Como se puede observar, indicamos que es una instrucción de JavaScript poniendo primero ese término seguido de un signo de dos puntos. Al probar la página web y terminar de cargarse, obtendremos el siguiente resultado: Ministerio de Educación, Cultura y Deporte INTEF 16
18 Nota Todas las funciones de JavaScript (y de otros muchos lenguajes de programación) siguen una estructura parecida: primero se indica el nombre de la función y a continuación, entre paréntesis, los diferentes parámetros que la función necesita para funcionar. Además las líneas en JavaScript finalizan con un signo de punto y coma, lo que le indica a la parte encargada de interpretar las órdenes que ahí ha finalizado la instrucción que le estamos dando. Además de onload tenemos otros controles que se lanzan antes de que se cargue la página (onbeforeload), cuando se abandona la página (onunload). Más eventos de body No se acaban ahí las opciones; tenemos eventos para controlar aspectos como el momento en que se cambia el tamaño de una ventana (onresize), el momento en que se imprime una página web (onprint) o el momento antes de comenzar la impresión (onbeforeprint) y otros muchos más. La conclusión es que empleando JavaScript, Ajax o tecnologías del lado del servidor podemos responder perfectamente ante cualquier operación que se realice con la página web en general. Enfoque y desenfoque En el ámbito informático, en sistemas como una página web donde varios elementos se presentan ante el usuario, se emplea el concepto de foco para determinar qué elemento, de los disponibles en la pantalla, es el que tiene la atención en cada momento. Así, si por ejemplo pulsamos una tecla en el teclado, afectará al elemento que tenga el foco. Cuando pasamos a un segundo elemento, haciendo clic con el ratón, el primero deja de tener el foco y lo obtiene a su vez el segundo. Contamos con dos eventos para realizar operaciones cuando un elemento obtiene el foco (onfocus) y para cuando lo pierde (onblur). Suelen resultar bastante útiles al trabajar con formularios. Observemos el ejemplo de la figura. El estado inicial de los campos es similar en todo caso, pero cuando el usuario hace clic en el campo Nombre, éste se vuelve de color rojo. Cuando el usuario pasa a otro campo (cuando nombre pierde el foco), vuelve a su color habitual: Ministerio de Educación, Cultura y Deporte INTEF 17
19 Para conseguirlo de nuevo, debemos recurrir a técnicas basadas en JavaScript. En esta ocasión hemos optado por incorporar el código necesario en la cabecera de la página, entre <head> y </head>. <head> [...] <script language="javascript"> function enfocado(id_objeto) { document.getelementbyid(id_objeto).style.border="2px solid red"; } function desenfocado(id_objeto) { document.getelementbyid(id_objeto).style.border="inherit"; } </script> </head> Es un código muy sencillo que ya hemos empleado además en otra ocasión. Definimos dos funciones que recibirán el id de un elemento HTML y modificarán el borde en cada caso. En el primero pondrá un borde rojo de 2 píxeles y en el segundo regresará a su valor original. Las estructuras de las funciones en JavaScript son siempre muy similares a éstas. Se indica el nombre de la función, los parámetros que va a utilizar y posteriormente, entre llaves, se indican las acciones a realizar. En nuestro ejemplo cada función tiene una única opción, pero normalmente tendrán muchas más. Para que funcione, modificaremos el elemento HTML dejándolo así: <fieldset> <legend>datos personales</legend> Ministerio de Educación, Cultura y Deporte INTEF 18
20 Introduce tu nombre: <input name="nombre" id="nombre" type="text" onfocus="javascript:enfocado(this.id);" onblur="javascript:desenfocado (this.id);"> <br /> Mensaje: <textarea name="mensaje" cols="60" rows="6"></textarea> <br /> </fieldset> Como se puede observar, sólo hemos cambiado la línea del nombre respecto a los ejemplos anteriores. Hemos añadido tres cosas: Un id denominado nombre. Un evento onfocus que ejecutará la función enfocado que hemos definido en la cabecera. this.id es el valor que le enviamos a la función y equivaldría a "nombre" en este ejemplo. Un evento onblur que ejecutará la otra función. Cuando probemos la página todo funcionará correctamente. De hecho, añadiendo estas tres últimas modificaciones a cualquier campo del formulario, conseguiremos que tengan ese cambio de color. Las funciones se pueden reutilizar tantas veces como sea necesario. Nota Hay formas más sencillas y directas para conseguir este mismo resultado, pero resultan menos intuitivas para nuestro aprendizaje. Cuanto más profundicemos en el uso de JavaScript, más sencillo se irá volviendo su aplicación. Los formularios cuentan con otros muchos eventos, como cuando alguien pulsa el botón de envío del formulario (onsubmit), cuando alguien hace clic en el botón de reiniciarlo (onreset), cuando se introduce información en un cuadro (oninput) o cuando un valor cambia (onchange). Actividad 4 Probaremos a realizar una pequeña gestión de eventos, de tal modo que, cuando un usuario haga clic en el botón de limpieza del formulario, se le muestre un aviso con cualquier texto, como se recoge en la figura. Ya hemos visto todo lo necesario para conseguirlo. Como pista, la única parte que debemos deducir es dónde ubicaremos la gestión del evento, si en el botón de reset o en la etiqueta del formulario. Al ser un evento que afecta a todo el formulario, debe ser en la etiqueta de formulario, pero podemos probar en ambos sitios para asegurarnos. El teclado Contamos con tres posibles eventos cuando trabajamos con el teclado. onkeydown: sucede cuando una tecla está presionada. onkeyup: cuando se libera una tecla. Ministerio de Educación, Cultura y Deporte INTEF 19
21 onkeypress: cuando se pulsa una tecla. Con estos eventos podemos desplazarnos a zonas de la página, desplegar un menú determinado e incluso realizar pequeños juegos que respondan a la pulsación de las teclas. El siguiente código realiza un sencillo uso de onkeypress, mostrando en una parte de la página la tecla que se pulsa: <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <title>formulario</title> <script language="javascript"> function mostrar_tecla(e) { if (e.keycode) keycode=e.keycode; else keycode=e.which; document.getelementbyid('zonadeteclas').innerhtml = document.getelementbyid('zonadeteclas').innerhtml + String.fromCharCode(keycode); } </script> </head> <body onkeypress="mostrar_tecla(event);"> Prueba de teclas: <span id="zonadeteclas"></span> </body> </html> Cada vez que se pulse una tecla, se mostrará en la zona en la que hemos ubicado la etiqueta <span>. El código JavaScript utiliza una sencilla fórmula para averiguar qué tecla se ha pulsado. Estas tres líneas nos mostrarían la tecla en una ventana emergente. if (e.keycode) keycode=e.keycode; else keycode=e.which; alert(string.fromcharcode(keycode)); En su lugar la mostramos en la pantalla mediante la propiedad innerhtml, que nos permite incorporar en tiempo real un texto, etiqueta o cualquier otro elemento a una página web. Nota Esto se está volviendo complicado, lo sabemos. Podemos tomarlo como pequeñas fórmulas que se pueden aplicar en diferentes condiciones o simplemente no darle mucha importancia. JavaScript es un buen complemento, pero no es el centro de la creación de páginas web. Controlando el ratón El ratón es el elemento lanzador de eventos por antonomasia. Cada vez que lo desplazamos o que pasamos por encima de algún lugar, estamos generando eventos que pueden ser manipulados mediante nuestra página web. Aquí van algunos de esos eventos: onclick, ondblclick, onmousewheel: generan un evento cuando se hace clic, doble clic o se usa la rueda del ratón. Ministerio de Educación, Cultura y Deporte INTEF 20
22 ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop: controlan todas las posibilidades que se generan al arrastrar y soltar un elemento en la página web. onmousedown, onmousemove, onmouseout, onmouseover, onmouseup: controlan el movimiento del ratón cuando no está presionado el botón, al pasar sobre un elemento, al salir de él, etc. onscroll: cuando hay un desplazamiento vertical. Más adelante probaremos alguno de estos eventos y otros ya los hemos probado. Aquí es importante fijarse en dónde ponemos el evento. Por ejemplo, un evento onmousemove dentro de una imagen nos asegurará que se ejecute la acción prevista cada vez que el ratón se desplace, pero sólo dentro de esa imagen. Si por el contrario lo indicamos en la etiqueta <body>, el evento se generará cada vez que el ratón se desplace por cualquier lugar de la página. Actividad 5 Probaremos a realizar un evento que muestre un aviso cada vez que se hace doble clic sobre una imagen. Observaremos la diferencia al colocar ese mismo evento en la etiqueta <body> o en algún <div> que ocupe parte de la pantalla. Eventos multimedia Con la llegada de las etiquetas <video> y <audio> encontramos también una serie de eventos destinados a gestionar lo que sucede al reproducir elementos multimedia. Encontraremos eventos que se lanzan al reproducir un recurso, al pausarlo, al finalizar, si no se puede reproducir, al cargar datos, al modificarse su volumen y otros muchos más, cuyo análisis es largo y su implementación aún es irregular. De momento nos bastará saber que están ahí. Pregunta Verdadero-Falso Las siguientes afirmaciones, son verdaderas o falsas? alert es una función del lenguaje JavaScript que se utiliza para mostrar un mensaje en la ventana del navegador, como una ventana emergente. Verdadero Falso En JavaScript hay eventos para todo excepto para controlar aspectos como el momento en que se cambia el tamaño de una ventana, el momento en que se imprime una página web o el momento antes de comenzar la impresión. Verdadero Falso En JavaScript las estructuras utilizadas son siempre muy similares, se suele indicar el nombre de la función, los parámetros que va a utilizar y posteriormente, entre llaves, se indican las acciones a realizar. Verdadero Falso Existen cuatro posibles eventos cuando trabajamos con el teclado: onkeydown, onkeyup, onkeyfront y onkeypress. Ministerio de Educación, Cultura y Deporte INTEF 21
23 Verdadero Falso Resumen La etiqueta <form> nos facilita la creación de formularios, con sus diferentes parámetros. En el interior de un formulario podemos añadir varios campos. Cuadros de texto: <input type="text" /> Cuadros de contraseña: <input type="password" /> Cuadros radiales: <input type="radio" /> Casillas de verificación: <input type="checkbox" /> Botón de envío: <input type="submit" /> Botón de reinicio: <input type="reset" /> Botones: <input type="button" /> Cuadros de archivo: <input type="file" /> Valores ocultos: <input type="hidden" /> Área de texto: <textfield> Listas desplegables <select> con sus correspondientes <option> o <optgroup> Aún quedan otros tipos más, menos implantados, pero que ya debemos ir utilizando progresivamente. Los formularios se complementan con <fieldset> y <legend> para agrupar elementos y con <label> para etiquetarlos. Por último, hemos realizado un repaso a los posibles eventos que se generan en una página web, así como una aproximación al trabajo con JavaScript, el lenguaje de scripts que complementa a las páginas web. Actividades y ejemplos Actividad 1. Formularios Generaremos un pequeño formulario para ir probando los diferentes tipos de campos que se pueden añadir. En el parámetro action optaremos por una acción de envío por correo electrónico, para así poder comprobar los valores que se mandan en cada correo. Actividad 2. Campos de un formulario Incorporaremos a nuestro formulario diferentes tipos de campos. Intentaremos que sean lo más variados posibles. Ministerio de Educación, Cultura y Deporte INTEF 22
24 Actividad 3. Insertar un formulario con un editor web Diseñaremos un formulario con un editor web que incluya al menos 6 tipos de campos diferentes. Para hacer las pruebas, podemos crearlo con una acción de tipo mailto. Así podremos comprobar qué resultados se envían al componer el correo electrónico. Actividad 4. Eventos Probaremos a realizar una pequeña gestión de eventos, de tal modo que, cuando un usuario haga clic en el botón de limpieza del formulario, se le muestre un aviso con cualquier texto, como se recoge en la figura. Ya hemos visto todo lo necesario para conseguirlo. Como pista, la única parte que debemos deducir es dónde ubicaremos la gestión del evento, si en el botón de reset o en la etiqueta del formulario. Al ser un evento que afecta a todo el formulario, debe ser en la etiqueta de formulario, pero podemos probar en ambos sitios para asegurarnos. Actividad 5. Eventos Probaremos a realizar un evento que muestre un aviso cada vez que se hace doble clic sobre una imagen. Observaremos la diferencia al colocar ese mismo evento en la etiqueta <body> o en algún <div> que ocupe parte de la pantalla. Ejemplos Las diferentes prácticas, recursos y ejemplos realizadas en este módulo están disponibles para realizar pruebas. Ejemplos del módulo Aplicación al aula Ministerio de Educación, Cultura y Deporte INTEF 23
25 Crearemos un formulario con nuestros alumnos que se remitirá por correo electrónico, además de aplicarle un estilo apropiado al mismo. Programación dirigida al alumnado Objetivos Aplicar los conceptos de formularios. Diseñar diferentes tipos de campos. Modificar la apariencia de un formulario mediante estilos. Contenidos Formularios. Campos de un formulario. Estilos. Materiales y recursos Ordenador con acceso a Internet. Temporalización Dos sesiones. Planificación El alumnado creará un formulario, incorporará varios tipos de campos y finalmente le aplicará los estilos necesarios para que el resultado sea cómodo y atractivo para los usuarios. Organización del aula Trabajaremos en un aula con ordenadores con un agrupamiento individual o por parejas. Desarrollo de la actividad Se repasan los conceptos de formularios y tipos de campos. Se diseña un formulario. Se genera una hoja de estilos externa con los elementos básicos del formulario. Se comparten los resultados. Presentación y evaluación de los resultados Ministerio de Educación, Cultura y Deporte INTEF 24
26 La evaluación se realizaría mediante la revisión del resultado y la observación del proceso. Se pueden evaluar varios aspectos a lo largo de todo el proceso: Diseño del formulario. Capacidad para aplicar estilos. Apariencia general del documento. Sugerencias metodológicas La metodología empleada es la de proyecto. Para su aplicación proponemos: Primera sesión Explicamos el objetivo de la actividad y describimos los conceptos necesarios. Diseñamos un formulario básico que se remitirá por correo. Decidimos qué campos necesitaremos recoger y posteriormente los incorporamos a nuestro proyecto. Segunda sesión Retomando el ejemplo anterior, aplicamos los estilos necesarios. Revisamos los resultados y buscamos alternativas. Compartimos los resultados entre los alumnos, rellenamos los formularios y comprobamos su comodidad y sencillez de uso. Atención a la diversidad Actividad de refuerzo Para aquellos alumnos/as que puedan tener más dificultad, se les puede facilitar un modelo inicial de plantilla para que ellos la modifiquen. Actividad de ampliación Ministerio de Educación, Cultura y Deporte INTEF 25
27 La profundización en esta actividad se basaría en que el alumnado probase a añadir algo de interactividad, mediante ejemplos cerrados de eventos con su correspondiente código JavaScript. Ministerio de Educación, Cultura y Deporte INTEF 26
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
Programa diseñado y creado por 2014 - Art-Tronic Promotora Audiovisual, S.L.
Manual de Usuario Programa diseñado y creado por Contenido 1. Acceso al programa... 3 2. Opciones del programa... 3 3. Inicio... 4 4. Empresa... 4 4.2. Impuestos... 5 4.3. Series de facturación... 5 4.4.
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007
MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 Servicio de Informática y Comunicaciones Para poder diseñar un formulario y que éste nos envíe los resultados a nuestro correo electrónico, necesitamos
Creando una webquests
Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
El e-commerce de Grupo JAB es una herramienta que permite a los clientes del Grupo, realizar un amplio conjunto de servicios de consulta, petición y
El de Grupo JAB es una herramienta que permite a los clientes del Grupo, realizar un amplio conjunto de servicios de consulta, petición y compra en los diversos almacenes del Grupo JAB. En concreto podremos:
Laboratorio 6. Creación de sitios Web - Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
STRATO LivePages Inicio rápido
STRATO LivePages Inicio rápido LivePages es la práctica herramienta de creación de páginas web de STRATO. En pocos pasos podrá crear su propia página web y publicarla en Internet sin necesidad de conocimientos
DISEÑO WEB ADOBE DREAMWEAVER CS3
CLASE 6 CREACIÓN DE FORMULARIOS Todo sitio Web necesita recabar cierta información, a veces para contactarse con los visitantes, a veces para encuestas y en algunas ocasiones para realizar venta o contratación
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER Existen muchos proveedores de servicios para crear un blog. En nuestro caso se ha decidido crear uno en Blogger, que es, a su vez, donde muchas
INSTALACIÓN DE MEDPRO
1 Estimado Cliente: Uno de los objetivos que nos hemos marcado con nuestra nueva plataforma de gestión, es que un cliente pueda instalar MedPro y realizar su puesta en marcha de forma autónoma. Siga paso
GUÍA DE USUARIO: GOOGLE DRIVE
GUÍA DE USUARIO: GOOGLE DRIVE Google Drive es una herramienta telemática de la web 2.0 que permite el trabajo virtual de forma colaborativa. En Google Drive podemos encontrar una barra de navegación en
ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas.
ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas. Sala de sistemas, Video proyector, Guías RECURSOS ACTIVIDADES PEDAGÓGICAS
EL PROGRAMA DE PRESENTACIONES IMPRESS (I)
Bollullos del Cdo. (Huelva) Centro TIC/DIG EL PROGRAMA DE PRESENTACIONES IMPRESS (I) Introducción Básicamente Impress es un programa de presentaciones proyectadas a través de diapositivas (pantallas completas)
MANUAL DE USO DE LA APLICACIÓN
MANUAL DE USO DE LA APLICACIÓN ÍNDICE 1. Acceso a la aplicación 2. Definición de funciones 3. Plantillas 4. Cómo crear una nueva encuesta 5. Cómo enviar una encuesta 6. Cómo copiar una encuesta 7. Cómo
PLANTILLAS DE DOCUMENTOS EN WORD 2007
1 PLANTILLAS DE DOCUMENTOS EN WORD 2007 Introducción Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo
Roberto Quejido Cañamero
Crear un documento de texto con todas las preguntas y respuestas del tema. Tiene que aparecer en él todos los contenidos del tema. 1. Explica qué son los modos de presentación en Writer, cuáles hay y cómo
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS
Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Versión 2.0 3/05/2010 Manual de Gestión de correo electrónico y SMS (v 2.0) 1 GESTOR DE CORREO ELECTRÓNICO
Instrucciones para la elaboración de comunicaciones aceptadas en FORMATO PÓSTER
Instrucciones para la elaboración de comunicaciones aceptadas en FORMATO PÓSTER XVI Encuentro Internacional de Investigación en Cuidados (Investén-isciii) 1. COMUNICACIONES ACEPTADAS EN FORMATO PÓSTER
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
CONCEPTOS BASICOS. Febrero 2003 Página - 1/10
CONCEPTOS BASICOS Febrero 2003 Página - 1/10 EL ESCRITORIO DE WINDOWS Se conoce como escritorio la zona habitual de trabajo con windows, cuando iniciamos windows entramos directamente dentro del escritorio,
A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato de sección.
DEPARTAMENTO DE LENGUAJES Y SISTEMAS INFORMÁTICOS ESCUELA SUPERIOR DE TECNOLOGÍA Y CIENCIAS EXPERIMENTALES A.D.E.M. Segundo Curso A25. Informática aplicada a la gestión Curso 2005/2006 Word Tema 3. Formato
UD6. Diseño de presentaciones
UD6. Diseño de presentaciones 1. PowerPoint 1.1 Crear una presentación 1.2 Efectos y transiciones 1 / 11 1. PowerPoint PowerPoint es una aplicación de Microsoft Office para crear presentaciones. Las presentaciones
ACCESO AL SERVIDOR EXCHANGE MEDIANTE OWA
ACCESO AL SERVIDOR EXCHANGE MEDIANTE OWA El Acceso al correo a través de OWA (Outlook Web Access) es una herramienta que permite a los usuarios consultar sus mensajes en una interfaz Web a través de un
2_trabajar con calc I
Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,
NOTAS TÉCNICAS SOBRE EL SIT: Comunicados (I)
NOTAS TÉCNICAS SOBRE EL SIT: Comunicados (I) Introducción...2 Introducción a los Códigos de Fusión... 2 Modelos de Cartas...2 Elaboración del Modelo... 2 Formato HTML (para envíos por correo electrónico)...
Microsoft Access proporciona dos métodos para crear una Base de datos.
Operaciones básicas con Base de datos Crear una Base de datos Microsoft Access proporciona dos métodos para crear una Base de datos. Se puede crear una base de datos en blanco y agregarle más tarde las
Guía para el tratamiento en Allegro de recibos para centros no pertenecientes a la Generalitat Valenciana.
Guía para el tratamiento en Allegro de recibos para centros no pertenecientes a la Generalitat Valenciana. Esta guía muestra como proceder en la configuración y posterior uso de la aplicación Allegro en
Internet como herramientas de comunicación: El correo electrónico
Internet como herramientas de comunicación: El correo electrónico 1. El correo electrónico Objetivo del tema: Aprender a manejar el correo electrónico y los medios de comunicación existentes en Internet.
F O R M U L A R I O S FORMULARIOS
F O R M U L A R I O S FORMULARIOS Los controles de formulario nos ayudan a hacer más ágil y sencillo el manejo de una hoja de cálculo. Estos controles nos permiten conseguir que el aspecto visual de la
Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes?
Preguntas frecuentes Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes? Atención! Esta opción es de configuración y solamente la prodrá realizar el administrador de la
MANUAL DE PRACTICUM12 PARA CENTROS EDUCATIVOS ÁMBITO MÁSTER
MANUAL DE PRACTICUM12 PARA CENTROS EDUCATIVOS ÁMBITO MÁSTER Centros educativos de la Comunidad de Madrid que deseen ser centros de prácticas de los alumnos del Máster en Profesorado de ESO y Bachillerato,
Presentaciones. Con el estudio de esta Unidad pretendemos alcanzar los siguientes objetivos:
UNIDAD 8 Presentaciones Reunión. (ITE. Banco de imágenes) as presentaciones son documentos formados por una sucesión de páginas, llamadas diapositivas, que transmiten información estructurada de manera
Formularios. Formularios Diapositiva 1
Formularios Crear un formulario utilizando el Asistente para formularios Modificación en vista Diseño Adición de Controles a un Formulario Adición de un Subformulario a un formulario Formularios Diapositiva
MACROS Y FORMULARIOS
MACROS Y FORMULARIOS Para poder realizar formularios en Excel es necesario ubicar el menú programador Qué hacer si no aparece el menú programador? En algunos equipos no aparece este menú, por lo que es
13.1. Tablas dinámicas de Excel
13.1. Tablas dinámicas de Excel Una tabla dinámica consiste en el resumen de un conjunto de datos, atendiendo a varios criterios de agrupación, representado como una tabla de doble entrada que nos facilita
MANUAL DE LA APLICACIÓN HELP DESK
CASAMOTOR MANUAL DE LA APLICACIÓN HELP DESK Desarrollado por: NOVIEMBRE, 2012 BOGOTÁ D.C. - COLOMBIA INTRODUCCIÓN Este documento es el manual de la aplicación de Help Desk de Casamotor, producto desarrollado
19 4.1.1.0 4 04/05/2009
Soluciones Informáticas Descripción: Como utilizar la Agenda de Visitas Objetivos: Al finalizar este tutorial el usuario será capaz de utilizar la Agenda de Visitas con sus diferentes opciones: asignar
TUTORIAL PRÁCTICO DE BASES DE DATOS EN ACCESS CREAR UNA AGENDA
TUTORIAL PRÁCTICO DE BASES DE DATOS EN ACCESS CREAR UNA AGENDA Antes de iniciar con nuestro tutorial, conozcamos algunos conceptos que vamos a utilizar en este tutorial: Que es una base de datos: Una base
Diseño de formularios
Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Diseño de formularios Introducción a las bases de datos Tema 5 El aspecto de los formularios Se puede modificar a voluntad el aspecto
CATÁLOGO CATÁLOGO CATÁLOGO CATÁLOGO CATÁLOGO
CATÁLOGO MANUAL DE USUARIO CATÁLOGO MANUAL DE USUARIO CATÁLOGO MANUAL DE USUARIO 1. CATÁLOGO MANUAL DE USUARIO CATÁLOGO AHORA CATÁLOGO MANUAL DE USUARIO 1 1. Introducción AHORA Catálogo es una aplicación
Manual CMS Mobincube
Manual CMS Mobincube CMS Mobincube Qué es? El CMS (Sistema de Gestión de Contenidos) es un completo website que permite la creación y actualización de contenido remoto. De esta forma, una vez creada una
COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER
2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por
MACROS. Automatizar tareas a través del uso de las macros.
OBJETIVOS MACROS Definiciones Automatizar tareas a través del uso de las macros. Grabar Ejecutar Manipular macros. Tipos de Macros en Excel Introducción Las operaciones tradicionales que se pueden realizar
Manual de uso básico de la aplicación
Manual de uso básico de la aplicación Autor del documento Centro de Apoyo Tecnológico a Emprendedores, Fundación Parque Científico y Tecnológico de Albacete Datos de contacto E-Mail: bilib@bilib.es Página
G R U P O S INDICE Cómo crear una cuenta en ARQA? Cómo tener un grupo en ARQA? Secciones y funcionalidades de los grupos Configuración del grupo
INDICE Cómo crear una cuenta en ARQA? 4 Cómo tener un grupo en ARQA? 5 Secciones y funcionalidades de los grupos 6 Muro del Grupo 6 Compartir Textos 8 Compartir Imágenes 9 Compartir videos 10 Compartir
!"!#!$%&'(!)$% )*+%*)!,$&%-*. +!/*(01*2
!"!#!$%&'(!)$% )*+%*)!,$&%-*. +!/*(01*2 45%!",&$)6##!7" Con el editor web LivePages de tu paquete Conecta tu Negocio podrás crear tu propia página web y publicarla en Internet sin necesidad de conocimientos
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Una plantilla es un documento de Word 2003 con la característica de que el tipo de documento es plantilla de documento (.dot).
Unidad 3. Plantillas Objetivos de la unidad: Una plantilla es un documento prediseñado que usted puede usar para crear nuevos documentos con el mismo formato. A través de una plantilla, el aspecto de un
CÓMO CREAR NUESTRO CATÁLOGO
CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,
GUÍA DE OUTLOOK. Febrero 2010
GUÍA DE OUTLOOK 2007 Febrero 2010 CONFIGURACIÓN: Lo primero que debe hacer antes de abrir Outlook es crear un perfil, al que configurara una cuenta de correo. Para ello vaya a su menú de inicio de Windows
LABORATORIO Nº 2 GUÍA PARA REALIZAR FORMULAS EN EXCEL
OBJETIVO Mejorar el nivel de comprensión y el manejo de las destrezas del estudiante para utilizar formulas en Microsoft Excel 2010. 1) DEFINICIÓN Una fórmula de Excel es un código especial que introducimos
PLANTILLAS EN MICROSOFT WORD
PLANTILLAS EN MICROSOFT WORD Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo de la fuente, el tamaño,
GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD
GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD Manual de usuario 1 - ÍNDICE 1 - ÍNDICE... 2 2 - INTRODUCCIÓN... 3 3 - SELECCIÓN CARPETA TRABAJO... 4 3.1 CÓMO CAMBIAR DE EMPRESA O DE CARPETA DE TRABAJO?...
Diseño de páginas web
Diseño de páginas web Formularios Ricardo Esteban Alonso Insertar Formularios (1) Permiten que el visitante envíe información al servidor web, que la procesa y la almacena o bien se nos envía a través
Cookies: qué son y para qué sirven
Cookies: qué son y para qué sirven Desde hace un tiempo las webs nos indican con mensajes que utilizan cookies propias de terceros. Muchos usuarios aceptan el mensaje sin más por el simple hecho de que
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
Ayuda básica relativa al interfaz web
Ayuda básica relativa al interfaz web El webmail es un cliente de correo que nos permite visualizar los mensajes de nuestras cuentas de email a través de una página web, pudiendo acceder desde cualquier
PUESTA EN MARCHA PROGRAMA GESTION DE OPTICAS. Junio - 2004
PUESTA EN MARCHA PROGRAMA GESTION DE OPTICAS Junio - 2004 pmqsoft Servicios Informáticos, S.L. www.pmqsoft.com soporte@pmqsoft.com Entendiendo que la instalación ha finalizado y que todo ha salido correctamente.
Oficina Online. Manual del administrador
Oficina Online Manual del administrador 2/31 ÍNDICE El administrador 3 Consola de Administración 3 Administración 6 Usuarios 6 Ordenar listado de usuarios 6 Cambio de clave del Administrador Principal
En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas.
1 de 18 Inicio Qué es un foro En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas. En el campus virtual, el foro es una herramienta
Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder
Ministerio de Educación Base de datos en la Enseñanza. Open Office Módulo 5: Report Builder Instituto de Tecnologías Educativas 2011 Informes con Oracle Report Builder En su configuración original, OpenOffice
MANUAL DE AYUDA MODULO TALLAS Y COLORES
MANUAL DE AYUDA MODULO TALLAS Y COLORES Fecha última revisión: Enero 2010 Índice TALLAS Y COLORES... 3 1. Introducción... 3 CONFIGURACIÓN PARÁMETROS TC (Tallas y Colores)... 3 2. Módulos Visibles... 3
GUIA DE USUARIO. CONFIGURACION CORREO ELECTRONICO
versiongalega.com - Departamento de Atención al cliente GUIA DE USUARIO. CONFIGURACION CORREO ELECTRONICO En este documento encontrará una descripción de cómo configurar sus cuentas de correo electrónico
Escribiendo el HTML. Un formulario se declara entre estos dos tags:
Formularios Un formulario HTML sirve como principal punto de interacción con el usuario: mediante ellas, podemos hacer posible la interacción de nuestra página Web para con el usuario que visita nuestro
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS
TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y
Conferencia con MSN Messenger
Conferencia con MSN Messenger La utilización de herramientas telemáticas que permitan la comunicación en directo, a diferencia de las usadas habitualmente en la tutoría Mentor, puede resultar un complemento
Informes. 3. Elija la opción Nuevo (en la parte superior de la ventana) 4. Elija Autoinformes: en tablas y luego la tabla o consulta que se usará.
Informes Se pueden imprimir fácilmente los registros en una tabla o el resultado de un filtro simplemente usando el botón de Impresora de la barra de herramientas, o la opción Archivo / Imprimir. Sin embargo,
Crear presentaciones con Impress de OpenOffice
Pintura de Acción. Expresionismo abstracto: Resinas acrílicas y píxeles en la Web 2.0. Aprender y compartir con blogs, podcasts, videos, en la Red como plataforma Crear presentaciones con Impress de OpenOffice
MANUAL DE USUARIO DE LA APLICACIÓN DE ACREDITACION DE ACTIVIDADES DE FORMACION CONTINUADA. Perfil Entidad Proveedora
MANUAL DE USUARIO DE LA APLICACIÓN DE ACREDITACION DE ACTIVIDADES DE FORMACION CONTINUADA Perfil Entidad Proveedora El objetivo del módulo de Gestión de Solicitudes vía Internet es facilitar el trabajo
Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.
Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.
Adaptación al NPGC. Introducción. NPGC.doc. Qué cambios hay en el NPGC? Telf.: 93.410.92.92 Fax.: 93.419.86.49 e-mail:atcliente@websie.
Adaptación al NPGC Introducción Nexus 620, ya recoge el Nuevo Plan General Contable, que entrará en vigor el 1 de Enero de 2008. Este documento mostrará que debemos hacer a partir de esa fecha, según nuestra
Bases de datos en Excel
Universidad Complutense de Madrid CURSOS DE FORMACIÓN EN INFORMÁTICA Bases de datos en Excel Hojas de cálculo Tema 5 Bases de datos en Excel Hasta ahora hemos usado Excel básicamente para realizar cálculos
HIPERVÍNCULOS. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen
HIPERVÍNCULOS Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una
Ajustes del Curso en egela (Moodle 2.5)
Ajustes del Curso en egela (Moodle 2.5) Manual para el profesorado Versión 2 (12/05/2015) El presente manual ha sido desarrollado por el Campus Virtual de la Universidad del País Vasco / Euskal Herriko
COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS.
2011 2012 COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. WWW.FAUBELL.COM vicente@faubell.com VÍNCULOS: Antes de proseguir hemos de repasar el concepto vínculo ya que vamos a utilizarlo mucho
Manual para la utilización de PrestaShop
Manual para la utilización de PrestaShop En este manual mostraremos de forma sencilla y práctica la utilización del Gestor de su Tienda Online mediante Prestashop 1.6, explicaremos todo lo necesario para
GUÍA RED SOCIAL FACEBOOK
GUÍA RED SOCIAL FACEBOOK Qué es una Red Social? Una Red Sociales un sitio en internet donde compartir información, mensajes, ideas, fotos, etc., con amigos, conocidos y desconocidos. Para acceder a una
TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE)
1. Introducción. TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE) El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella se puede organizar y controlar los contenidos (archivos
Uso de varias pantallas y pantalla Splash
Uso de varias pantallas y pantalla Splash Índice 1. USO DE VARIAS PANTALLAS... 3 2. CREACIÓN DE PANTALLA DE INICIO O DE SPLASH... 10 2 1. Uso de varias pantallas Vamos a explicar como se crean aplicaciones
Instalar protocolo, cliente o servicio nuevo. Seleccionar ubicación de red. Práctica - Compartir y conectar una carpeta
Configuración de una red con Windows Aunque existen múltiples sistemas operativos, el más utilizado en todo el mundo sigue siendo Windows de Microsoft. Por este motivo, vamos a aprender los pasos para
Sesión No. 4. Contextualización INFORMÁTICA 1. Nombre: Procesador de Texto
INFORMÁTICA INFORMÁTICA 1 Sesión No. 4 Nombre: Procesador de Texto Contextualización La semana anterior revisamos los comandos que ofrece Word para el formato del texto, la configuración de la página,
ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009)
JOOMLA! ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009) Es necesario comentar que este manual ha sido diseñado en su mayor parte por comunidadjoomla.org. Este manual es una
1 Itinerario. 2 Descripción y funcionalidades principales. Google Docs. 1.1 Qué vamos a hacer? 1.2 Qué pasos vamos a seguir?
Google Docs 1 Itinerario 1.1 Qué vamos a hacer? En este tutorial aprendemos a manejar la herramienta Google Docs, de esta forma nos introduciremos en el llamado cloud computing, que podemos traducir como,
UAM MANUAL DE EMPRESA. Universidad Autónoma de Madrid
MANUAL DE EMPRESA Modo de entrar en ÍCARO Para comenzar a subir una oferta de empleo, el acceso es a través del siguiente enlace: http://icaro.uam.es A continuación, aparecerá la página de inicio de la
PANEL DE CONTROL (Zona de Administración) MANUAL DE USO Por conexanet. Revisión 1.1 Fecha 2006-08
PANEL DE CONTROL (Zona de Administración) MANUAL DE USO Por conexanet Revisión 1.1 Fecha 2006-08 Índice 1. Acceder 2. Menú 3. Gestión Básica 3.1 Añadir 3.2 Editar 3.3 Eliminar 3.4 Eliminación de registros
UNIDAD DIDÁCTICA Nº 7 USO DE LOS RECURSOS EN MOODLE
PROGRAMA: TUTORÍA VIRTUAL EN AMBIENTES DE APRENDIZAJE UNIDAD DIDÁCTICA Nº 7 USO DE LOS RECURSOS EN MOODLE 1 USO DE LOS RECURSOS EN MOODLE 1. Tipos de Recursos 2. Editar Páginas de Texto o Web 3. Enlazar
MANUAL DE AYUDA. SAT Móvil (Movilidad del Servicio Técnico)
MANUAL DE AYUDA SAT Móvil (Movilidad del Servicio Técnico) Fecha última revisión: Abril 2015 INDICE DE CONTENIDOS INTRODUCCION SAT Móvil... 3 CONFIGURACIONES PREVIAS EN GOTELGEST.NET... 4 1. INSTALACIÓN
Formarnos / Instructivo para tutores
PROGRAMA DE FORMACIÓN DE DIRIGENTES EN GESTIÓN PÚBLICA Y SOCIAL Formarnos / Instructivo para tutores Universidad Nacional de Lanús / Vicerrectorado / Campus Virtual / 2015 Índice Ingreso a la plataforma
MS ACCESS BÁSICO 6 LOS INFORMES
2010 MS ACCESS BÁSICO 6 LOS INFORMES 93 LOS INFORMES Los informes son una herramienta de Access para elaborar información, sobre los datos que deseemos, preparada para ser impresa. A partir de una base
port@firmas V.2.3.1 Manual de Portafirmas V.2.3.1
Manual de Portafirmas V.2.3.1 1 1.- Introducción 2.- Acceso 3.- Interfaz 4.- Bandejas de peticiones 5.- Etiquetas 6.- Búsquedas 7.- Petición de firma 8.- Redactar petición 9.- Firma 10.- Devolución de
La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.
PLANTILLAS EN PHP El concepto de plantilla, es un criterio del desarrollo web que propone optimizar la cantidad de documentos HTML que se usan en el desarrollo de un sitio web. A lo largo de la navegación
Manual de configuración de Thunderbird ÍNDICE
Manual de configuración de Thunderbird ÍNDICE 1. ARRANCANDO THUNDERBIRD POR PRIMERA VEZ... 2 2. ARRANCANDO THUNDERBIRD POR N-ÉSIMA VEZ... 2 3. CONFIGURACIÓN DE CUENTA DE CORREO... 4 4. SERVICIO DE DIRECTORIO