Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5.

Tamaño: px
Comenzar la demostración a partir de la página:

Download "Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales."

Transcripción

1 1

2 Que es HTML5? HTML5, en conjunto con CSS3, define los nuevos estándares de desarrollo web, tanto para equipos de escritorio, como para dispositivos móviles y teléfonos celulares. Se abren las puertas para nuevas opciones de diseño y dinámica de información. HTML es el lenguaje de programación madre y básico de todos los sitios web. Se trata de un conjunto de etiquetas que sirven para dar formato a diferentes tipos de contenidos, sobre todo texto. El HTML solamente formatea y muestra contenidos, y no tiene la capacidad de interactuar con variables, bases de datos, etc. Aún los sitios web más complejos, que utilizan grandes sistema de bases de datos y realizan complejas tareas, envían al navegador (Internet Explorer, Chrome, etc.) puro código HTML. Google Chrome es pionero en soporte HTML5 y es, actualmente, el navegador que brinda mayor soporte a esta versión de HTML. Qué nos ofrece HTML? Si bien representará una gran cantidad de mejoras, respecto a su versión anterior, éstas son las más importantes: Simplificación: El nuevo código ofrece nuevas formas, más sencillas, de especificar algunos parámetros y piezas de código. Contenido multimedia: Reproducción de audio y video sin necesidad de plug-ins Animaciones: Posibilidad de mostrar contenidos de manera similar a Adobe Flash, pero prescindiendo de este componente. HTML5 tendrá soporte nativo para una tecnología similar a Flash. Almacenamiento de datos del lado del cliente: Una diferencia fundamental entre las aplicaciones de escritorio y web era la necesidad, de éstas últimas, de procesar la información y consultas en bases de datos siempre en un servidor, haciendo que las aplicaciones sean más lentas y siempre requeridas de una conexión a Internet constante. HTML5 permitirá almacenar y procesar información en el cliente, convirtiendo a una aplicación web a una aplicación mucho más parecida a una de escritorio. 2

3 Efectos y nueva versión de hojas de estilo CSS: La nueva versión de HTML acompañará a una nueva versión de las hojas de estilo CSS, el CSS3. Se trata de nuevas posibilidades de formato, como por ejemplo la implementación de sombras, bordes redondeados, etc. Muchas de las cosas que, hasta ahora, solo podrían lograrse insertándolas como imágenes, podrán realizarse con código. Esto no solo se traduce en una mejora de la velocidad y performance de un sitio, sino también en nuevas e ilimitadas opciones de diseño. Geo-locación: Los sitios web podrán saber la ubicación física de la persona que lo visita. Tipografías no estándar: Hasta ahora, quizás la mayor limitación que enfrentábamos los diseñadores era la imposibilidad de utilizar tipografías no-estándar en nuestros sitios web. Prácticamente todos estaban limitados a aquellas que fueron impuestas por los navegadores principales, como Arial, Times New Roman, Verdana, Tahoma, etc. La implementación de sistemas como Google Fonts hoy nos permite utilizar muchas más! 3

4 Como empezar un documento HTML5 Para empezar a usar HTML5 se debe anotar antes de la etiqueta <html>: <!DOCTYPE html> Esta instrucción indica al navegador que se usará toda la potencialidad del HTML5 4

5 Semántica Perteneciente o relativo a la significación de las palabras. Esa es la definición de la Real Academia de la Lengua Española y es así de sencillo es entender este tipo de etiquetas del lenguaje HTML: Aquellas que dan un significado a las partes del documento. Por decirlo de otra forma, estamos ante etiquetas que indican qué es el contenido que contienen, en lugar de cómo se debe formatear al mostrar el documento HTML en un cliente web. En el presente artículo vamos a explicar con mayor profundidad qué son las etiquetas semánticas y por qué deben ser utilizadas para mejorar la creación de un documento web. Veremos el conjunto de etiquetas semánticas que sirven para definir la estructura de un sitio y cómo nos pueden ayudar a que nuestra página sea indexada con mayor exactitud por los motores de búsqueda. Etiquetas semánticas estructurales Las etiquetas semánticas estructurales nos sirven para que los motores de búsqueda, o cualquier otro mecanismo automático que lea un sitio web, sepa con exactitud qué partes de su contenido corresponden a cada una de las partes típicas de un sitio. Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, elementos que definen la estructura representados por diversas etiquetas. Hace años atrás la diagramación se efectuaba mediante el uso de frames, iframes, luego tablas y capas. En aplicaciones web de ese tipo resulta dificultoso a los motores de búsqueda indexar su contenido, por ejemplo la grafica muestra una diagramación basada en capas: 5

6 El siguiente modelo esta diagramado mediante HTML5, las etiquetas son precisas al representar el contenido y eso ayuda a los motores de bisqueda. Se describe a continuación el uso de cada una de estas etiquetas semánticas: <section></section> Se utiliza para representar una sección general dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando jerarquías del contenido, algo muy favorable para el buen posicionamiento web. <article></article> El elemento de artículo representa un componente de una página que consiste en una composición autónoma en un documento, página, aplicación, o sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en los artículos de los foros, una revista o el artículo de periódico, una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o gadget, o cualquier otro artículo independiente de contenido. Cuando los elementos de <article> son anidados, los elementos de <article> interiores representan los artículos que en principio son relacionados con el contenido del artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de usuario, dichos comentarios se podrían representar con <article>. 6

7 <aside></aside> Representa una sección de la página que abarca un contenido tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede considerar un contenido independiente. Este elemento puede utilizarse para efectos tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la navegación, u otro contenido que se considere separado del contenido principal de la página. <header></header> Elemento <header> representa un grupo de artículos introductorios o de navegación. <nav></nav> El elemento <nav> representa una sección de una página que es un link a otras páginas o a partes dentro de la página: una sección con links de navegación. No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>, sólo las secciones que consisten en bloques principales de la navegación son apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente en el pie de página para tener un menú con un listado de enlaces a varias páginas de un sitio, como el Copyright; home page, política de uso y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin necesidad de tener un elemento <nav>. <footer></footer> El elemento <footer> representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año. 7

