Vamos a necesitar cuatro ficheros

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Vamos a necesitar cuatro ficheros"

Rodrigo Palma Espejo
hace 8 años
Vistas:

1 En esta guía se describen las instrucciones para usar el programa "programa.js" que nos permite: Incluir una frase de saludo que se adapta automáticamente a la hora del día y que incluye la fecha y hora actuales. Incluir un icono con la meteorología actual Hacer un menú con los apartados de la página, de forma que al pulsar sobre uno de los cuadros, aparece ese apartado. Hacer un menú de las imágenes presentes en formato reducido de forma que al pulsar sobre uno de los iconos aparece la foto correspondiente en tamaño grande Vamos a ver lo que tenemos que hacer para cada una de estas posibilidades. En concreto vamos a ver un apartado para cada uno de los siguientes casos: Lo que hay que hacer siempre: preparación básica de ficheros poner un saludo NO poner un saludo poner el icono con la meteorología NO poner el icono de meteorología hacer aparecer los apartados desde un menú hacer aparecer imágenes desde un menú de iconos reducidos NO poner ningún menú Ficheros Ficherosque quenecesitamos necesitamos Vamos a necesitar cuatro ficheros )Por supuesto, la página Web, en la que tendremos que hacer algunos cambios que comentaremos. )El fichero "jquery-.6..min.js" éste nunca se tocará en nada. Le copiamos siempre tal cual )"programa.js" Aquí es donde están todas las instrucciones. Haremos una copia del fichero que nos dan y cambiaremos según lo que queramos )"js.css" Aquí están los estilos (colores, etc.) que se usan. Haremos una copia del fichero que nos dan y podremos hacer cambios

Incluir un icono con la meteorología actual Hacer un menú con los apartados de la página, de forma que al pulsar sobre uno de los cuadros, aparece ese apartado.

Los tres últimos ficheros se nos proporcionan y tendremos que copiarlos donde esté nuestra página. Los nombres de los dos últimos podremos cambiarlos, indicando donde comentaremos los nuevos nombres.

