Copia tal cual el texto de aquí debajo y añádelo en un widget de tipo HTML/Javascript de tu blog.
<div id="torneosMaster"></div>
<link rel="stylesheet" type="text/css" href="http://asesmus.com/torneos/torneos_master.css" />
<script src="http://asesmus.com/torneos/torneos_master.js"></script>
<script type="text/javascript">iniciar();</script>
<link rel="stylesheet" type="text/css" href="http://asesmus.com/torneos/torneos_master.css" />
<script src="http://asesmus.com/torneos/torneos_master.js"></script>
<script type="text/javascript">iniciar();</script>
¡¡Eso es todo lo que hace falta!!.
** actualización mayo-2015: se cambió el alojamiento de estos ficheros. El que figura ahora en asesmus.com es el correcto. El anterior en sites.google.com seguirá funcionando un tiempo pero ya no se actualizarán las versiones por lo que conviene migrar cuanto antes al nuevo sitio **
El lugar donde poner el widget que contenga la aplicación depende del espacio disponible, pero debe funcionar tanto si se pone en una entrada o en una página o en cualquiera de las barras laterales, cabecero o pie. Lo único a tener en cuenta es que vaya a tener espacio suficiente (de ancho) para poder presentar la lista y los torneos.
Si hace falta ajustar el tamaño o alguna otra característica de la presentación se deberá recurrir a retocar a parte CSS del código (en realidad a escribir sentencias CSS que prevalezcan sobre las que aplica el fichero externo CSS).
Si quieres conocer con más detalle lo que hace cada parte del código, está explicado a continuación: se repite de nuevo el código ya visto del script, aunque se separa en sus diversas partes para explicar lo que hace cada una.
Todas estas explicaciones son exclusivamente para quien quiera conocer algo más detalladamente la composición del script, pero en ningún caso son necesarias para utilizarlo.
Las 3 partes en que se divide a continuación (HTML, CSS y JAVASCRIPT) irán todas juntas si se copia y pega el código tal y como se ha indicado, pero no hay ninguna objeción a que se pongan por separado en el caso de que en la web o blog de destino existan ya unas ubicaciones predefinidas para cada uno de estos tipos de código. La única restricción es que la parte HTML quede ubicada en la zona de la página donde se quiera que aparezca la aplicación de torneos, y que las ubicaciones de las partes CSS y JAVASCRIPT aseguren que se ejecuten siempre que se cargue la página.
1.- la parte HTML. Es la que figura arriba del todo, entre etiquetas div
<div id="torneosMaster"></div>
Consta de una simple línea para dar de alta el nombre de la zona donde ubicar la aplicación.2.- la parte CSS. Es la que figura a continuación, con etiqueta link
<link rel="stylesheet" type="text/css" href="http://asesmus.com/torneos/torneos_master.css" />
Es una llamada a un fichero externo que es el que contiene la configuración de formatos de la página. Sabiendo algo de CSS se puede variar cualquier característica estética de la aplicación, aunque deben conocerse los nombres de los identificadores y clases utilizadas para poder cambiarlas.3.- la parte JAVASCRIPT. Es la parte final y está formada a su vez por 2 secciones, cada una de ellas entre etiquetas script
<script src="http://asesmus.com/torneos/torneos_master.js"></script>
El primer script es en realidad una llamada al script externo que contiene todas las funciones necesarias.<script type="text/javascript">iniciar();</script>
El segundo script lanza al cargar la página la función que inicia la presentación: iniciar, que es una de las contenidas en el primer script.PERSONALIZACIÓN
Este script se puede ampliar opcionalmente para recoger una serie de posibles variables iniciales que permiten personalizar algunas características:
- fondo, texto y (fondoOscuro): permiten una adaptación básica de los colores de texto y de fondo de la aplicación.
Admite valores válidos para colores CSS (Ej. 'black', '#ffffff'). Deben ir siempre entre comillas.
Si se cambian, debe verificarse que los nuevos elegidos permitan ver bien todos de la aplicación.
Si no fuera así y se quieran mantener esos colores deberá recurrirse a ajustar otros valores mediante CSS.
Si no se pone alguno de ellos aplican los valores de texto negro ó fondo blanco (¡no los que tenga la web por defecto!)
El parámetro adicional "fondoOscuro" permite cambiar los formatos de los enlaces y algún otro elemento a unos valores alternativos para que se vean mejor sobre fondos oscuros.
- plegado: sirve para presentar la aplicacion incialmente plegada: sale sólo un titulo con el logo de asesmus y del máster y un mensaje, debiendo pulsar sobre ello para que despliegue la lista de torneos. Y permite volver a plegarla pulsando sobre el logo de asesmus.
El valor a poner en la variable es el mensaje que se quiere sacar.
Si no figura esta variable, se inicia ya desplegada y no se puede plegar.
- soloMaster: sirve (si tiene valor 1) para restringir la lista exclusivamente a torneos con plazas Máster. Si se restringe, solo se puede filtrar luego entre plazas directas u opcionales pero nunca ver los que no tengan plaza.
- provincia1 a provincia4: sirven para restringir las provincias (o Comunidades Autónomas) que saldrán en la lista. Se pueden rellenar hasta 4. Si se restringe, solo se puede filtrar luego entre las seleccionadas pero nunca fuera de ellas.
- convocados: sirve para impedir el filtro inicial que se aplica normalmente para ver solo los torneos convocados. Siempre se puede cambiar luego para ver torneos en este u otros estados.
- mesCercano: sirve para impedir el filtro inicial que se aplica normalmente para ver solo los torneos de fecha cercana (fecha de inicio en el mes actual, anterior o siguiente). Siempre se puede cambiar luego para ver torneos en estos u otros meses.
- editar: sirve para funcionar en modo de solo lectura (poniendo editar con valor 0 ó vacío o si falta), o bien en modo de edición (con otros valores) en el que se activarán los enlaces para crear nuevos torneos y para modificar los existentes a los que se esté autorizado.
Para ello hace falta disponer de una clave de edición autorizada que debe ser facilitada por un administrador de asesmus. Si se pone una clave no autorizada, puede que salgan los enlaces pero los formularios que se emitan desde esa web serán rechazados.
Además, si se trata de una clave "especial" permite identificar la URL donde se aloje la aplicación como un sitio válido para acceder a enviar formularios, lo que implica no sólo que se puedan enviar, sino que los links del correo que informe de los accesos para el torneo creado/modificado apuntarán a la página desde la que se hizo en lugar de apuntar a la URL de defecto (en principio http://torneosmaster.blogspot.com).
A continuación puedes ver un ejemplo de cómo podría quedar este script completo añadiendo todas estas variables junto con sus explicaciones de uso a modo de comentarios.
Todo esto sustituiría a la última línea del script visto arriba y su ventaja es que quedaría accesible en el blog de destino para poder realizar los cambios de configuración necesarios sin tener que volver a consultar la documentación.
Los nombres de las variables tienen todas el prefijo tM. para evitar colisionar con otras posibles variables globales de la página. Para activar cualquiera de ellas se deben borrar las 2 barras que la preceden ("//") y poner tras el signo "=" el valor adecuado que se desee. Pero esto es mejor copiarlo entero tal cual y hacer luego los cambios ya en el destino.
<script type="text/javascript">
/* quitar las 2 barras // delante de parámetros a activar
llevan prefijo tM. para evitar colisiones */
/* ------- fondo y texto -----------
permiten personalizar los colores de texto y de fondo
los valores deben ir siempre entre comillas
y ser válidos para colores CSS (Ej. 'black', '#ffffff')
poner fondoOscuro a true si es necesario
(cambia los enlaces y algunos elementos para verlos mejor)
------------------------------------ */
//tM.fondo = 'white';
//tM.texto = 'black';
//tM.fondoOscuro = true;
/* ------- plegado -------------
permite iniciar con la aplicación plegada
muestra solo logos y mensaje pero no abre
la aplicacion hasta que se pica sobre el cabecero
el valor a poner es el mensaje que se quiere sacar
si no hay plegado (valor false o no existe)
no se permite luego plegar/desplegar
------------------------------------ */
//tM.plegado = 'pica aquí para consultar los torneos del Máster';
/* ------- soloMaster -------------
si vale 1 saca solo torneos con plazas Máster
luego se puede filtrar entre directas y opcionales
pero nunca ver los que no tengan plaza máster
------------------------------------ */
//tM.soloMaster = 1;
/* ------- provincias -------------
admite restringir las provincias o comunidades a ver
pueden ponerse hasta 4, se combinan con OR
(vale que coincida con cualquiera de las 4)
deben estar escritas exactamente igual que en la lista
luego se puede filtrar entre estas provincias
pero nunca fuera de ellas
------------------------------------ */
//tM.provincia1 = 'Castilla y León';
//tM.provincia2 = 'Castilla-La Mancha';
//tM.provincia3 = '';
//tM.provincia4 = '';
/* ------- convocados -------------
por defecto muestra inicialmente solo torneos convocados
salvo que este parámetro se ponga con valor false
siempre se puede filtrar luego por este u otros estados
------------------------------------ */
//tM.convocados = false;
/* ------- mesCercano -------------
por defecto muestra inicialmente torneos de fecha cercana
(fecha de inicio en mes actual, anterior o siguiente)
salvo que este parámetro se ponga con valor false
siempre se puede filtrar luego por estos u otros meses
------------------------------------ */
//tM.mesCercano = false;
/* ------- editar -------------
0 ó vacío ó falta: no saca enlaces crear/editar
otros valores no autorizados: pueden sacar enlaces pero sus formularios serán rechazados
valores autorizados: sacan enlaces de crear/editar
valores autorizados "especiales": además fuerzan links de acceso a la web de origen
------------------------------------ */
tM.editar = '12345';
iniciar(); // obligatorio
</script>
/* quitar las 2 barras // delante de parámetros a activar
llevan prefijo tM. para evitar colisiones */
/* ------- fondo y texto -----------
permiten personalizar los colores de texto y de fondo
los valores deben ir siempre entre comillas
y ser válidos para colores CSS (Ej. 'black', '#ffffff')
poner fondoOscuro a true si es necesario
(cambia los enlaces y algunos elementos para verlos mejor)
------------------------------------ */
//tM.fondo = 'white';
//tM.texto = 'black';
//tM.fondoOscuro = true;
/* ------- plegado -------------
permite iniciar con la aplicación plegada
muestra solo logos y mensaje pero no abre
la aplicacion hasta que se pica sobre el cabecero
el valor a poner es el mensaje que se quiere sacar
si no hay plegado (valor false o no existe)
no se permite luego plegar/desplegar
------------------------------------ */
//tM.plegado = 'pica aquí para consultar los torneos del Máster';
/* ------- soloMaster -------------
si vale 1 saca solo torneos con plazas Máster
luego se puede filtrar entre directas y opcionales
pero nunca ver los que no tengan plaza máster
------------------------------------ */
//tM.soloMaster = 1;
/* ------- provincias -------------
admite restringir las provincias o comunidades a ver
pueden ponerse hasta 4, se combinan con OR
(vale que coincida con cualquiera de las 4)
deben estar escritas exactamente igual que en la lista
luego se puede filtrar entre estas provincias
pero nunca fuera de ellas
------------------------------------ */
//tM.provincia1 = 'Castilla y León';
//tM.provincia2 = 'Castilla-La Mancha';
//tM.provincia3 = '';
//tM.provincia4 = '';
/* ------- convocados -------------
por defecto muestra inicialmente solo torneos convocados
salvo que este parámetro se ponga con valor false
siempre se puede filtrar luego por este u otros estados
------------------------------------ */
//tM.convocados = false;
/* ------- mesCercano -------------
por defecto muestra inicialmente torneos de fecha cercana
(fecha de inicio en mes actual, anterior o siguiente)
salvo que este parámetro se ponga con valor false
siempre se puede filtrar luego por estos u otros meses
------------------------------------ */
//tM.mesCercano = false;
/* ------- editar -------------
0 ó vacío ó falta: no saca enlaces crear/editar
otros valores no autorizados: pueden sacar enlaces pero sus formularios serán rechazados
valores autorizados: sacan enlaces de crear/editar
valores autorizados "especiales": además fuerzan links de acceso a la web de origen
------------------------------------ */
tM.editar = '12345';
iniciar(); // obligatorio
</script>
No hay comentarios:
Publicar un comentario