8 Ejemplo: <!DOCTYPE html> <header> <hgroup> <h1>el blog de mlw.io</h1> <h2>este es el blog de Mejorando la web</h2> </hgroup> </header> <nav> Aquí va el menú de navegación </nav> <section> <article>aquí va un post, con su titulo en h2</article> <article>aquí va un post, con su titulo en h2</article> <article>aquí va un post, con su titulo en h2</article> </section> <aside> Anotaciones y cosas extras </aside> <footer> Pie de pagina, copyright, etc. </footer> 8

9 Formularios El caso de la validación de un cuadro de texto que permita el ingreso de un numero que se encuentre en un rango de valores, en el HTML tradicional debía recurrirse a JavaScript para desarrollar la función que permita dicha validación. En HTML5 solo se necesita usar la etiqueta adecuada. Eso simplifica enormemente el desarrollo y validación de los formularios. <form> El elemento form es el que agrupa cada uno de los formularios. Actúa como contenedor y a la vez permite que se ejecuten las entradas de datos. Tiene algunos atributos que permiten que el usuario interactúe de formas distintas: accept-charset: Indica el MIME-type con el que se mandará la información del formulario. action: Indica la dirección URL a la que se enviará la información del formulario. autocomplete: Permite sólo on y off (por defecto on) y permite que el navegador rellene aquellos campos input de forma automática enctype: Indica la codificación de la información que se enviará. Tiene 3 posibles estados: application/x-www-form-urlencoded (por defecto si no se indica), multipart/form-data y text/plain. method: Indica el tipo de cabecera por el que se enviará la información. Permite 4 estados: GET (por defecto), POST, PUT y DELETE. name: Es el nombre del formulario. Si se indica no puede estar vacío, pero puede no ponerse (y el sistema lo creará automáticamente de forma interna). novalidate: Un atributo booleano que indica si la información se validará o no. target: Al igual que los enlaces, permite los valores: _blank, _self (por defecto), _parent o _top. <input> El principal elemento para la introducción de datos sigue siendo el input, y en esta ocasión llega con muchísimos atributos y con muchos tipos de entradas. El principal atributo del sistema de entrada de datos es el type. Hasta ahora los valores más habituales eran hidden o text que básicamente eran textos 9

10 alfanuméricos, pero ahora eso ha cambiado, y la lista de tipos es bastante grande: hidden: Es un contenido oculto que suele corresponder a una serie de caracteres alfanuméricos. Este valor no puede ser manipulado por el usuario. text: Campo de texto que no permite saltos de línea. Si se añade el atributo value será el contenido original del campo. search: Campo de texto que no permite saltos de línea y que indica que será usado como contenido de una búsqueda. Si se añade el atributo value será el contenido original del campo. tel: Campo de texto que indica un número de teléfono. No tiene ningún formato en particular, por lo que se pueden incluir espacios o guiones, por ejemplo. url: Campo de texto en el que se pueden incluir direcciones URL absolutas. Se puede hacer una especie de autosuggest junto a otros elementos (ver ejemplo más abajo). Campo de texto que permite incluir correo electrónico. Principalmente si se incluye el atributo value permite una única dirección, y si es el multiple puede incluir varias. password: Campo de texto, pero que aparece oculto para el usuario y así proteger la información. datetime: Permite una fecha y hora válida en un formato como T00:00Z, T12:00: :00 o T02:09+02:09. Si se indica un número, serán los milisegundos transcurridos desde el 01/01/1970. date: Permite indicar una fecha. El atributo value indica la fecha en cuestión y el min y max los límites del rango de fecha. El atributo step marca los milisegundos (por defecto 1 día) entre un valor y otro. El formato sería month: Permite indicar un mes. Tiene los mismos atributos que date. El formato sería week: Permite indicar la semana del año. Tiene los mismos atributos que date. El formato sería 2010-W03 (tercera semana). time: Permite indicar una hora. Tiene los mismos atributos que date. El formato sería 17:23 y opcionalmente los segundos, 17:23:59. datetime-local: Es igual que el datetime pero no permite indicar ningún tipo de desfase horario. 10

11 number: Representa un valor numérico. Este puede ser negativo (si empieza con un guión -), seguido de un número y con decimales (si se le indica un punto.) y para acabar, un exponente, empezando con una letra e, seguida de un símbolo positivo + o negativo y la cantidad exponencial. Un ejemplo completo sería: e+90. range: El tipo range permite un slide en donde el número (valor) no es lo 100% importante, sino que es el formato en el que se muestra. Un poco más abajo, un ejemplo. color: Este elemento representa un color. El formato es del estilo #A0F59E (o sea, el RGB). checkbox: Este elemento ya existía, y es el que permite elegir unas cuantas opciones de un grupo de ellas. radio: Al igual que el anterior, permite elegir de un grupo, pero sólo una de las opciones. file: Éste permite la opción de subir archivos. Con él se pueden seleccionar archivos que luego serán enviados al sistema. Si se le indica el atributo multiple se podrán seleccionar varios ficheros a la vez. Además, si se indica el atributo accept se puede limitar ficheros según su MIME-type, por ejemplo con audio/*, video/* o image/*. submit: Este es el botón que permite el envío de información al sistema. Puede ir acompañado de otros atributos que hacen que ese botón haga cosas que no son las generales del formulario. Los parámetros son: formaction (que hace ese botón), formenctype (la codificación), formmethod (la forma de envío), formnovalidate (la validación) y formtarget (en qué ventana se abre). image: Es igual que el submit pero permite ser una imagen en vez de un botón en sí. Para ello ha de ir acompañado del atributo src que indica la dirección URL de la imagen. reset: Otro botón que si pulsas deja los valores del formulario en su valor inicial. button: Un botón que no hace nada. Suele utilizarse habitualmente con funcione JavaScript que son los que realizan la acción. 11

