UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN
|
|
|
- Roberto González Lucero
- hace 8 años
- Vistas:
Transcripción
1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN Ciclo Nombre de la práctica: Lugar de ejecución: Materia: Guía de Laboratorio #2 Fundamentos de páginas web dinámicas en el cliente con JavaScript. Centro de cómputo. Desarrollo de Aplicaciones Web con Software Interpretado en el Cliente I. OBJETIVOS Que el estudiante: 1. Adquiera dominio de los elementos sintácticos básicos del lenguaje JavaScript. 2. Domine de las distintas formas de incluir código JavaScript dentro de un documento web. 3. Sea capaz de generar código HTML 5 desde secuencias de comando de JavaScript. 4. Pueda crear páginas web utilizando métodos básicos de interacción con el usuario. 5. Utilice métodos básicos de depuración de scripts utilizando las herramientas del navegador. II. INTRODUCCION TEORICA Introducir código JavaScript dentro de un documento HTML Existen cuatro formas de agregar código JavaScript dentro de un documento web. Estas son: 1. Utilizando el elemento script Este es el método básico para incluir código JavaScript dentro de un documento HTML. Los navegadores que reconocen scripts suponen que todo texto incluido dentro de estas etiquetas tiene que interpretarse como alguna forma de lenguaje de scripts. Casi todos suponen por defecto, que se trata de código JavaScript. Tradicionalmente, la forma de indicar el lenguaje en un elemento script es haciendo uso del atributo language. De la siguiente forma: <script language="javascript"> //Sentencias JavaScript </script> De acuerdo con el consorcio W3C, en lugar del atributo language, debería utilizarse el atributo type para indicar el tipo MIME del lenguaje en uso. El tipo MIME de JavaScript es "text/javascript". De acuerdo a esta recomendación debería hacerse uso del siguiente código: <script type="text/javascript"> //Sentencias JavaScript </script> 2. Creando scripts.js y vincularlos al documento con el elemento script Esta es la solución ideal cuando se tienen códigos de script de muchos cientos de líneas o cuando se crean funciones JavaScript que pueden llegar a utilizarse en varias páginas. En estos casos incluir todo este código dentro de elementos script puede resultar poco productivo e ineficiente. En estos casos es más conveniente crear el script en un archivo.js independiente y luego vincularlo al documento HTML mediante el atributo src del elemento script.
2 Consideraciones a tener en cuenta al utilizar este método: El archivo debe emplear formato de sólo texto y ser almacenado con extensión.js. Si utiliza un procesador de texto o un editor de texto asegúrese de que realmente fue guardado con esa extensión. No debe emplear el elemento script dentro del código JavaScript creado en el archivo.js. La forma sintáctica de vincular desde el documento HTML es la siguiente: <script type="text/javacript" src="script.js"></script> Es importante recordar que script es un elemento HTML cerrado, por tanto debe ir acompañado con su respectiva etiqueta de cierre para que funcione correctamente. Esta es la forma en que codificaremos en los ejemplos y ejercicios de las guías de práctica de este curso de Lenguajes Interpretados en el Cliente, salvo algunas pocas excepciones. 3. Empleando atributos HTML conocidos como manejadores de evento La forma de crear páginas web interactivas es el uso de manejadores de eventos. Esto permite responder al usuario desde la página web como respuesta a las acciones que realiza en la página. Acciones como hacer clic sobre un botón del ratón, presionar una tecla, apuntar con el ratón a algún objeto específico en la página, etc. Una forma tradicional de aplicar manejadores de eventos en una página es utilizar atributos en ciertos elementos HTML. Algunos ejemplos de estos atributos son: onclick, onmouseover, onchange, onkeypress, etc. Puede observar el siguiente ejemplo simple: <body onunload="decir_adios()"> IMPORTANTE: Aunque sigue siendo una forma aceptada por los distintos navegadores para implementar manejo de eventos, hoy en día se prefiere y se recomienda utilizar manejo de eventos estándar del nivel 2 del DOM, algo que profundizaremos en el transcurso del curso. 4. Haciendo uso de sintaxis de dirección pseudos-url (javascript:) Una dirección pseudo-url permite crear instrucciones especiales con código JavaScript que es posible invocar desde la barra de direcciones del navegador. Sintácticamente estas direcciones comienzan con javascript: y a continuación se pueden agregar instrucciones JavaScript sintácticamente bien escritas. Por ejemplo: javascript:alert('hola, APS I'); Las pseudos-url se pueden utilizar en enlaces como valor para el atributo href y de esta forma ejecutar varias instrucciones a la vez. Como puede verse en el siguiente ejemplo: <a href="javascript:x=5;y=7;alert('suma:' + (x+y))">sumar</a> Ejemplos: Los siguientes ejemplos ilustran cómo insertar código de JavaScript de cada una de las formas mencionadas anteriormente: Utilizando etiquetas <script> </script> <!DOCTYPE html> <html lang="es"> <head> <title>ejemplo de JavaScript - Primera forma</title> <meta charset="utf-8" /> <script type="text/javascript"> var html; html = '<h3 style="text-align:center;font-family:impact;font-size:16pt; color:purple;">'; html += "Una forma de incluir JavaScript dentro de una página "; html += "web es a través de las etiquetas <script></script>, "; html += "tal y como se ha hecho en este ejemplo.</h3>"; document.write(html); </script> </head> <body>
3 </body> </html> Vinculando un archivo independiente usando el atributo src de la etiqueta <script> Archivo html: <!DOCTYPE html> <html lang="es"> <head> <title>ejemplo de JavaScript - Segunda forma</title> <meta charset="utf-8" /> <script type="text/javascript" src="js/codigo.js"></script> </head> <body> </body> </html> Archivo independiente de JavaScript: código.js var html; html = "<h3 style='text-align:center;font-family:garamond;font-weight:bold;fontsize:15pt;color:brown;'>"; html += "Otra forma de incluir JavaScript dentro de una página "; html += "web es usando el atributo src de la etiqueta <script></script>, "; html += "tal y como se ha hecho en este ejemplo</h3>"; document.write(html); Utilizando los manejadores de eventos de algunas etiquetas HTML <!DOCTYPE html> <html lang="es"> <html> <head> <title>ejemplo de JavaScript Tercera forma </title> </head> <body onload="alert('hola desde JavaScript');"> <h1 style="text-align:center;font-family:georgia;font-size:15pt;color:olive"> JavaScript te saludó </h1> </body> </html> Utilizando sintaxis pseudo-url <!DOCTYPE html> <html lang= es > <head> <title>cuarto ejemplo</title> <meta charset="utf-8" /> <style type="text/css"> a:link { font-family:"century Gothic"; font-style:italic; font-weight:900; font-size:12pt; color:#00cd00; text-decoration:none; a:visited { font-family:"century Gothic"; font-style:italic; font-weight:500; font-size:12pt; color:#cdbe70; text-decoration:none; a:hover { font-family:"century Gothic";
4 font-style:italic; font-weight:900; font-size:12pt; color:#6959cd; text-decoration:underline overline; a:active { font-family:"century Gothic"; font-style:italic; font-weight:700; font-size:12pt; color:#00e5ee; text-decoration:underline; </style> </head> <body> <a href="javascript:alert(' Me hiciste click!');">hazme clic</a> </body> </html> Depuración de errores con el navegador Frecuentemente nos encontraremos con situaciones en donde será necesario corregir los scripts realizados con JavaScript. Es una tarea común en programación que la página web que contiene código JavaScript no se comporte de la manera esperada o no produzca el resultado que de acuerdo a nuestra lógica es el correcto. Generalmente, esto sucede cuando se produce algún error en la etapa de interpretación ejecutada por el navegador, ya sea debido a algún error de sintaxis o a un error en la lógica de programación. Casi todos los navegadores brindan algún mecanismo de depuración. A continuación se muestran algunos: Si utiliza versiones antiguas de Internet Explorer (inferiores a la versión 9.0) notará que en la barra de estado aparece un pequeño icono de color amarillo de fondo, como símbolo de advertencia. Cuando aparezca este icono será porque existe algún error de sintaxis en el script que intenta ejecutar. Para poder leer la información acerca del problema que ocurre puede hacer doble clic en dicho icono para que se muestre en un diálogo información sobre el error. Observa las siguientes figuras: Al hacer doble clic sobre este icono de advertencia debería aparecer un diálogo como el siguiente: Observará que el diálogo anterior le informa sobre el número de línea en el que se ha producido el error, a veces puede ser que sea en la línea anterior a la que se muestra, también se le informa del carácter y código
5 de error generado. La descripción del error rara vez es de utilidad, de hecho en este ejemplo el problema es únicamente un paréntesis, como se puede ver en el código de este ejemplo: En caso de que utilice versiones de Internet Explorer 9.0 (o superiores) puede inspeccionar elementos de la página que está cargada en el navegador y examinar detenidamente cualquier problema que ocurra con la ejecución de código JavaScript. Para visualizar el explorador del DOM, proporcionado por Internet Explorer 11 (por poner un caso particular), haga clic derecho sobre cualquier elemento de la página. Para el caso de este ejemplo, se hace sobre un botón (elemento BUTTON). En la barra lateral izquierda del explorador del DOM puede examinar un elemento de la página que no esté funcionando de acuerdo a lo esperado, como el caso del botón del ejemplo mostrado en la imagen anterior. Al recargar la página y presionar el botón Ordenar lista se puede observar la notificación de un error, que deberá solventarse para que funcione correctamente. La interpretación de los errores y saberlos corregir es una habilidad que cada uno debe ir adquiriendo en base a experiencia y dedicación. Para algunos, resultará obvio, pero para otros puede que no sea así y que les tome más tiempo desarrollar esa habilidad.
6 Como puede observar existen mensajes de advertencia o de error en la consola. En este caso se trata de un error de sintaxis. Si utiliza el Mozilla Firefox 27.0 o superior la depuración resulta más fácil de realizar utilizando el codemirror que es la herramienta para desarrolladores (DevTools) que ofrece por defecto el navegador de Mozilla. Para activarla, se sigue un proceso similar, primero haciendo clic derecho sobre un elemento que no esté funcionando adecuadamente o que no esté produciendo el resultado esperado y a continuación en el menú desplegable se da clic sobre la opción Inspeccionar elemento (O). Esa acción abrirá la consola de las herramientas para desarrollador del Firefox: Haciendo clic en la opción Consola, podrá observar alguna notificación de error en el código JavaScript. Si aparece en blanco actualice y de clic en el elemento asociado a la ejecución de código de JavaScript para que le notifique algún error. Puede observar que el depurador le muestra el error, su descripción y el número de línea donde está el problema encontrado. Si está utilizando Chrome de Google, puede invocar a las herramientas de desarrollador de Chrome (o Chrome Developer Tools o simplemente DevTools) para depurar código de JavaScript. El funcionamiento es idéntico y al invocarlo visualizará la siguiente interfaz de usuario donde puede explorar errores de JavaScript siempre en la opción Consola.
7 Al hacer clic en la opción Consola (Console) podrá visualizar los errores de JavaScript y las líneas donde se encuentran dichos errores, con alguna información adicional acerca del error. En el caso de que utilice el navegador Opera, puede utilizar el Opera Dragonfly, la propuesta de este navegador para depurar errores de HTML, CSS y JavaScript. El aspecto del Opera Dragonfly es el siguiente: Igual que con las propuestas de Firefox, Chrome e Internet Explorer se accede a través de los elementos de la página, haciendo clic derecho sobre ellos o invocando mediante método abreviado del teclado, pulsando las teclas CTRL+SHIFT+I. Para observar los errores posibles en JavaScript, debe hacer clic sobre la opción Consola (Console). Hay que mencionar que en las últimas versiones de Opera, el aspecto del Dragonfly es casi idéntico al de las herramientas para desarrollador de Chrome. Esto es así, debido a que para la última versión de Opera se ha utilizado como núcleo el motor Chromiun, mismo que utiliza el navegador Chrome de Google. Se plantea que investigue ud. cuál es la herramienta para desarrolladores del navegador Safari de las computadoras MAC. Interacción básica con el usuario utilizando JavaScript La forma más básica de interactuar con el usuario desde JavaScript es haciendo uso de los diálogos de entrada y salida simple proporcionados por los navegadores. Existen tres diálogos para entrada y salida simple. Estos son: a) Alerta (alert()), b) Confirmación (confirm()), y c) Solicitud de información (prompt()). Veamos cada uno de ellos. Diálogo de alerta El cuadro de diálogo de alerta se invoca mediante el método alert() del objeto window, que conoceremos en futuras prácticas. Este diálogo es simple y muestra un mensaje breve utilizando una cadena de texto, un icono de advertencia y un único botón Aceptar como el que se muestra a continuación.
8 Figura 1. Ventanas de diálogo de alerta de JavaScript (alert) en los navegadores de uso más frecuente: Internet Explorer, Firefox, Chrome, Opera y Safari. La sintaxis básica para un diálogo de alerta es: window.alert(mensaje); De forma abreviada se puede utilizar así: alert(mensaje); Donde mensaje es una cadena de texto, por lo tanto, si se introduce directamente el mensaje como un literal de cadena, debe ingresar el texto entre comillas simples o dobles. Si se utilizan variables declaradas deben ser de tipo cadena. Además, la cadena puede ser el resultado de la evaluación de una expresión, como por ejemplo, una concatenación. Cuando pasa un tipo de dato que no es cadena JavaScript lo convertirá en cadena. Veamos algunos ejemplos: alert(" Hola desde JavaScript!"); var usuario="ricardo Ernesto"; alert("hola " + usuario + ". Bienvenido a JavaScript"); Diálogo de confirmación Un diálogo de confirmación utiliza el método confirm() del objeto Window. Este diálogo muestra una pequeña ventana con un mensaje para que el usuario responda si está de acuerdo, pulsando un botón Aceptar, o si no está de acuerdo, pulsando un botón Cancelar (OK y Cancel, en un navegador en inglés). El diálogo también muestra un icono de interrogación. El diálogo tiene un aspecto como el que se muestra a continuación: Figura 2. Ventanas de diálogo de confirmación (confirm) de los navegadores de uso más frecuente La sintaxis básica de un diálogo de confirmación es: window.confirm(mensaje); O en forma resumida confirm(mensaje); Donde mensaje es cualquier variable válida de cadena de texto o expresión que al final de por resultado un valor de cadena. Este mensaje es el que aparecerá como pregunta en el mensaje de confirmación.
9 Ejemplo: confirm(" Deseas aprender JavaScript? "); Diálogo de solicitud de información Este diálogo utiliza el método prompt() del objeto Window. Esta ventana pequeña contiene un cuadro de texto donde el usuario debe escribir la información que se le solicita con un mensaje y un par de botones, uno para ingresar la información escrita y otro para cancelar la operación. Es importante mencionar que el dato ingresado por el usuario en este cuadro de texto, siempre será procesado en el script con un dato de tipo cadena de texto, sin importar, que se hayan introducido valores numéricos. El aspecto es el que se muestra a continuación: Figura 3. Ventanas de diálogo de solicitud de información de JavaScript (prompt) en Microsoft Internet Explorer 6.0 y Netscape 7.0, respectivamente. El método prompt() tiene dos argumentos. El primero es una cadena de texto que se muestra como etiqueta para indicar al usuario el tipo de información solicitada y el segundo es un valor predeterminado que aparece en el cuadro de texto donde se escribe la información solicitada. El método devuelve un valor de cadena que contiene el valor que introduce el usuario en la solicitud. La sintaxis básica del diálogo solicitud de información es: var result = prompt(mensaje, valor); Nótese que para poder utilizar el valor devuelto por el método prompt() debe utilizarse una variable a la cual asignárselo. En la sintaxis anterior mensaje es la cadena de texto que aparece como indicación del tipo de información que se está solicitando y valor es una cadena con un valor predeterminado que aparecerá en el cuadro de texto del diálogo solicitud de información. Si no coloca un valor predeterminado en la llamada aparecerá por defecto, en algunos navegadores el valor undefined. Si no desea esto coloque como valor una cadena vacía. Como se muestra a continuación: var edad = prompt(" Cuál es tu color favorito? ", ""); Imprimir en la página web desde JavaScript Con JavaScript se puede mandar a escribir texto, datos y código HTML de forma dinámica en una página web. Para poder hacer uso de esta característica debe hacer uso del método write del objeto document de JavaScript. La sintaxis a utilizar para aplicar este método es la siguiente: document.write(cadena o datos a imprimir); Alternativamente, se puede utilizar también: document.writeln(cadena o datos a imprimir);
10 Ejemplo: Guía #2: Fundamentos de páginas web dinámicas en el cliente con JavaScript document.write("esta página fue modificada por última vez: " + document.lastmodified); Manejo básico de eventos En JavaScript un evento es una acción que ocurre (o se dispara) automáticamente como resultado de una acción ocurrida dentro de la página web, generalmente provocada por la interacción del usuario, aunque existen casos en los que no es así. Algunos eventos típicos son: la carga de una página, situar el puntero del ratón sobre un enlace, hacer clic sobre un botón, enviar un formulario, etc. Los manejadores de eventos son atributos HTML que se colocan y son aceptados por algunos elementos. Por ejemplo: onclick, se utiliza para capturar un clic sobre un botón de formulario o sobre un enlace, onsubmit, se utiliza para capturar el envío de un formulario, onmouseover, para capturar cuando se ha posicionado el puntero del ratón sobre un objeto del documento (imagen, enlace, tabla, etc.) Sintaxis de javascript Es importante conocer los aspectos más importantes de la sintaxis del lenguaje JavaScript antes de ponerse a desarrollar. Los elementos de la sintaxis de JavaScript son comunes a los que proporcionan otros lenguajes: Variables Tipos de datos Operadores Sentencias Constantes Comentarios Estructuras de control Operadores Objetos OBSERVACIÓN: No se dará en esta guía de práctica una explicación muy extensa de cada uno de estos elementos de sintaxis. La información ya ha sido detallada en la clase teórica. Los aspectos de la sintaxis de JavaScript a considerar a la hora desarrollar scripts se detallan a continuación: JavaScript es un lenguaje sensible al uso de mayúsculas y minúsculas. Esto quiere decir, que hace distinción entre una y otra. Por ejemplo: no es lo mismo var edad, que var Edad. Se está haciendo referencia a variables diferentes. Del mismo modo la palabra reservada var debe digitarse (o escribirse) toda en minúsculas. Si se digita (o escribe) Var estará haciendo referencia a un identificador desconocido para el intérprete de JavaScript. Las instrucciones de JavaScript deben terminar en punto y coma. Aunque JavaScript permite que las instrucciones finalicen con un ENTER (retorno de carro), no debería dejarse llevar por este atajo. Es mucho mejor, terminar las instrucciones con el punto y coma. JavaScript es un lenguaje débilmente tipificado. Esto significa que no requiere que se defina un tipo de dato cuando se declaran variables. En lugar de ello, JavaScript decide el tipo apropiado para el dato en el momento en que lo va a operar o a utilizar en el contexto de un cálculo. Esto puede parecer una
11 Guía #2: Fundamentos de páginas web dinámicas en el cliente con JavaScript bondad, pero si no se presta atención a la hora de realizar los guiones puede llevarse sorpresas inesperadas en los cálculos. Debe tenerse especial cuidado con el uso del operador +, que se utiliza tanto para concatenación como para suma de valores numéricos. Considere que si se pasan uno o dos valores de tipo cadena a un operador + este concatenará los operandos en vez de sumarlos. Puede utilizar dos tipos diferentes de comentarios en JavaScript, los mismos que se utilizan con el lenguaje C/C++. El comentario de una línea, que se representa con el doble signo de barra inclinada (//) y el comentario de bloque, que se representa con el signo de barra inclinada y asterisco, y que se cierra de forma inversa, colocando primero el asterisco y luego, la barra inclinada (/* */). Cuando se desea agrupar un grupo de instrucciones en un mismo bloque debe encerrarlas entre llaves ({ ). Esto será necesario, cuando se utilicen sentencias de control como el if, else, switch, for, while, dowhile que contengan más de una instrucción. Variables Como en la mayor parte de lenguajes una variable tiene el propósito de almacenar datos que pueden ser modificados posteriormente. Todas las variables tienen un nombre conocido como identificador. En JavaScript las variables se declaran utilizando la palabra clave var seguida por el identificador de la variable. Como se muestra en los siguientes ejemplos: var x; var peso; var nombre; JavaScript permite la inicialización de variables al mismo tiempo que se hace la declaración, como se muestra a continuación: var i = 0; var acumulador = 1; var mensaje = ""; Es recomendable no utilizar variables sin antes declararlas. La aparición de una variable del lado derecho de una asignación sin declararla previamente dará lugar a un error. Tipos de datos A pesar de que JavaScript no requiere que las variables se declaren como de un tipo de datos específico, hay que entender que una vez se le asigna un valor a una variable, en ese momento la variable pasa a ser de ese tipo de datos, aunque posteriormente ese tipo de dato pueda cambiarse si se le asigna a la variable un valor de otro tipo. JavaScript maneja tipos de datos básicos o primitivos (cadenas, números y booleanos) y tipos de datos compuestos o complejos (objetos, arreglos y funciones). La característica importante de los tipos de datos complejos es que pueden estar constituidos por valores básicos como cadenas, números o booleanos, pero también pueden estar constituidos por datos complejos. Comentarios Los comentarios son necesarios en la medida que los scripts se vuelven mucho más complejos y largos. JavaScript proporciona mecanismos para utilizar comentarios en sus scripts, que al igual que en C se dividen en dos categorías: a) Comentario de una sola línea. El comentario en una sola línea requiere la utilización de doble barra inclinada ( // ) y comenta todo lo que se coloque a continuación de estos caracteres, siempre que estén en la misma línea. b) Comentarios de bloque. Para utilizar el comentario de bloque debe abrirse la sección de comentario con barra inclinada seguida de un asterisco ( /* ), a continuación puede digitar el texto del comentario y, por último, debe cerrar la sección de comentario con un asterisco seguido de
12 III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #2: Fundamentos de páginas web en el cliente con JavaScript 1 2 Computadora con navegadores actualizados y editor de texto instalado 1 3 Memoria USB 1 IV. PROCEDIMIENTO Indicaciones: Crear una carpeta en la carpeta web de su servidor local (C:\wamp\www) con el nombre lic y dentro de crear otra carpeta a la que nombrará guia1 y dentro de esta todas las carpetas de los ejercicios que se le muestran a continuación: ejemplo1 ejemplo2 ejemplo3 ejemplo4 ejemplo5 ejemplo6 Ejercicio 1: Cálculo de presupuesto en un hospital. Dado un valor de presupuesto, se calcula el total asignado a tres áreas del hospital: Dermatología, Traumatología y Pediatría. Guión 1: presupuesto.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>presupuesto</title> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/presupuesto.css" /> </head> <body> <section> <article> <table> <caption>áreas</caption> <tr> <th>área</th> <th>porcentaje DEL PRESUPUESTO</th> </tr> <tr> <td>dermatología</td> <td> 40%</td> </tr> <tr> <td>traumatología</td> <td>35%</td> </tr> <tr> <td>pediatría</td> <td>25%</td> </tr> </table> <script src="js/presupuesto.js"></script> </article> </section> </body> </html>
13 Guión 2: presupuesto.js //prompt() permite obtener entrada de datos del usuario var presupuesto = prompt('ingrese el presupuesto anual',''); var derma,trau,pedi; derma = presupuesto*0.40; trau = presupuesto*0.35; pedi = presupuesto*0.25; //Durante el ciclo evitaremos utilizar manejadores de eventos //dentro del marcado HTML. En este caso lo haremos porque //no hemos visto funciones. Nos referimos al manejador de eventos //onmouseover para cambiar dinámicamente el nombre de la clase document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>el presupuesto asignado para Ginecología es: $" + derma + "</h1><hr>"); document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>el presupuesto asignado para Traumatología es: $" + trau + "</h1><hr>"); document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>el presupuesto asignado para Pediatría es: $" + pedi + "</h1><hr>"); Guión 3: fonts.css /* Incluyendo la fuente Creative Zoo y todas sus variantes { font-family: 'CreativeZoo'; src: url('../fonts/creativzoo.eot'); src: url('../fonts/creativzoo.eot?#iefix') format('embedded-opentype'), url('../fonts/creativzoo.woff') format('woff'), url('../fonts/creativzoo.ttf') format('truetype'), url('../fonts/creativzoo.svg#creativezoo') format('svg'); font-weight: normal; font-style: normal; font-variant: normal; /* Incluyendo la fuente Sipll y todas sus variantes { font-family: 'Sipll'; src: url('../fonts/sipll.eot'); src: url('../fonts/sipll.eot?#iefix') format('embedded-opentype'), url('../fonts/sipll.woff') format('woff'), url('../fonts/sipll.ttf') format('truetype'), url('../fonts/sipll.svg#creativezoo') format('svg'); font-weight: normal; font-style: normal; font-variant: normal; Guión 4: presupuesto.css body { background: rgba(121,143,59,1); background: -moz-linear-gradient(left, rgba(121,143,59,1) 0%, rgba(118,173,47,1) 100%); background: -webkit-gradient(left top, right top, color-stop(0%, rgba(121,143,59,1)), color-stop(100%, rgba(118,173,47,1))); background: -webkit-linear-gradient(left, rgba(121,143,59,1) 0%, rgba(118,173,47,1) 100%); background: -o-linear-gradient(left, rgba(121,143,59,1) 0%, rgba(118,173,47,1) 100%); background: -ms-linear-gradient(left, rgba(121,143,59,1) 0%, rgba(118,173,47,1) 100%); background: linear-gradient(to right, rgba(121,143,59,1) 0%, rgba(118,173,47,1) 100%); filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#798f3b', endcolorstr='#76ad2f', GradientType=1 ); font-size:16px; margin:30px 10px;
![En este caso lo haremos porque //no hemos visto funciones. Nos referimos al manejador de eventos //onmouseover para cambiar dinámicamente el nombre de la clase document.](/docs-images/43/1541779/images/page_13.jpg "write(\"<h1 class='moneyoff' onmouseover='this.classname=\\"moneyon\\"' onmouseout='this.classname=\\"moneyoff\\"'>el presupuesto asignado para Ginecología es: $\" + derma + \"</h1><hr>\"); document.")
14 caption { font-family:'creativezoo'; font-weight:900; font-size:2.6em; color:lavender; letter-spacing: 5px; text-shadow: 0 0 2px #fff, -1px -1px 0 hsl(80,70%,35%), -2px -2px 1px hsl(80,70%,35%), -2px -2px 2px hsl(80,10%,15%); table { border:solid 2px navy; font-family:'creativezoo'; letter-spacing: 2px; margin:1em auto; width:48%; th { background-color:forestgreen; border:solid 2px navy; color:lightcyan; font-size:1em; font-weight:800; text-align:center; td { background-color:darkorange; border:solid 2px navy; color:bisque; font-size:1em; font-weight:400; text-align:center; h1 { font-family:'sipll'; font-weight:700; font-size:15pt; letter-spacing: 2px;.moneyOn { border:outset 6px Cornsilk; background-color:brown; text-align:center; color:cornsilk;.moneyoff { background-color:mistyrose; border:inset 5px maroon; color:sienna; text-align:center; hr { background-color:lavender; height:7px; width:98%; Resultado:
15 Ejercicio 2: Crear un documento html que mediante un script de JavaScript permita crear la tabla de multiplicar del número que un usuario ingrese mediante un diálogo prompt(). Guión 1: tablamultiplicar.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>tabla de Multiplicar</title> <link rel="stylesheet" href="css/tablamulti.css"/> <script src="js/multiplicar.js"></script> </head> <body> </body> </html> Guión 2: tablamulti.css * { margin: 0; padding: 0; html, body { height:100%; body{ background: -moz-linear-gradient(top, rgba(118,130,127,1) 0%, rgba(130,140,149,0.8) 51%, rgba(43,53,58,0.6) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, colorstop(0%,rgba(118,130,127,1)), color-stop(51%,rgba(130,140,149,0.8)), colorstop(100%,rgba(43,53,58,0.6))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(118,130,127,1) 0%,rgba(130,140,149,0.8) 51%,rgba(43,53,58,0.6) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(118,130,127,1) 0%,rgba(130,140,149,0.8) 51%,rgba(43,53,58,0.6) 100%); /* Opera */ background: -ms-linear-gradient(top, rgba(118,130,127,1) 0%,rgba(130,140,149,0.8) 51%,rgba(43,53,58,0.6) 100%); /* IE10+ */
16 background: linear-gradient(to bottom, rgba(118,130,127,1) 0%,rgba(130,140,149,0.8) 51%,rgba(43,53,58,0.6) 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#76827f', endcolorstr='#992b353a',gradienttype=0 ); /* IE6-9 */ font: Arial,Helvetica,"Liberation Sans"; font-size: 16px; caption { background-color:#ef7b28; color: white; font-family: helvetica, arial; letter-spacing: 3px; margin:6px 0; text-align: center; text-shadow: 0px -2px 0px #333,0px 2px 3px #666; table { background-color:#efe828; border-radius: 5px 5px 5px 5px; margin-left:auto; margin-right:auto; text-align:center; tr { background: green; th { background-color:#335599; color:white; font-family:"century Gothic"; font-size:12pt; font-style:normal; font-weight:900; letter-spacing: 2px; border: #d9d9d9 3px solid; border-right:2px solid #333; border-bottom:2px solid #333; background: #006; color:white; padding: 4px 6px; td { border: white 3px solid; border-right:2px solid #000; border-bottom:2px solid #000; background: green; color:white; font-family:"century Gothic"; font-size:0.9em; font-style:bold; font-weight:500; letter-spacing: 2px; padding: 4px 6px; text-align:center; td:first-child { -moz-border-radius: 10px 0 0 0; -webkit-border-radius: 10px 0 0 0; border-radius: 0px 0px 0px 0px; td:last-child { -moz-border-radius: 0 10px 0 0; -webkit-border-radius: ; border-radius: 0px 0px 0px 0px;
17 Guión 3: multiplicar.js /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * Materia: Lenguajes Interpretados en el Servidor * * Archivo: funciones.js * * Descripción: Genera una tabla de multiplicar del * * número ingresado por el usuario, que * * debe ser un número entero entre 1 y 10 * * Ciclo: * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ //Ingresando el número y capturándolo usando el método prompt() var numero = prompt('ingrese un número entero para obtener su tabla de multiplicar',''); //Construyendo la tabla del número ingresado document.write("<table>\n\t"); document.write("<caption>tabla del multiplicar del " + numero + "</caption>\n"); document.write("<thead>\n\t"); document.write("<tr>\n\t\t<th>operación</th>\n\t\t<th>producto</th>\n\t</tr>\n"); document.write("</thead>\n\t"); document.write("<tbody>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 1 = </td>\n\t\t"); document.write("<td>" + (numero * 1) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 2 = </td>\n\t\t"); document.write("<td>" + (numero * 2) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 3 = </td>\n\t\t"); document.write("<td>" + (numero * 3) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 4 = </td>\n\t\t"); document.write("<td>" + (numero * 4) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 5 = </td>\n\t\t"); document.write("<td>" + (numero * 5) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 6 = </td>\n\t\t"); document.write("<td>" + (numero * 6) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 7 = </td>\n\t\t"); document.write("<td>" + (numero * 7) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 8 = </td>\n\t\t"); document.write("<td>" + (numero * 8) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 9 = </td>\n\t\t"); document.write("<td>" + (numero * 9) + "</td>\n\t</tr>\n\t"); document.write("<tr>\n\t\t<td>" + numero + " x 10 = </td>\n\t\t"); document.write("<td>" + (numero * 10) + "</td>\n\t</tr>\n\t"); document.write("</tbody>\n"); document.write("</table>"); Resultado: Ejercicio 3: Creación de una calculadora que realiza las operaciones básicas: suma, resta, multiplicación, división y residuo.
18 Guión 1: calculadora.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>calculadora Básica</title> <link rel="stylesheet" href="css/calc.css"/> <script src="js/calculadora.js"></script> </head> <body> </body> </html> Archivo: calc.css * { margin: 0; padding: 0; html, body { height: 100%; body { background: rgb(247,247,121); /* Old browsers */ background: -moz-linear-gradient(top, rgba(247,247,121,1) 0%, rgba(234,244,144,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, colorstop(0%,rgba(247,247,121,1)), color-stop(100%,rgba(234,244,144,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(247,247,121,1) 0%,rgba(234,244,144,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(247,247,121,1) 0%,rgba(234,244,144,1) 100%); /* Opera */ background: -ms-linear-gradient(top, rgba(247,247,121,1) 0%,rgba(234,244,144,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(247,247,121,1) 0%,rgba(234,244,144,1) 100%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#f7f779', endcolorstr='#eaf490',gradienttype=0 ); /* IE6-9 */ height: 100%; h1{.menu{ background: rgba(0,155,125,0.8); color: #FFFFFF; font: normal 4.2em Arial,Helvetica,"Liberation Sans"; padding: 6px 0; text-align: center; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); overflow:hidden; width: 100%;.menu a span{
19 position:relative; top:40%;.menu a:hover{ background: #a71b15;.menu li{ display: inline; margin: 0;.menu li a{ background:#b72236; -moz-border-radius: 400px; -webkit-border-radius: 400px; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 5px 5px 3px 0px rgba(75,25,25,0.75); -moz-box-shadow: 5px 5px 3px 0px rgba(75,25,25,0.75); -o-box-shadow: 5px 5px 3px 0px rgba(75,25,25,0.75); -ms-box-shadow: 5px 5px 3px 0px rgba(75,25,25,0.75); box-shadow: 5px 5px 3px 0px rgba(75,25,25,0.75); color: white; display:inline-block; height:100px; margin-right:5px; margin: 0; text-align: center; text-decoration: none; width:100px;.menu li a:visited{ color: white;.menu ul{ font: bold 14px Verdana; list-style-type: none; margin: 36px auto; padding: 0; text-align: center;.menu ul li { margin: 0 12px; Archivo: calculadora.js /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Materia: Lenguajes Interpretados en el Cliente * * Archivo: calculadora.js * * Descripción: Realizar operaciones básicas aritméticas. * * Ciclo: * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ //Ingresar los datos de los números a operar var op1 = prompt('introduzca el primer numero:',''); var op2 = prompt('introduzca el segundo numero:',''); //Creando el documento HTML con puro JavaScript haciendo //uso del método write() del objeto document document.write("<h1>operaciones básicas</h1><hr />"); document.write("<div class='menu'>"); document.write("<ul>"); document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \+ ' + parseint(op2) + ' = ' + eval(parseint(op1)+parseint(op2)))\"><span>sumar</span></a></li>");
![document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \- ' + parseint(op2) + ' = ' + (parseint(op1)- parseint(op2)))\"><span>restar</span></a></li>"); document.](/docs-images/22/1541779/images/20-0.jpg "write(\"<li><a href=\\"javascript:void(0)\\" onclick=\\"alert(parseint(op1) + ' \* ' + parseint(op2) + ' = ' + (parseint(op1)*parseint(op2)))\\"><span>multiplicar</span></a></li>\"); document.")
20 document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \- ' + parseint(op2) + ' = ' + (parseint(op1)- parseint(op2)))\"><span>restar</span></a></li>"); document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \* ' + parseint(op2) + ' = ' + (parseint(op1)*parseint(op2)))\"><span>multiplicar</span></a></li>"); document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \/ ' + parseint(op2) + ' = ' + Math.round((parseInt(op1)/parseInt(op2))*100)/100)\"><span>Dividir</span></a></li>"); document.write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \% ' + parseint(op2) + ' = ' + (parseint(op1)%parseint(op2)))\"><span>residuo</span></a></li>"); document.write("</ul>"); document.write("</div>"); Resultado: Ejercicio 4: Realización de un calculador de áreas geométricas, en base a un tipo de área seleccionada y a las medidas ingresadas de acuerdo al área ingresada. Las áreas a considerar serán: círculo, triángulo y rectángulo. Guión 1: calculoareas.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>cálculo de áreas</title> <link rel="stylesheet" href="css/areas.css"/> </head> <body> <section id="menu"> <nav id="menu-options"> <ul>
![write("<li><a href=\"javascript:void(0)\" onclick=\"alert(parseint(op1) + ' \/ ' + parseint(op2) + ' = ' + Math.](/docs-images/43/1541779/images/page_20.jpg "round((parseInt(op1)/parseInt(op2))*100)/100)\\"><span>Dividir</span></a></li>\"); document.")
21 <li> <a href="circulo.html" title="calcular área del círculo"> <img src="img/circulo.png" alt="círculo" /> <span>área de Circulo</span> </a> </li> <li> <a href="triangulo.html"> <img src="img/triangulo.png" alt="círculo" /> <span>área de Triángulo</span> </a> </li> <li> <a href="rectangulo.html"> <img src="img/rectangulo.png" alt="círculo" /> Área de Rectángulo </a> </li> </ul> </nav> </section> </body> </html> Guión 2: circulo.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>área círculo</title> <link rel="stylesheet" href="css/areas.css"/> <script src="js/circulo.js"></script> </head> <body> <section id="figura"> <div class="circulo"></div> </section> <nav> <a href="calculoareas.html" class="back-button">regresar</a> </nav> </body> </html> Guión 3: triangulo.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>área triángulo</title> <link rel="stylesheet" href="css/areas.css"/> <script type="text/javascript" src="js/triangulo.js"></script> </head> <body> <section id="figura"> <div class="triangulo"></div> </section> <nav> <a href="calculoareas.html" class="back-button">regresar</a> </nav> </body> </html> Guión 4: rectángulo.html <!DOCTYPE html> <html lang="es"> <head>
22 <meta charset="utf-8" /> <title>área rectángulo</title> <link rel="stylesheet" href="css/areas.css"/> <script type="text/javascript" src="js/rectangulo.js"></script> </head> <body> <section id="figura"> <div class="rectangulo"></div> </section> <nav> <a href="calculoareas.html" class="back-button">regresar</a> </nav> </body> </html> Guión 5: areas.css * { margin: 0; padding: 0; html, body { height: 100%; body { background: -moz-linear-gradient(left bottom, rgb(153,217,234) 40%, rgb(36,147,174) 70%, rgb(17,68,81) 95%); background: -ms-linear-gradient(left bottom, rgb(153,217,234) 40%, rgb(36,147,174) 70%, rgb(17,68,81) 95%); background: -o-linear-gradient(left bottom, rgb(153,217,234) 40%, rgb(36,147,174) 70%, rgb(17,68,81) 95%); background: -webkit-linear-gradient(left bottom, rgb(153,217,234) 40%, rgb(36,147,174) 70%, rgb(17,68,81) 95%); background: linear-gradient(left bottom, rgb(153,217,234) 40%, rgb(36,147,174) 70%, rgb(17,68,81) 95%); color: white; font-family: Arial; font-size: 16px; margin: 0; text-shadow: 1px 1px 0 rgba(0,0,0,.3); /* Estilos para el área donde se mostrará la imagen de la figura geométrica */ div { display: block; height: 120px; margin: 0 auto; width: 120px; header h1 { color: #fff; font: Bold 3.2em Tahoma,Helvetica,"Liberation Sans",sans-serif; text-align:center; text-shadow: 0 0 2px #ccc, -1px -1px 0 hsl(80, 70%, 35%), -2px -2px 1px hsl(80, 70%, 35%), -2px -2px 2px hsl(80, 10%, 15%); nav ul { font-size: 0;
23 padding: 0; nav ul li { background: rgba(0,0,0,.5); display: inline-block; font-size: 16px; height: 50px; line-height: 50px; margin: 0 auto; padding: 10px 0; vertical-align: top; width: 30%; nav ul li:hover{ background:rgba(0,0,120,0.25); nav ul li img { display: block; height: 125px; margin: 0 auto; width: 132px; nav ul li a { color: #DDD; display: block; font-weight:bold; text-align:center; text-decoration: none; text-transform: uppercase; nav ul li a:hover { color: #F6F600; #menu{ background: -moz-linear-gradient(left bottom, rgb(39,30,107) 40%, rgb(11,6,43) 70%, rgb(2,2,10) 85%); background: -ms-linear-gradient(left bottom, rgb(39,30,107) 40%, rgb(11,6,43) 70%, rgb(2,2,10) 85%); background: -o-linear-gradient(left bottom, rgb(39,30,107) 40%, rgb(11,6,43) 70%, rgb(2,2,10) 85%); background: -webkit-linear-gradient(left bottom, rgb(39,30,107) 40%, rgb(11,6,43) 70%, rgb(2,2,10) 85%); background: linear-gradient(left bottom, rgb(39,30,107) 40%, rgb(11,6,43) 70%, rgb(2,2,10) 85%); margin: 0 auto; max-width: 960px; #menu-options ul li { height: auto; width: 320px;.back-button { background-color: rgba(205,125,125,1); /* #0960C9 */ color: #ccc; display: block; font-size: 1.2em;
24 font-weight: Bold; height: 50px; margin: 32px auto; padding-top: 20px; text-align: center; text-decoration: none; vertical-align: middle; width: 24%;.back-button:hover { background-color: rgba(225,135,130,0.75); color: #fff; text-decoration: none;.circulo{ border-radius: 75px; -moz-border-radius: 75px; -ms-border-radius: 75px; -o-border-radius: 75px; -webkit-border-radius: 75px; background: navy;.rectangulo { background-color: #D336C6; width: 15%.triangulo { border-color: transparent transparent yellow transparent; border-style: solid; border-width: 90px; height: 0; width: 0px; Guión 5: circulo.js /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * Materia: Lenguajes Interpretados en el Cliente * * Archivo: circulo.js * * Uso: Calcular el área de un círculo. * * Ciclo * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ var PI = ; var radio = prompt('introduzca el radio del círculo:',''); var area; area = PI*radio*radio; document.write("<header><h1>el área del círculo es: " + area + "</h1><hr /><br /></header>"); Guión 6: triangulo.js /* * * * * * * * * * * * * * * * * * * * * * * * * * * * Materia: Lenguajes Interpretados en el Cliente * * Archivo: triangulo.js * * Uso: Calcular el área de un triángulo. * * Ciclo * * * * * * * * * * * * * * * * * * * * * * * * * * * */ var base = prompt('introduzca la base del triángulo',''); var altura = prompt('introduzca la altura del triángulo','');
25 var area; area = (base*altura)/2; document.write("<header><h1>el área del Triángulo es: " + area + "</h1><hr /><br /></header>"); Guión 7: rectangulo.js /* * * * * * * * * * * * * * * * * * * * * * * * * * * * Materia: Lenguajes Interpretados en el Cliente * * Archivo: rectangulo.js * * Uso: Calcular el área de un rectángulo. * * Ciclo * * * * * * * * * * * * * * * * * * * * * * * * * * * */ var base = prompt('introduzca la base del rectángulo',''); var altura = prompt('introduzca la altura del rectángulo',''); var area; area = base*altura document.write("<header><h1>el área del rectángulo es: " + area + "</h1><hr /><br /></header>"); Resultado: Ejercicio 5: Cálculo del número de días para el mes y año seleccionado. Guión 1: diasmes.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>días de cada mes</title> <link rel="stylesheet" async href=" datagenerated=" />
26 <link rel="stylesheet" href="css/calculodias.css" /> <script src="js/calculodias.js"></script> </head> <body> </body> </html> Guión 2: calculodias.js var mes = prompt("ingrese el mes: ", ""); var year = prompt("ingrese el año: ", ""); var diasdelmes; var bisiesto = false; if(year%4 == 0 && (year%100!= 0 year%400 == 0)){ bisiesto = true; switch(mes){ case "Enero": case "enero": case "Marzo": case "marzo": case "Mayo": case "mayo": case "Julio": case "julio": case "Agosto": case "agosto": case "Octubre": case "octubre": case "Diciembre": case "diciembre": diasdelmes = 31; break; case "Abril": case "abril": case "Junio": case "junio": case "Septiembre": case "septiembre": case "Noviembre": case "noviembre": diasdelmes = 30; break; case "Febrero": case "febrero": if(!bisiesto) diasdelmes = 28; else diasdelmes = 29; break; default: alert("el mes " + mes + " no existe"); mes = "No existe"; diasdelmes = 0; if(bisiesto == true){ var msg = "El año " + year + " es bisiesto.<br />El mes de " + mes + " tiene " + diasdelmes + " días."; else{ var msg = "El año " + year + " no es bisiesto.<br />El mes de " + mes + " tiene " + diasdelmes + " días."; //Esta instrucción debe ingresarla en una sola línea
27 document.write('<div class="inset-text-effect"><h3>' + msg + '</h3></div>'); Guión 3: calculodias.css * { margin: 0; padding: 0; html, body { height: 100%; body { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(1,#afd296), color-stop(1,#baeb96) ); background-image: -o-linear-gradient(bottom,#afd %,#BAEB96 100%); background-image: -moz-linear-gradient(bottom,#afd %,#BAEB96 100%); background-image: -webkit-linear-gradient(bottom,#afd %,#BAEB96 100%); background-image: -ms-linear-gradient(bottom,#afd %,#BAEB96 100%); background-image: linear-gradient(to bottom,#afd %,#BAEB96 100%);.inset-text-effect { display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; border: none; font: normal 2.4em/1 "Anton",Helvetica,"Liberation Sans",sans-serif; color: rgba(230,240,235,1); text-align: center; text-transform: normal; -o-text-overflow: clip; text-overflow: clip; white-space: pre; background: -webkit-linear-gradient(-90deg, rgba(208,228,247,0.2) 0, rgba(115,177,231,0.3) 24%, rgba(10,119,213,0.5) 50%, rgba(83,159,225,0.3) 79%, rgba(135,188,234,0.2) 100%), #34495e; background: -moz-linear-gradient(180deg, rgba(208,228,247,0.2) 0, rgba(115,177,231,0.3) 24%, rgba(10,119,213,0.5) 50%, rgba(83,159,225,0.3) 79%, rgba(135,188,234,0.2) 100%), #34495e; background: linear-gradient(180deg, rgba(208,228,247,0.2) 0, rgba(115,177,231,0.3) 24%, rgba(10,119,213,0.5) 50%, rgba(83,159,225,0.3) 79%, rgba(135,188,234,0.2) 100%), #34495e; background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); -moz-box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); -o-box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); -ms-box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.4); text-shadow: 1px 1px 0 rgba(140,140,140,0.6), -1px -1px 1px
28 rgba(0,0,0,0.67); margin: 25px auto; padding: 12px 15px; width: 720px;.inset-text-effect h3 { line-height: 1.5em text-align: center; Guía #2: Fundamentos de páginas web dinámicas en el cliente con JavaScript Ejercicio 6: Cálculo de la prima y la cuota a pagar por una casa, solicitando al usuario su ingreso salarial por mes. Guión 1: cuotacasa.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>cuota prima de casa</title> <link rel="stylesheet" href=" /> <link rel="stylesheet" href="css/title.css"> </head> <body> <script type="text/javascript"> var salario, preciocasa, prima, cuotamensual; var annios; salario = parsefloat(prompt('ingrese su salario mensual','')); annios = 12*15; //numero de años a pagar por la casa preciocasa = parsefloat(prompt('ingrese el precio de la casa','')); if(salario <= 400){ if(preciocasa > 8000){ alert('lo siento el valor de la casa es muy alto para su sueldo'); else{ prima = (preciocasa*0.1); cuotamensual = (preciocasa-prima)/annios; document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>la prima que usted debe pagar por la casa es = $ " + Math.round(prima * Math.pow(10,2)) / Math.pow(10,2) + "</h1><hr>"); document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>la cuota mensual a pagar durante 30 años es de = $ " + Math.round(cuotamensual * Math.pow(10,2)) / Math.pow(10,2) + "</h1><hr>"); else{ prima = (preciocasa*0.2); cuotamensual = (preciocasa-prima)/annios; document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>la prima que usted debe pagar por la casa es = $ " + Math.round(prima * Math.pow(10,2)) / Math.pow(10,2) + "</h1><hr>"); document.write("<h1 class='moneyoff' onmouseover='this.classname=\"moneyon\"' onmouseout='this.classname=\"moneyoff\"'>la cuota mensual a pagar durante 15 años es de = $ " + Math.round(cuotamensual * Math.pow(10,2)) / Math.pow(10,2) + "</h1><hr>"); </script> </body> </html> Guión 2: title.css * { margin: 0; padding: 0;
29 body, html { font-size: 16px; height: 100%; body { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.12, #C789A7), color-stop(0.27, #F291B1), color-stop(0.75, #C7A2B4) ); background-image: -o-linear-gradient(bottom, #C789A7 12%, #F291B1 27%, #C7A2B4 75%); background-image: -moz-linear-gradient(bottom, #C789A7 12%, #F291B1 27%, #C7A2B4 75%); background-image: -webkit-linear-gradient(bottom, #C789A7 12%, #F291B1 27%, #C7A2B4 75%); background-image: -ms-linear-gradient(bottom, #C789A7 12%, #F291B1 27%, #C7A2B4 75%); background-image: linear-gradient(to bottom, #C789A7 12%, #F291B1 27%, #C7A2B4 75%); h1 { font-family:oswald,helvetica,tahoma,"liberation Sans"; font-weight:700; font-size:2.5em; letter-spacing: 1px; margin: 24px auto; text-align: center; text-shadow: 3px 3px 0px #eee, 6px 6px 0px #696969; padding: 12px 15px;.moneyOn { background-color:thistle; border:outset 6px DarkViolet; color:indigo;.moneyoff { border:inset 5px maroon; background-color:mistyrose; color:sienna; Resultado:
30 V. DISCUSION DE RESULTADOS 1. Investigue el uso de document.write(), y con dicho método, genere la estructura del siguiente documento: IMPORTANTE: Recuerde que la maquetación se hará únicamente con CSS3. 2. Similar al ejemplo 3 del procedimiento de esta guía de práctica, cree un sitio web con las páginas que sean necesarias para realizar conversiones de una cantidad dada en metros a pies, pulgadas y yardas (investigue los factores de conversión). Debe realizar una página principal donde seleccionar en un menú a qué unidades desea convertir la cantidad en metros que ingresará y luego, mediante mensaje prompt() deberá solicitar esa cantidad y luego mostrar un la página web de la unidad de conversión seleccionada la cantidad ingresada en metros y la cantidad convertida. VI. INVESTIGACION COMPLEMENTARIA 1. Investigue a qué se le llama JavaScript no invasivo, no obstructivo o no intrusivo (unobtrusive
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/2012 Nombre de la Practica: Lugar de Ejecución: Tiempo Estimado: MATERIA: DOCENTES: GUIA DE LABORATORIO #1 Fundamentos
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
Manual Ingreso Notas y Acta Electrónica
Manual Ingreso Notas y Acta Electrónica ÍNDICE ÍNDICE 2 I. INTRODUCCIÓN 3 II. CREAR LA ESTRUCTURA DE NOTAS PARCIALES (OPCIÓN NOTAS NORMALES) _ 4 III. CREAR LA ESTRUCTURA DE NOTA FINAL (OPCIÓN NOTAS CALCULADAS)
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS
REDES DE ÁREA LOCAL. APLICACIONES Y SERVICIOS EN WINDOWS Servicio DNS - 1 - Servicio DNS...- 3 - Definición... - 3 - Instalación... - 5 - Configuración del Servidor DNS...- 10 - - 2 - Servicio DNS Definición
Consejos para el correcto armado de HTML para Emails
Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Cuando desarrollas una campaña de Email Marketing, es fundamental que tu mensaje sea recibido correctamente.
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
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
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
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
Objetivo: Introducción conceptual y aplicación básica de los lenguajes del lado del servidor.
Sesión 03: Lenguajes web del servidor Competencias a Conseguir: - Conocer el entorno de trabajo a nivel de servidores web. - Instalación del localhost (Servidor Local). - Repaso general de PHP y ejercicios
Contenido. Email: capacitacion@u cursos.cl / Teléfono: 9782450
GMI Contenido PUBLICAR AVISO... 3 CREAR PROCESO DE SELECCIÓN... 6 VER/ELIMINAR AVISOS PUBLICADOS... 8 ETAPAS DE UN PROCESO DE SELECCIÓN... 10 SECCIONES DE LOS PROCESOS DE SELECCIÓN (GPS)... 21 PERSONALIZAR
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
JavaScript toma su sintaxis de los lenguajes de programación más conocidos, fundamentalmente C/C++, aunque también algo de Pascal.
1 JavaScript 1.1 Qué es JavaScript? JavaScript es un lenguaje interpretado. Es idóneo para trabajar en Web, ya que son los navegadores que utilizamos los que interpretan (y por tanto ejecutan) los programas
Curso PHP Módulo 1 R-Luis
Lenguaje PHP Introducción Archivos HTML y PHP: Crear un archivo php es tan sencillo como cambiarle la extensión a un archivo html, por ejemplo podemos pasar de index.html a index.php sin ningún inconveniente.
La ventana de Microsoft Excel
Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft
Creación del sitio web del Laboratorio F1
Creación del sitio web del Laboratorio F1 Jonatan Grandmontagne García Universidad de León, España jon@usuarios.retecal.es Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto
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
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/2011 GUIA DE LABORATORIO #1 Nombre de la Práctica: Adquisición de servicio webhosting Lugar de Ejecución: Centro
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2014 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 13 Nombre de la práctica: Alojamiento web, dominio y transferencia FTP Lugar de ejecución:
ENTORNO DE DESARROLLO MICROSOFT.NET 2010
ENTORNO DE DESARROLLO MICROSOFT.NET 2010 UNIDAD 2 Estructura de contenidos: 1. Conociendo ASP 2. Sitio Web y Proyecto Web 3. WebForm 4. Características de los webforms 5. Entorno del.net 6. Controles básicos
Ayuda para la instalación Componente Firma Digital INDICE. 1 Configuración previa...2. 1.1 Configuración Internet Explorer para ActiveX...
INDICE 1 Configuración previa...2 1.1 Configuración Internet Explorer para ActiveX...2 1.2 Problemas comunes en sistema operativo Windows...8 1.2.1 Usuarios con sistema operativo Windows XP con el Service
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
Guía Notas Parciales. Intermedio
Guía Notas Parciales Intermedio ÍNDICE I. INTRODUCCIÓN 3 II. CREAR LA ESTRUCTURA DE NOTAS PARCIALES (OPCIÓN NOTAS NORMALES) 4 III. CREAR LA ESTRUCTURA DE NOTA FINAL (OPCIÓN NOTAS CALCULAS) 6 IV. INGRESAR
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
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 #3 Nombre de la Práctica: Creación de menús con Joomla Lugar de Ejecución: Centro de cómputo
GUÍA DE USUARIO DEL CORREO
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN DIRECCIÓN GENERAL DE LA OFICINA DE ADMINISTRACIÓN Y SERVICIOS DIVISIÓN DE SOPORTE TÉCNICO Y FORMACIÓN AL USUARIO GUÍA DE
MANUAL DE USUARIO. SISTEMA DE INVENTARIO DE OPERACIONES ESTADÍSTICAS.
MANUAL DE USUARIO. SISTEMA DE INVENTARIO DE OPERACIONES ESTADÍSTICAS. INDICE Cómo Ingresar al Sistema?... 1 Autenticación de Usuario... 2 Pantalla Principal del Sistema de Operaciones Estadisticas... 3
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:
Uso de Visual C++ Pre-Practica No. 3
Pre-Practica No. 3 Uso de Visual C++ Microsoft Visual C++ 2010 es una versión de Visual Studio específica para el lenguaje de programación C++. Es un entorno de desarrollo muy completo y profesional. Por
INFORMACIÓN DE NAVEGADORES
INFORMACIÓN DE NAVEGADORES Para operar con las Sedes Electrónicas de la Informática Presupuestaria es necesario tener un navegador web actualizado, aunque es posible que su funcionamiento sea correcto
Unidad 1. Introducción a HTML (I)
Unidad 1. Introducción a HTML (I) A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language) es
Manual del usuario del Módulo de Administración de Privilegios del Sistema Ingresador (MAPSI)
Manual del usuario del Módulo de Administración de Privilegios del Sistema Ingresador (MAPSI) 1. Introducción El presente manual representa una guía rápida que ilustra la utilización del Módulo de Administración
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
LAS FACTURAS ELECTRÓNICAS.COM
2014 Las Facturas Electrónicas.com Gustavo Arizmendi Fernández LAS FACTURAS ELECTRÓNICAS.COM Manual de usuario de Las Facturas Electrónicas.com. INDICE INTRODUCCIÓN... 3 REQUISITOS DEL SISTEMA... 4 HARDWARE...
Scripting en el cliente: Javascript. Tecnologías Web
Scripting en el cliente: Javascript Tecnologías Web Motivación Por qué usar JavaScript? Permite crear efectos atractivos visualmente Permite crear sitios WEB que se visualicen de la misma manera en distintos
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
Comentario sobre el entorno de desarrollo Microsoft Visual Studio 2005 Juan Manuel Lucas
Comentario sobre el entorno de desarrollo Microsoft Visual Studio 2005 Juan Manuel Lucas Introducción El entorno de desarrollo Visual Studio 2005 o 2008 es una potente herramienta desarrollada por Microsoft
Guía para la Automatización de Documentos en. Microsoft Word
UNIVERSIDAD SAN CARLOS DE GUATEMALA CENTRO UNIVERSITARIO DE SAN MARCOS USAC-CUSAM Guía para la Automatización de Documentos en Microsoft Word ID Y ENSEÑAD A TODOS 2015 PRESENTACIÓN El Instituto de Investigaciones
Proceso de Compra de Avisos Clasificados desde Internet
Proceso de Compra de Avisos Clasificados desde Internet Desde mediados de 2010 existe la posibilidad de comprar sus avisos clasificados a través de Internet para los productos impresos del grupo de Vanguardia:
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
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,
10. El entorno de publicación web (Publiweb)
10. El entorno de publicación web (Publiweb) 10.1. Introducción El entorno de publicación Web es una herramienta que permite la gestión de nuestras páginas Web de una forma visual. Algunos ejemplos de
Operación de Microsoft Excel
Representación gráfica de datos Generalidades Excel puede crear gráficos a partir de datos previamente seleccionados en una hoja de cálculo. El usuario puede incrustar un gráfico en una hoja de cálculo,
MANUAL DE USUARIO DE CUENTAS DE CORREO
MANUAL DE USUARIO DE CUENTAS DE CORREO Existen dos formas de consultar el correo, por Interfaz Web (Webmail), la cual se realiza desde un navegador de Internet, o mediante un cliente de Correo, tal como
Í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
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
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
LibreOffice - curso avanzado
LibreOffice - curso avanzado Math Qué es? Math es el editor de fórmulas la suite LibreOffice, que se puede invocar en sus documentos de texto, hojas de cálculo, presentaciones y dibujos, permitiéndole
Programa. Conceptos básicos: variables, valores y objetos predefinidos, operadores, etc. etc. Callbacks, eval(), etc.
Programa Programa 1. Introducción. Repaso HTML-CSS. Orientaciones Generales. 2. Javascript: Qué es? Dónde se ejecuta? Cómo se ejecuta? Conceptos básicos: variables, valores y objetos predefinidos, operadores,
MANUAL TECNICO DE EMAILING BIZBOX
MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos
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
Ejercicio: Mensajes Alert, Confirm y Prompt
Ejercicio: Mensajes Alert, Confirm y Prompt Utilizando Javascript podemos crear tres diferentes tipos de mensajes emergentes que se pueden usar para mostrar información, obtener confirmación u obtener
La única regla que debe de tener presente siempre, es que cada etiqueta que abra <etiqueta> debe de cerrarla en el mismo orden < /etiqueta cerrada>.
Antes de comenzar, si algo no está en este manual, utilice google para averiguarlo y acostúmbrese a ello ya que será la mejor herramienta que pueda encontrar. La estructura básica de toda página web es:
Comisión Nacional de Bancos y Seguros
Comisión Nacional de Bancos y Seguros Manual de Usuario Capturador de Pólizas División de Servicios a Instituciones Financieras Mayo de 2011 2 Contenido 1. Presentación... 3 1.1 Objetivo... 3 2. Descarga
TIPOS DE VARIABLES EN PHP. DECLARACIÓN Y ASIGNACIÓN. LA INSTRUCCIÓN ECHO PARA INSERTAR TEXTO O CÓDIGO. (CU00816B)
APRENDERAPROGRAMAR.COM TIPOS DE VARIABLES EN PHP. DECLARACIÓN Y ASIGNACIÓN. LA INSTRUCCIÓN ECHO PARA INSERTAR TEXTO O CÓDIGO. (CU00816B) Sección: Cursos Categoría: Tutorial básico del programador web:
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
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
CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP
CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP Características del Explorador de Windows El Explorador de Windows es una de las aplicaciones más importantes con las que cuenta Windows. Es una herramienta indispensable
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
Interfaz Web de Correo
Interfaz Web de Correo El acceso Web al correo de la Universidad de Sevilla se hace a través de la URL: https://buzonweb.us.es/correoweb. La primera vez que intentemos acceder a esta dirección seguramente
MANUAL DE USO PARA ESTUDIANTES PLATAFORMA VIRTUAL UNIVERSIDAD TECNOLOGICA INDOAMERICA
MANUAL DE USO PARA ESTUDIANTES PLATAFORMA VIRTUAL UNIVERSIDAD TECNOLOGICA INDOAMERICA A continuación encontrará los pasos para uso de la Plataforma virtual de la Universidad Para ingresar, ingrese al sitio
Manual de ACCESS Intermedio
Manual de ACCESS Intermedio Funciones agregadas (GROUP BY) Las funciones agregadas proporcionan información estadística sobre conjuntos de registros. Por ejemplo, puede usar una función agregada para contar
Manual para usuarios USO DE ONEDRIVE. Universidad Central del Este
Manual para usuarios USO DE ONEDRIVE Universidad Central del Este Contenido 1. QUÉ ES Y PARA QUÉ SIRVE OFFICE 365?... 3 1.1 CÓMO ENTRAR A LA PLATAFORMA DE OFFICE 365 DE LA UCE?... 3 ONEDRIVE... 5 2. QUÉ
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
ESPOCH ESCUELA DE MEDICINA HERNANDEZ MAYRA FORMULAS Y DUNCIONES BASICAS ESPOCH
ESPOCH ESCUELA DE MEDICINA HERNANDEZ MAYRA FORMULAS Y DUNCIONES BASICAS ESPOCH Contenido FORMULAS Y FUNCIONES BASICAS EN EXCEL... 2 1. FÓRMULAS DE EXCEL... 2 1.1 QUÉ SON LAS FÓRMULAS DE EXCEL?... 2 1.2
MANUAL DE NAVEGACIÓN DEL SIIA-WEB versión 1.0. http://148.216.31.29:8080/siia/ PRONAD
MANUAL DE NAVEGACIÓN DEL SIIA-WEB versión 1.0 http://148.216.31.29:8080/siia/ PRONAD II C o n t e n i d o 1 Tabla de contenido C o n t e n i d o... I 1. Bienvenido...III 2. Antes de Comenzar...III 3. Iniciando
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
Que es PHP? Que se puede hacer con PHP? Sintaxis del lenguaje. Variables. Operadores básicos. Condicionales. Ciclos.
Que es PHP? Que se puede hacer con PHP? Sintaxis del lenguaje. Variables. Operadores básicos. Condicionales. Ciclos. Qué es PHP? PHP (Hypertext Preprocessor). Es un lenguaje de programación: De código
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,
Introducción a PHP. * No es necesario declarar previamente las variables.
Introducción a PHP La programación de sitios web cada día está más orientada al desarrollo de páginas dinámicas y aplicaciones, o sea sitios donde el usuario pueda interactuar con la web. Dentro de los
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
Redes de área local: Aplicaciones y servicios WINDOWS
Redes de área local: Aplicaciones y servicios WINDOWS 4. Servidor DNS 1 Índice Definición de Servidor DNS... 3 Instalación del Servidor DNS... 5 Configuración del Servidor DNS... 8 2 Definición de Servidor
Edición de Ofertas Excel Manual de Usuario
Edición de Ofertas Excel Manual de Usuario Alfonso XI, 6 28014 Madrid F(+34) 91 524 03 96 www.omie.es Ref. MU_OfertasExcel.docx Versión 4.0 Fecha: 2012-11-26 ÍNDICE 1 INTRODUCCIÓN 3 2 CONSIDERACIONES DE
Guía N 1: Fundamentos básicos(i)
1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,
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
DOCENTES FORMADORES UGEL 03 PRIMARIA
DOCENTES FORMADORES UGEL 03 PRIMARIA 1. Recursos y Aplicaciones del Servidor La página de inicio del servidor (http://escuela) contiene los enlaces a las aplicaciones instaladas en el servidor, un enlace
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape
Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose
Tablas en HTML. Tipos de celdas. Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web
Tablas en HTML Ing. Tomás Urbina Programación Web y Desarrollo de la Plataforma Web Una tabla HTML puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo
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
Manual de uso de correo por webmail
Manual de uso de correo por webmail Para ingresar a su cuenta de correo vía web; se debe utilizar un Navegador de Internet, entre los más comunes están Internet Explorer, Mozilla Firefox, Google Chrome,
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
Creación y administración de grupos de dominio
Creación y administración de grupos de dominio Contenido Descripción general 1 a los grupos de Windows 2000 2 Tipos y ámbitos de los grupos 5 Grupos integrados y predefinidos en un dominio 7 Estrategia
Sistema de Inscripciones en Línea de la Olimpiada Mexicana de Matemáticas, Delegación Yucatán MANUAL DE USUARIO
Sistema de Inscripciones en Línea de la Olimpiada Mexicana de MANUAL DE USUARIO CONTENIDO 1. Introducción.... 3 2. Ventana Inicial.... 3 3. Registro de un usuario.... 4 4. Iniciar sesión... 6 5. Inscribir
Manual de usuario para Facturación Electrónica 2011
Contenido Manual de usuario Facturación Electrónica.... 2 Requisitos... 2 Registro de usuario.... 2 Inicio de sesión.... 4 Cerrar Sesión.... 4 Mi cuenta.... 5 Datos Personales.... 5 Información Fiscal...
Visual Basic 1. Empleo de módulos y Procedimientos. Procedimientos definidos por el usuario
Empleo de módulos y Procedimientos Procedimientos definidos por el usuario Según lo que hemos visto hasta ahora, Visual Basic, almacena el código en módulos. Hay tres clases de módulos: formularios (.frm),
Autor: Microsoft Licencia: Cita Fuente: Ayuda de Windows
Qué es Recuperación? Recuperación del Panel de control proporciona varias opciones que pueden ayudarle a recuperar el equipo de un error grave. Nota Antes de usar Recuperación, puede probar primero uno
Notas para la instalación de un lector de tarjetas inteligentes.
Notas para la instalación de un lector de tarjetas inteligentes. Índice 0. Obtención de todo lo necesario para la instalación. 3 1. Comprobación del estado del servicio Tarjeta inteligente. 4 2. Instalación
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers
Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3
Contenido. Samayra Niebles Velasquez chamayra@hotmail.com www.insser.net
Contenido MACROS EN MS EXCEL... 1 Objetos, propiedades y métodos... 1 Propiedades... 1 Métodos.... 1 Editor de Visual Basic.... 2 Insertar un nuevo módulo.... 2 Insertar un procedimiento.... 2 Ejecutar
GUIA COMPLEMENTARIA PARA EL USUARIO DE AUTOAUDIT. Versión N 02 Fecha: 2011-Febrero Apartado: Archivos Anexos ARCHIVOS ANEXOS
ARCHIVOS ANEXOS Son los documentos, hojas de cálculo o cualquier archivo que se anexa a las carpetas, subcarpetas, hallazgos u otros formularios de papeles de trabajo. Estos archivos constituyen la evidencia
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,
Manual de Uso XML-Whois de Neubox. Manual del Sistema de XML Whois de Neubox Versión 9.12.4
Manual del Sistema de XML Whois de Neubox Versión 9.12.4 1 Índice Sección Página I. Introducción........ 3 II. Contenido del paquete............ 4 III. Instalación y uso....... 5 1. Cómo comprobar la plantilla......
ALGUNAS AYUDAS PARA EL ACCESO AL AULA DIGITAL Contenido
ALGUNAS AYUDAS PARA EL ACCESO AL AULA DIGITAL Contenido Tabla de contenido 1 INFORMACIÓN PERSONAL... 2 1.1 Cómo ingresar al Aula Digital?... 2 1.2 Qué hacer si olvida su contraseña?... 2 1.3 Qué veo cuando
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:
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
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.
Manual del Profesor Campus Virtual UNIVO
Manual del Profesor Campus Virtual UNIVO Versión 2.0 Universidad de Oriente UNIVO Dirección de Educación a Distancia INDICE 1. Campus Virtual. 03 1.1 Accesos al Curso 04 1.2 Interfaz del Curso...06 1.3
RV FACTURA ELECTRÓNICA WEB
2014 Real Virtual SA de CV Gustavo Arizmendi Fernández RV FACTURA ELECTRÓNICA WEB Manual de usuario de RV Factura Electrónica Web. INDICE INTRODUCCIÓN... 3 REQUISITOS DEL SISTEMA... 4 HARDWARE... 4 SOFTWARE...
Manual de Usuario Módulo de Registro de Vehículos
Introducción. Este manual pretende ser una guía en el uso del Módulo de Registro de Vehículos (MRV). En su contenido podremos observar los aspectos más esenciales para poder utilizar de una manera muy