2 Los tres últimos ficheros se nos proporcionan y tendremos que copiarlos donde esté nuestra página. Los nombres de los dos últimos podremos cambiarlos, indicando donde comentaremos los nuevos nombres. Eso lo haremos cuando tengamos varias páginas y queramos instrucciones distintas en cada una. Cambios que habrá que hacer siempre, para cualquiera de los casos, en nuestra página Web En la parte entre <head> y </head> (en cualquier sitio entre esas etiquetas) pondremos las siguientes líneas: cambiado el nombre a los ficheros En la etiqueta body añadiremos el siguiente atributo onload <body onload="prepara()" poner unsaludo saludoautomático automático La zona de la página donde queramos que aparezca el saludo estará marcada con las siguientes etiquetas: <div id="titulares"> Aquí podemos poner lo que queramos. El saludo aparecerá antes de ello. En "js.css" (o como lo hayamos llamado). Buscaremos el apartado que está marcado con.cabecera y allí podremos elegir la apariencia con la que queramos que salga el texto.cabecera { font family: serif; font weight: normal; font size: 00%; color: green; background: lime

Cambios que habrá que hacer siempre, para cualquiera de los casos, en nuestra página Web En la parte entre <head> y </head> (en cualquier sitio entre esas etiquetas) pondremos las siguientes líneas:

3 Tipo de letra: serif (tipo Times New Roman),sans serif (tipo Arial), cursive (tipo Comic Sans), fantasy (tipo Impact),monospace (tipo Courier New). Grosor de las letras: normal o bold Tamaño: porcentaje respecto al tamaño normal Color de letra y fondo: Buscaremos function saludos y allí podremos cambiar el tipo de saludo function saludos() { var ahora = new Date(); var hora = ahora.gethours(); var saludo; if (hora>= 7 && hora <= ) { saludo="buenos días"; else if (hora > && hora <= ) { saludo="buenas tardes"; else { 5 saludo="buenas noches" saludo += ", es "+ahora.tolocalestring(); $("#titulares").prepend("<p class='cabecera'>"+saludo); 6 Aquí marcamos las horas entre las que queremos saludo de mañana Aquí ponemos el saludo que queremos de mañana Aquí ponemos las horas entre las que queremos saludo de tarde Aquí ponemos el saludo de tarde 6 Si no queremos la fecha y la hora, borramos esta línea 5 Aquí ponemos el saludo de noche NO NOponer unsaludo saludo Buscaremos la línea que pone sólo saludos() y la borraremos

4 poner unicono iconocon conla lameteorología meteorología actual actual El sitio donde lo pone es el mismo que el saludo. Si ya hemos preparado el saludo, ya está. Si no, la zona de la página donde queramos que aparezca el saludo estará marcada con las siguientes etiquetas: <div id="titulares"> Aquí podemos poner lo que queramos. El icono aparecerá a un lado. En "js.css" (o como lo hayamos llamado) Buscaremos el apartado que está marcado con.mini y allí podremos elegir dónde queremos que salga el icono.mini{float: right Pondremos right (a la derecha), left (a la izquierda) ó none (al principio de la etiqueta) NO NOponer unicono iconocon conla lameteorología meteorología Buscaremos la línea que pone sólo pronóstico() y la borraremos

El icono aparecerá a un lado. En "js.css" (o como lo hayamos llamado) Buscaremos el apartado que está marcado con.mini y allí podremos elegir dónde queremos que salga el icono.

5 poner unmenú menúpara paramandar mandaraparecer apareceraalos los apartados apartados A cada apartado de la página le pondremos una etiqueta div (se abre antes y se cierra al final) de la clase seccion. Así: <div class="seccion"> Aquí va el apartado. Lo que sea. Al conjunto de todos los apartados le pondremos una etiqueta div (se abre antes y se cierra al final) de la clase contenido. Al final de este div es donde aparecerá el menú. Así: <div class="contenido"> Aquí van todos los apartados. Cada uno con su div de clase seccion. Buscaremos la indicación: Aquí se puede cambiar la apariencia del menú de apartados. Cerca está también la de Aquí se puede cambiar la colocación del menú //Aquí se puede cambiar la apariencia del menú de apartados copias.css({width:"00",height:"0",fontsize:"50%",border:"5px solid"); copias.removeclass("seccion"); else { copias.removeclass("imagen"); //Aquí se puede cambiar el tamaño de las imágenes en pequeño copias.children("img").attr("width","0","height","0"); //Aquí se puede cambiar la colocación del menú copias.css({overflow:"hidden",float:"left"); Ahí podemos cambiar respectivamente el ancho y alto (en píxels) del cuadro que pone para activar cada apartado Ahí podemos cambiar el tamaño (en porcentaje) del texto que pone en los cuadros Ahí podemos cambiar el ancho del borde que pone en los cuadros de menú y su tipo. Puede ser none (sin borde), solid (borde normal), dotted (de puntos), dashed (línea discontinua), double (doble línea), ridge (relieve aparente) o outset (otro tipo de relieve aparente) Ahí podemos cambiar a qué lado queremos que se agrupe el menú: left (a la izquierda) o right (a la derecha)

Al final de este div es donde aparecerá el menú. Así: <div class="contenido"> Aquí van todos los apartados. Cada uno con su div de clase seccion.

Luego podemos cambiar la forma en que los apartados aparecen y desaparecen (cuando pedimos otro) Buscamos la indicación Aquí podemos cambiar como aparece Si no queremos que aparezca cambiando de

6 Luego podemos cambiar la forma en que los apartados aparecen y desaparecen (cuando pedimos otro) Buscamos la indicación Aquí podemos cambiar como aparece Si no queremos que aparezca cambiando de transparente a opaco quitaremos lo marcado en rojo Si no queremos que aparezca moviéndose, quitaremos lo marcado en amarillo Si queremos que se mueva no desde arriba, sino desde la izquierda, cambiaremos top por left Si queremos que la aparición sea más lenta o más rápida cambiaremos los números que van detrás de duration a valores mayores o menores Si queremos que aparezca sin más, sin ninguna transición, dejaremos sólo la línea que pone vista[nivel].show(); y las otras las borraremos cambiar el modo de desaparición buscaremos la indicación Aquí podemos cambiar cómo desaparece Si queremos que desaparezca no hacia arriba, sino hacia la izquierda, cambiaremos top por left Si queremos que desaparezca sólo por transparencia, sin moverse, quitaremos la parte marcada en rojo Si queremos que desaparezca moviéndose, sin cambiar la transparencia, quitaremos la parte marcada en amarillo Si queremos que desaparezca sin más, quitaremos todo entre la línea de if y la de else y pondremos en su lugar cambia(indicador,nivel) poner unmenú menúcon conimágenes imágenesen enpequeño pequeñoyy hacerlas hacerlasaparecer apareceren entamaño tamañogrande grande Marcaremos cada imagen poniendole un atributo clase con el valor imagen. Así: <img class= imagen

cambiaremos top por left Si queremos que la aparición sea más lenta o más rápida cambiaremos los números que van detrás de duration a valores mayores o menores Si queremos que aparezca sin más, sin

Agruparemos todas las imágenes que queremos que entren al menú dentro de un div de la clase contenido. Al final de este div es donde aparecerá el menú.

7 Agruparemos todas las imágenes que queremos que entren al menú dentro de un div de la clase contenido. Al final de este div es donde aparecerá el menú. Así <div class= contenido > Aquí irán las imágenes y puede haber otras cosas que no se minimizarán ni entrarán al juego de aparecer/desaparecer Al final del div se pondrán las imágenes pequeñas de menú Buscaremos la indicación: Aquí se puede cambiar el tamaño de las imágenes. Cerca está tambi en a de Aquí se puede cambiar la colocación del menú, que es común para las imágenes y para los apartados. //Aquí se puede cambiar el tamaño de las imágenes en pequeño copias.children("img").attr("width","0","height","0"); //Aquí se puede cambiar la colocación del menú copias.css({overflow:"hidden",float:"left"); Ahí podemos cambiar respectivamente el ancho y alto (en píxels) de las imágenes reducidas Ahí podemos cambiar a qué lado queremos que se agrupe el menú: left (a la izquierda) o right (a la derecha) La aparición y desaparición de imágenes usa las mismas instrucciones que el menú de apartados. Está explicado al final del menú de apartados. NO NOponer ponermenús menúsde deningún ningúntipo tipopara paraque que aparezca aparezcani nidesaparezca desaparezcanada nada Buscamos la línea que pone menu($ body ) y la borramos

menú Buscaremos la indicación: Aquí se puede cambiar el tamaño de las imágenes.

Documentos relacionados

Textos 3D con Inkscape

Textos 3D con Inkscape Para diseñar textos con profundidad y efectos 3D no siempre hace falta recurrir a programas como Blender 3D. Aunque la forma de trabajar sea muy distinta, Inkscape incluye algunos