12 Ejemplo: Autocompletar usando el type= url <!DOCTYPE html> <form> <input type="url" name="location" list="urls"> <datalist id="urls"> <option label="mime: Format of Internet Message Bodies" value=" <option label="html 4.01 Specification" value=" <option label="form Controls" value=" <option label="scalable Vector Graphics (SVG) 1.1 Specification" value=" <option label="feature Sets - SVG " value=" <option label="the Single UNIX Specification, Version 3" value=" </datalist> </form> Se vería algo asi: 12

13 Ejemplo de range <!DOCTYPE html> <form> <input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+60"> </datalist> </form> 13

14 Parámetros adicionales: autocomplete: Permite el estado on y off y hace que el campo se rellene o no automáticamente si el sistema es capaz de identificar la información. list: Es el valor de una lista identificada por el datalist. Con esto se pueden crear sistema de autosugerencias. readonly: Es un valor booleano, y permite o no que el usuario pueda modificar el contenido. size: Es el número de caracteres que se muestran por pantalla. required: Otro atributo booleano que indica que ese elemento ha de incluirse obligatoriamente. multiple: Permite que algunos elementos seleccionen más de un valor. Un ejemplo más adelante. maxlength: Es la cantidad máxima de caracteres que se permite. pattern: Indica el formato de contenido que tiene que tener Por ejemplo: [0-9][A-Z]{3} sería un número seguido de 3 letras en mayúsculas. min y max: Indican los valores mínimo y máximo que se permiten. step: Indica el valor de paso cuando hay elementos que permiten saltar. placeholder: Es un ejemplo del valor que se puede incluir. 14

15 Ejemplo de selección múltiple de cuentas de correo: <!DOCTYPE html> <form> <label>cc: <input type= multiple name=cc list=contacts></label> <datalist id="contacts"> <option <option <option <option </datalist> </form> Seleccione una cuenta de correo, escriba coma y le permitirá la selección de otra cuenta de correo 15

16 Otros elementos de formulario fieldset Este elemento se utiliza para agrupar varios elementos de un formulario si un formulario tiene varios bloques o contenidos distintos, se deberían agrupar con este elemento. Si se le indica el atributo disabled entonces los elementos contenidos en él también lo están. También se le puede indicar el atributo form que hace referencia al formulario padre, y el atributo name, para acceder externamente con un nombre único. legend Si se le quiere poner una cabecera descriptiva a cada uno de los fieldset, el legend es el elemento que debemos utilizar. Con este texto podremos poner una cabecera a cada uno de los bloques que pueden formar un formulario compuesto de muchos contenidos. label Los label son los textos que acompañan a un elemento, como puede ser un input y que vienen a decir qué es de lo que se habla (que no una ayuda sobe el campo en sí). Este elemento puede tener el atributo for que se usaría para hacer referencia al name del elemento. <label><input type="checkbox" name="lost"> Lost</label< button Es simplemente un botón, y es que los button son los elementos que permiten acabar de interactuar con el formulario. Botones hay de 3 tipos que se indican con el atributo type: submit: permite que la información del formulario se envíe. reset: deja el formulario en su estado inicial. button: simplemente, no hace nada. El atributo form indica el nombre del formulario al que hace referencia, y el name es el nombre que le asignamos al propio botón. Además de estos, 16

17 también está disponible el atributo disabled que básicamente hace que el botón no pueda ejecutarse, y de esta forma queda limitado a una serie de verificaciones previas. Con el atributo autofocus el sistema automáticamente mandará el foco al botón. select Los select hacen referencia a un listado de opciones. Esta selección por defecto es simple (sólo un elemento) aunque si se le añade el atributo booleano multiple podremos seleccionar más de una opción. De la selección se elegirá uno o más option que son los elementos que se usan para indicar cada una de las opciones. El atributo size permite definir la cantidad de opciones visibles por defecto, que puede ser una o más. En el caso de que haya el atributo multiple activo, por defecto habrá 4. <select name="allowedunits" multiple size="3"> <option value="1" selected>miner</option> <option value="2" selected>puffer</option> <option value="3">snipey</option> <option value="4">max</option> <option value="5" selected>firebot</option> </select> optgroup Como ya el nombre deja ver, optgroup representa una agrupación de elementos option que tienen una agrupación común. Aunque en sí no tiene mucho significado, básicamente es eso, una agrupación de elementos de una misma temática, tipo o como se le quiera llamar, pero poco más. Puede llevar varios atributos, como el disabled si queremos desactivar todas las opciones contenidas, o el label, que será el nombre que tenga ese grupo de cara a los usuarios. option El elemento option puede formar parte de un select, de un optgroup o de un datalist y básicamente es una de las opciones a elegir de entre unas cuantas. 17

18 Al igual que muchos otros elementos, puede estar disabled y por tanto no ser utilizada en la selección. Por norma general suele ir acompañado de un valor value que será lo que realmente se mande como información a la hora de enviar o trabajar con el formulario. Como información añadida podemos usar el label, que podría tratarse como el título o mini-descripción de esa opción. Por supuesto, otro de los atributos importantes es el selected que se usa en aquellos momentos en que queremos tener elementos seleccionados por defecto. datalist El elemento datalist está pensado para ser un sistema de sugerencias. Básicamente es un contenedor en el que se incluyen distintas opciones que corresponderían a un campo. De esta forma, si alguien empeiza a escribir en un input y coindice de alguna manera con alguno de los contenidos, le aparecerá como una sugerencia. <input type="text" name="favcharacter" list="characters"> <datalist id="characters"> <option value="homer Simpson"> <option value="bart"> <option value="fred Flinstone"> </datalist> textarea Un textarea es un elemento de entrada de datos libre y multilínea. Este elemento tiene bastantes atributos que le permiten hacer algunas cosas. Para empezar podemos aplicarle el elemento readonly que básicamente impide que los usuarios puedan cambiar el contenido del elemento. Para indicar el tamaño del elemento podremos usar los atributos cols y rows que indican la cantidad de caracteres por columna y filas que se permiten; por defecto hay 20 caracteres por columna y 2 filas. Además, para que no se corten, o sí, las palabras que se puedan incluir en este elemento, podemos usar el wrap indicando el valor soft (por defecto) o hard con el qe controlamos saltos de línea y similares. En el caso de indicar un valor de maxlength le estamos diciendo al textarea que hay un límite máximo de caracteres, y que a partir del límite no ha de dejar continuar. SI queremos que el usuario tenga que rellenar obligatoriamente el campo, hay que indicarle el valor booleano required; también es posible deshabilitarlo con un disabled. 18

19 Un detalle interesante, es que, al igual que el input, este elemento también permite el atributo placeholder, que es una pequeña ayuda (de unas pocas palabras) que explique qué ha de contener el elemento. keygen Sin duda uno de los elementos más enigmáticos del HTML 5 es el elemento keygen. Este elemento básicamente lo que hace es generar una clave privada y una pública para que el navegador y el servidor puedan comunicarse. La clave la genera automáticamente el navegador, y supongo que mediante AJAX o algún otro sistema se podrá mantener una conversación entre el navegador y servidor. Permite algunos atributos como challenge o el keytype que es el tipo de codificación de la clave, que por ahora sólo acepta un valor que es rsa. output Otro de los nuevos elementos es el output y es que si hay input, por que no output? Y básicamente es eso los inputs son los cajas para escribir cosas, y en alguna ocasión, los propios inputs han servidor como cajas de cálculo o similar pues esto es un cajetín que se usa como resultado de algo. <form onsubmit="return false"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output onforminput="value = a.valueasnumber + b.valueasnumber"> </output> </form> meter Básicamente es un sistema que permite crear escalas de cosas, independientemente de lo que sea. Un ejemplo podría ser el tamaño ocupado o libre de un disco duro. Este elemento tiene los siguientes atributos: value: Es el valor actual de todos los posibles. min: El valor mínimo posible para el rango. Por defecto es 0.0 max: El valor máximo posible para el rango. Por defecto es 1.0 low: Es el valor por el que, por debajo, sería un problema. 19

20 Por defecto es el mismo que min. high: Es el valor por el que, por encima, sería un problema. Por defecto es el mismo que max. optimum: Es el valor óptimo para la medidicón. Por defecto es la media entre min y max, o 0.5 Un ejemplo: <!DOCTYPE html> <form> Capacidad disponible: <meter value=6 max=8>6 bloques usados de un total de 8)</meter><br> Venta de entradas: <meter min="0" max="100" value="75"></meter> <dl> <dt>radio: <dd><meter min=0 max=20 value=12>12cm</meter> <dt>altura: <dd><meter min=0 max=10 value=2>2cm</meter> </dl> </form> 20

21 Ejemplos de formulario con diversos elementos de formulario: <!DOCTYPE html> <form> Ingrese su Nombre (obligatorio): <input type="text" name="name" autofocus required /><br /> Correo Electrónico (obligatorio): <input type=" " name=" " required /><br /> URL: <input type="url" name="url" placeholder="url de tu página web" /><br /> Seleccione una Fecha del Calendario: <input type="date" name="date" /><br /> Tiempo: <input type="time" name="time" /><br /> Fecha y hora de nacimiento: <input type="datetime" name="datetime" /><br /> Mes: <input type="month" name="month" /><br /> Semana: <input type="week" name="week" /><br /> Número (min -10, max 10): <input type="number" name="number" min="-10" max="10" value="0" /> <br /> Intervalo (min 0, max 10): <input type="range" name="range" min="0" max="10" value="0" /> <output for="range" name="range_value" >0</output><br /> Teléfono: <input type="tel" name="tel" /><br /> Término de búsqueda: <input type="search" name="search" /><br /> Color Favorito: <input type="color" name="color" /> <input type="submit"> </form> 21

22 22

23 Nuevas etiquetas Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente, las nuevas etiquetas son: <video> Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes de video, lo que hace necesario recodificar un video en múltiples codecs. <audio> Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3. <canvas> Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript. <svg> Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML 23

24 Ejemplos: Multimedia, ejecución de Audio y Video <!DOCTYPE html> <html> <head> <title>multimedia</title> <meta charset="utf8"> </head> <body> <audio src="musica.mp3" type="audio/mp3; codecs=mp3" controls></audio> <video src="video.ogv" type="video/ogv" poster="" controls ></video> </body> </html> 24

25 Ejercicio para desarrollar Desarrolle un formulario que permita el ingreso de los siguientes datos: Apellido paterno Obligatorio Por defecto el cursor debe estar ubicado aquí Nombre Obligatorio Direccion Obligatorio Obligatorio Formato de Telefono Opcional Formato de teléfono Articulo Obligatorio Autocompletar, puede ser: Polo manga corta Polo manga larga Poleron Camisa Pantalon Color Obligatorio Se debe seleccionar de la paleta de colores Cantidad Obligatorio Puede ser 3, 6 o 12 Fecha de Obligatorio Debe mostrar un calendario entrega Adicional Opcional Texto libre 25

HTML 5 : Formularios

HTML 5 : Formularios HTML 5 : Formularios El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para introducir

Más detalles

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas

HTML5: Nuevas etiquetas semánticas. Juan Eladio Sánchez Rosas HTML5: Nuevas etiquetas semánticas Juan Eladio Sánchez Rosas Objetivo Semantics Objetivo de la sesión Presentar y describir las nuevas etiquetas del estándar HTML5 Citar los antecedentes que derivaron

Más detalles

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:

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

Más detalles

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 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

Más detalles

PASOS PARA CREAR UNA PÁGINA WEB

PASOS PARA CREAR UNA PÁGINA WEB http://www.rafatux.com PASOS PARA CREAR UNA PÁGINA WEB Con éste documento trato de orientar de una forma genérica los distintos pasos que deben de realizarse para crear una página web. PRIMER PASO: Estructura

Más detalles

Capítulo 1 Documentos HTML5

Capítulo 1 Documentos HTML5 Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs

Más detalles

Programa diseñado y creado por 2014 - Art-Tronic Promotora Audiovisual, S.L.

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.

Más detalles

Escribiendo el HTML. Un formulario se declara entre estos dos tags:

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

Más detalles

UF1304 Elaboración de plantillas y formularios

UF1304 Elaboración de plantillas y formularios UF1304 Elaboración de plantillas y formularios Tema 1. Formularios en la construcción de páginas web Tema 2. Plantillas en la construcción de páginas web OBJETIVOS: - Confeccionar plantillas para las páginas

Más detalles

DISEÑO WEB ADOBE DREAMWEAVER CS3

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

Más detalles

Plantilla de texto plano

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

Más detalles

Manual de uso de la plataforma para monitores. CENTRO DE APOYO TECNOLÓGICO A EMPRENDEDORES -bilib

Manual de uso de la plataforma para monitores. CENTRO DE APOYO TECNOLÓGICO A EMPRENDEDORES -bilib Manual de uso de la plataforma para monitores CENTRO DE APOYO TECNOLÓGICO A EMPRENDEDORES -bilib [Manual de uso de la plataforma para monitores] 1. Licencia Autor del documento: Centro de Apoyo Tecnológico

Más detalles

Manual de HTML5 en español. Manual de HTML5 en español. Alejandro Castillo Cantón. Alejandro Castillo www.theproc.es

Manual de HTML5 en español. Manual de HTML5 en español. Alejandro Castillo Cantón. Alejandro Castillo www.theproc.es Manual de HTML5 en español Alejandro Castillo Cantón www.theproc.es Primera Parte El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje de programación básico de la World Wide

Más detalles

Introducción a los sitios de SharePoint en Office 365

Introducción a los sitios de SharePoint en Office 365 Introducción a los sitios de SharePoint en Office 365 Universidad Central del Este Contenido 1. QUÉ ES UN SITIO SHAREPOINT?... 3 2. CÓMO INGRESAR AL ÁREA DE SITIOS?... 3 3. DESCRIPCIÓN GENERAL DEL ÁREA

Más detalles

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007

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

Más detalles

Introducción a LinoIt Breve guía sobre algunas de sus funcionalidades destacables.

Introducción a LinoIt Breve guía sobre algunas de sus funcionalidades destacables. Breve guía sobre algunas de sus funcionalidades destacables. 24/03/2011 Centro de Servicios de Informática y Redes de Comunicaciones Nodo Cartuja Contenido 1.Introducción... 2 2. Acceso... 2 2.1. Con Registro...

Más detalles

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75

Manual de Formulario. www.sagasoluciones.com info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 Manual de Formulario info@sagasoluciones.com C/ Salado, 11. Local 10. 41011 Sevilla +34 954 45 72 75 MANUAL DE FORMULARIO CONTROL DEL DOCUMENTOS Realizado (21/01/2010) Inmaculada Peña Ruiz Técnico Revisado

Más detalles

GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD

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?...

Más detalles

2- Formularios y JavaScript Course: Developing web- based applica=ons

2- Formularios y JavaScript Course: Developing web- based applica=ons 2- Formularios y JavaScript Course: Developing web- based applica=ons Cris*na Puente, Rafael Palacios 2010- 1 Creación de formularios Formularios Un formulario HTML es una sección de un documento que contiene

Más detalles

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

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

Más detalles

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 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

Más detalles

2_trabajar con calc I

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,

Más detalles

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII

GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUÍA Nro. 1 TECNOLOGÍA DE INTERNET. TIII PIII GUIA DISPONIBLE EN: http://preparadorivan.blogspot.com/ - http://preparadormssi.50webs.com/inicio.html La World Wide Web o la Web, es una de las múltiples

Más detalles

Manual de usuario de Windows Live Writer

Manual de usuario de Windows Live Writer Manual de usuario de Windows Live Writer Índice 0.- Introducción. 3 1.- Descarga e Instalación. 4 2.- Conexión a un blog. 7 3.- Interfaz de Windows Live Writer. 12 4.- Creación de un Post. 13 5.- Creación

Más detalles

TEMA 9 CREACIÓN DE PÁGINAS WEB

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

Más detalles

MANUAL DE LA APLICACIÓN HELP DESK

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

Más detalles

CapÍtulo 3: Manejo de Forms.

CapÍtulo 3: Manejo de Forms. CapÍtulo 3: Manejo de Forms. El mecanismo básico de interacción entre el usuario y un web-site esta dado por el uso de formularios html, el server envía un formulario que el browser muestra en pantalla

Más detalles

EXTENSIÓN DE UML PARA APLICACIONES WEB

EXTENSIÓN DE UML PARA APLICACIONES WEB EXTENSIÓN DE UML PARA APLICACIONES WEB 1. Descripción Esta extensión de UML define un conjunto de estereotipos, valores etiquetados y restricciones que nos permiten modelar aplicaciones web. Los estereotipos

Más detalles

01 Índice. GESTOR DE CONTENIDOS Manual de uso 01 ÍNDICE... 1 02 OBJETO DEL DOCUMENTO... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA... 3

01 Índice. GESTOR DE CONTENIDOS Manual de uso 01 ÍNDICE... 1 02 OBJETO DEL DOCUMENTO... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA... 3 01 Índice 01 ÍNDICE..... 1 02 OBJETO DEL DOCUMENTO..... 2 03 ESTRUCTURA GRÁFICA DEL SISTEMA..... 3 04 GESTIÓN DE TABLAS..... 5 05 USO DE TABLAS EN ENVIDUR..... 15 06 GESTIÓN DE FUNCIONALIDAD ADICIONAL.

Más detalles

TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER

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

Más detalles

BASES DE DATOS - Microsoft ACCESS 2007-

BASES DE DATOS - Microsoft ACCESS 2007- BASES DE DATOS - Microsoft ACCESS 2007- Una base de datos es un archivo estructurado de datos que nos permite almacenarlos, modificarlos, ordenarlos, generar informes etc., de manera rápida. Un listín

Más detalles

Laboratorio 6. Creación de sitios Web - Dreamweaver

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

Más detalles

ÍTEMS DEL MENÚ CREACIÓN Y GESTIÓN (Última revisión: lunes, 9 de marzo de 2009)

Í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

Más detalles

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:

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

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar

Más detalles

Diseño de páginas web 2011

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

Más detalles

UAM MANUAL DE EMPRESA. Universidad Autónoma de Madrid

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

Más detalles

Crear la base de datos antes de la instalación de Wordpress.

Crear la base de datos antes de la instalación de Wordpress. Introducción En este tutorial básico sobre instalar Wordpress en tu propio hosting mediante un panel de control cpanel y aprenderás como personalizar las bases de datos MySQL que utiliza Wordpress. Para

Más detalles

NORMA 34.14(SEPA) 05/11/2013

NORMA 34.14(SEPA) 05/11/2013 NORMA 34.14(SEPA) 05/11/2013 1. Descripción La aplicación de generación de ficheros de transferencias permite generar fácilmente órdenes para que se efectúe el pago de transferencias a los beneficiarios

Más detalles

Manual hosting acens

Manual hosting acens Manual hosting acens Contenido Acceso al panel de control de cliente... 3 Asociar un dominio a mi Hosting... 5 Acceso al panel de administración del hosting... 7 INICIO - Visión general del estado de nuestro

Más detalles

Cómo creo las bandejas del Registro de Entrada /Salida y de Gestión de Expedientes?

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

Más detalles

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen CURSO DE HTML5 1. Historia de HTML Potencial de HTML5 Principales novedades de HTML5 Elementos necesarios para trabajar con HTML5 Editor Navegador 2. Nuevas etiquetas de HTML5 y etiquetas que desaparecen

Más detalles

Plataforma E-Learning E- Incorporate

Plataforma E-Learning E- Incorporate Plataforma E-Learning E- Incorporate Proceso de Registro de Participante Los participantes en la plataforma deben registrarse desde el portal Escuela.E-Incorporate.org, cumplimentando el formulario de

Más detalles

Ejemplos básicos de webmathematica para profesores

Ejemplos básicos de webmathematica para profesores Ejemplos básicos de webmathematica para profesores Cualquier cálculo hecho dentro Mathematica puede ser realizado usando webmathematica con dos limitaciones significativas. Primero, al usar webmathematica,

Más detalles

Person IP CRM Manual MOBILE

Person IP CRM Manual MOBILE Manual MOBILE División Informática BuscPerson Telecomunicaciones : Manual MOBILE 0.- Introducción 3 0.1 Configuración de los terminales 3 0.2 Acceso de Usuarios 3 1.- Funcionalidades CRM 5 1.1 Agenda del

Más detalles

Plantilla de texto plano

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

Más detalles

Novedades PhotoGestion 5

Novedades PhotoGestion 5 Novedades PhotoGestion 5 En este documento repasamos las novedades más importantes de la versión 5 del programa PhotoGestion. Explicaremos cada novedad, como funciona y como se configura. Contenido Envío

Más detalles

Herramientas CONTENIDOS. MiAulario

Herramientas CONTENIDOS. MiAulario Herramientas CONTENIDOS MiAulario CONTENIDOS Qué es Contenidos Ver un ejemplo Añadir la herramienta al sitio Añadir contenido en la página Páginas principales / subpáginas Criterios de visibilidad Configuración

Más detalles

UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS

UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos

Más detalles

Partes del formulario

Partes del formulario Partes del formulario Etiqueta La etiqueta presenta los siguientes atributos: Comando ACTION METHOD ENCTYPE Descripción El valor de este parámetro es la URL del programa o script en el Servidor

Más detalles

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web

Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Adobe Dreamweaver CS3 - Curso online Creación profesional de sitios web Índice Conceptos básicos En este capítulo se enseñan los conceptos básicos de trabajo en Adobe Dreamveaver CS3. También se describen

Más detalles

CÓMO CREAR UNA PÁGINA WEB

CÓMO CREAR UNA PÁGINA WEB CÓMO CREAR UNA PÁGINA WEB v.2 Índice 1 Introducción 3 2. Diseño gráfico 3 3. El Lenguaje HTML 3 4. Alojamiento y publicación 5 5. Promoción 8 6. Otras utilidades 9 6.1 Estadísticas 9 6.2 Contadores y Formularios

Más detalles

Centro de Capacitación en Informática

Centro de Capacitación en Informática Fórmulas y Funciones Las fórmulas constituyen el núcleo de cualquier hoja de cálculo, y por tanto de Excel. Mediante fórmulas, se llevan a cabo todos los cálculos que se necesitan en una hoja de cálculo.

Más detalles

H O T E L W I N Configuración del motor de Reservas on line

H O T E L W I N Configuración del motor de Reservas on line H O T E L W I N Configuración del motor de Reservas on line Introducción Dado el enorme desarrollo de Internet en los últimos años y al sin fin de oportunidades que Internet brinda tanto a clientes como

Más detalles

Manual del Alumno de la plataforma de e-learning.

Manual del Alumno de la plataforma de e-learning. 2 Manual del Alumno de la Plataforma de E-learning 3 4 ÍNDICE 1. Página de Inicio...7 2. Opciones generales...8 2.1. Qué es el Campus...8 2.2. Nuestros Cursos...9 2.3. Cómo matricularme...9 2.4. Contactar...9

Más detalles

Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:

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,...

Más detalles

MICROSOFT FRONTPAGE Contenido

MICROSOFT FRONTPAGE Contenido MICROSOFT FRONTPAGE Contenido CREAR UN SITIO WEB... 2 MARCOS... 5 FONDO DE LA PÁGINA... 7 MARQUESINAS... 8 CREAR HIPERVÍNCULOS... 9 BOTONES ACTIVABLES... 11 LOS MAPAS DE IMÁGENES... 13 INSERTAR SONIDOS...

Más detalles

En términos generales, un foro es un espacio de debate donde pueden expresarse ideas o comentarios sobre uno o varios temas.

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

Más detalles

MANUAL DE AYUDA MODULO TALLAS Y COLORES

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

Más detalles

Guía del usuario. Guía del usuario - Wordpress

Guía del usuario. Guía del usuario - Wordpress Guía del usuario Guía del usuario - Wordpress 1. Qué es Wordpress? Pag.3 1. 1 Cómo acceder al Escritorio Wordpress? Pag.4 1. 2 Elementos destacables del Panel de Control Pag.5 1. 3 Secciones del Escritorio

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

Más detalles

2.5. Manipular objetos y formularios en una página Web.

2.5. Manipular objetos y formularios en una página Web. 2.5. Manipular objetos y formularios en una página Web. Un formulario es una página web en la cual el usuario puede introducir información que posteriormente recibiremos para que sea procesada, por alguna

Más detalles

GUÍA PARA LA INSTALACIÓN Y USO DE WORDPRESS BY MASTERHACKS. www.masterhacks.net. Guía de instalación y uso de Wordpress Página 1

GUÍA PARA LA INSTALACIÓN Y USO DE WORDPRESS BY MASTERHACKS. www.masterhacks.net. Guía de instalación y uso de Wordpress Página 1 GUÍA PARA LA INSTALACIÓN Y USO DE WORDPRESS BY MASTERHACKS www.masterhacks.net Guía de instalación y uso de Wordpress Página 1 Wordpress es un sistema muy utilizado para la creación de blogs. Este se puede

Más detalles

Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:

Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda: Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor

Más detalles

Introducción a Google Calendar Breve guía sobre algunas de sus funcionalidades destacables.

Introducción a Google Calendar Breve guía sobre algunas de sus funcionalidades destacables. Introducción a Google Calendar Breve guía sobre algunas de sus funcionalidades destacables. 28/03/2011 Centro de Servicios de Informática y Redes de Comunicaciones Nodo Cartuja Contenido 1. Introducción...

Más detalles

Instalar y configurar W3 Total Cache

Instalar y configurar W3 Total Cache Instalar y configurar W3 Total Cache en WordPress Cardenal Gardoki, 1 48008 BILBAO (Vizcaya) Teléfono: 902 012 199 www.hostalia.com La velocidad de carga de una web influye mucho a la hora de mejorar el

Más detalles

COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER

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

Más detalles

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora Plataforma e-ducativa Aragonesa Manual de Administración Bitácora ÍNDICE Acceso a la administración de la Bitácora...3 Interfaz Gráfica...3 Publicaciones...4 Cómo Agregar una Publicación...4 Cómo Modificar

Más detalles

MANUAL DE USO DE LA APLICACIÓN

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

Más detalles

AGREGAR COMPONENTES ADICIONALES DE WINDOWS

AGREGAR COMPONENTES ADICIONALES DE WINDOWS INSTALACIÓN DE IIS EN WINDOWS XP El sistema está desarrollado para ejecutarse bajo la plataforma IIS de Windows XP. Por esta razón, incluimos la instalación de IIS (Servidor de Web) para la correcta ejecución

Más detalles

Internet Information Server

Internet Information Server Internet Information Server Internet Information Server (IIS) es el servidor de páginas web avanzado de la plataforma Windows. Se distribuye gratuitamente junto con las versiones de Windows basadas en

Más detalles

Diseño de páginas web

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

Más detalles

Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00

Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00 Manual de Usuario Sitio Dinámico e-ducativa Versión 7.01.00 ÍNDICE DE CONTENIDOS INTRODUCCIÓN...3 ÁREAS DEL SITIO WEB...4 1. ENCABEZADO...5 2. SECCIONES Y PÁGINAS DEFINIDAS...5 3. CONTENIDO...5 4. NOVEDADES

Más detalles

TUTORIAL DE PUBLICACIÓN PARA REDACTORES

TUTORIAL DE PUBLICACIÓN PARA REDACTORES TUTORIAL DE PUBLICACIÓN PARA REDACTORES Fitfusion, pretende ser un punto de encuentro entre profesionales y adictos al fitness, donde compartimos conocimiento sobre nuestra pasión, el ejercicio físico

Más detalles

Instituto Nacional de Formación Docente. Tutorial 5 Líneas de Tiempo con Timerime

Instituto Nacional de Formación Docente. Tutorial 5 Líneas de Tiempo con Timerime Tutorial 5 Líneas de Tiempo con Timerime 1 Introducción a Timerime Timerime (www.timerime.com) es una aplicación que funciona en la web (como otras tantas que forman parte de la llamada Web 2.0). La misma

Más detalles

GESTIÓN DE VISADO TELEMÁTICO Manual de usuario Web (rev 1.1)

GESTIÓN DE VISADO TELEMÁTICO Manual de usuario Web (rev 1.1) 02/04/2009 GESTIÓN DE VISADO TELEMÁTICO Manual de usuario Web (rev 1.1) Introducción El sistema de visado telemático pone al servicio de los colegiados una herramienta sencilla para enviar proyectos que

Más detalles

1 Itinerario. 2 Descripción y funcionalidades principales. Google Docs. 1.1 Qué vamos a hacer? 1.2 Qué pasos vamos a seguir?

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,

Más detalles

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN CICLO: 02/2015 GUIA DE LABORATORIO #11 Nombre de la Práctica: Administración de cursos haciendo uso de Moodle Lugar de Ejecución:

Más detalles

port@firmas V.2.3.1 Manual de Portafirmas V.2.3.1

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

Más detalles

Introducción a Moodle

Introducción a Moodle Instituto la Américas de Nayarit Ing. Elías Portugal Luna Qué es Moodle? Moodle es una aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda

Más detalles

MANUAL DE AYUDA. SAT Móvil (Movilidad del Servicio Técnico)

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

Más detalles

MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS

MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS MANUAL PARA GESTIÓN DE INCIDENCIAS INFORMÁTICAS En este manual aprenderemos a introducir un Ticket de Soporte (Incidencia Informática) y ver todo el proceso hasta que se resuelve. Para poder escribir Tickets

Más detalles

Manual de uso. Manual de uso - citanet 1

Manual de uso. Manual de uso - citanet 1 Manual de uso Manual de uso - citanet 1 1. Requisitos previos a la instalación... 3 2. Primer inicio de la aplicación.... 3 2.1. Pantalla de inicio de sesión.... 3 2.2. Datos de la empresa y configuración

Más detalles

TPV Táctil. Configuración y Uso. Rev. 1.2 21/01/09

TPV Táctil. Configuración y Uso. Rev. 1.2 21/01/09 Configuración y Uso Rev. 1.2 21/01/09 Rev. 2.0 20100616 1.- Ruta de Acceso a Imágenes. 2.- Estructuración de los Artículos. 3.- Creación de Grupos de Familias. 4.- Creación de Familias de Ventas. 5.- Creación

Más detalles

CREACIÓN Y CONFIGURACIÓN DE WIKIS

CREACIÓN Y CONFIGURACIÓN DE WIKIS Paso 1: Creación CREACIÓN Y CONFIGURACIÓN DE WIKIS Como con el resto de actividades, para crear un wiki lo primero es activar el modo de edición y seleccionar la opción Wiki de la lista desplegable Agregar

Más detalles

Manual de NVU Capítulo 4: Los enlaces

Manual de NVU Capítulo 4: Los enlaces Manual de NVU Capítulo 4: Los enlaces Pág. 1 Manual de NVU Capítulo 4: Los enlaces Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de Málaga) julioruiz@uma.es

Más detalles

La plantilla propone aprovechar esta estructura en común y sólo modificar el contenido del área del documento que sea diferente.

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

Más detalles

Bases de datos en Excel

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

Más detalles

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">

<SearchPlugin xmlns=http://www.mozilla.org/2006/browser/search/> Cómo crear un buscador para la barra de Firefox? Supongamos que queremos añadir un buscador distinto a los que ofrece Firefox para la barra de búsqueda. Todos esos buscadores están en una carpeta del directorio

Más detalles

MANUAL DE AYUDA TAREA PROGRAMADA COPIAS DE SEGURIDAD

MANUAL DE AYUDA TAREA PROGRAMADA COPIAS DE SEGURIDAD MANUAL DE AYUDA TAREA PROGRAMADA COPIAS DE SEGURIDAD Fecha última revisión: Diciembre 2010 Tareas Programadas TAREAS PROGRAMADAS... 3 LAS TAREAS PROGRAMADAS EN GOTELGEST.NET... 4 A) DAR DE ALTA UN USUARIO...

Más detalles

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 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:

Más detalles

TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín

TEMA 4: EMPEZANDO A NAVEGAR ESCUELA UNIVERSITARIA DE INFORMÁTICA. Raúl Martín Martín TEMA 4: EMPEZANDO A ESCUELA UNIVERSITARIA DE INFORMÁTICA NAVEGAR Raúl Martín Martín SERVICIOS DE INTERNET SERVICIOS DE INTERNET Las posibilidades que ofrece Internet se denominan servicios. Hoy en día,

Más detalles

EL PROGRAMA DE PRESENTACIONES IMPRESS (I)

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)

Más detalles

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas

Más detalles

Introducción a la Estadística con Excel

Introducción a la Estadística con Excel Introducción a la Estadística con Excel En el siguiente guión vamos a introducir el software Excel 2007 y la manera de trabajar con Estadística Descriptiva. Cargar o importar datos En Excel 2007 podemos

Más detalles

Módulo 3 CREANDO MI SITIO WEB. Centro Zonal Sur

Módulo 3 CREANDO MI SITIO WEB. Centro Zonal Sur Módulo 3 CREANDO MI SITIO WEB Centro Zonal Sur 53 3.1 Sitios Web utilizando Word Cree una carpeta con su nombre en el escritorio de Windows. Para ello siga los pasos indicados: a) Botón derecho del mouse

Más detalles

Sistema de Gestión Portuaria Sistema de Gestión Portuaria Uso General del Sistema

Sistema de Gestión Portuaria Sistema de Gestión Portuaria Uso General del Sistema Sistema de Gestión Portuaria Uso General del Sistema Uso General del Sistema Página 1 de 21 Contenido Contenido... 2 1.Ingreso al Sistema... 3 2.Uso del Menú... 6 3.Visualizar Novedades del Sistema...

Más detalles

Tutorial del administrador de la web del departamento

Tutorial del administrador de la web del departamento Tutorial del administrador de la web del departamento Antes de leer este tutorial, debes leer el tutorial del profesor. Observa que en la parte inferior de la página de INICIO de tu departamento aparece

Más detalles

ICARO MANUAL DE LA EMPRESA

ICARO MANUAL DE LA EMPRESA ICARO MANUAL DE LA EMPRESA 1. ENTRANDO EN ICARO Para acceder al Programa ICARO tendremos que entrar en http://icaro.ual.es Figura 1 A continuación os aparecerá la página de Inicio del aplicativo ICARO.

Más detalles