Agregando Tooltips de Twitter Bootstrap al calendario de WordPress

Posted on octubre 10, 2012 by fitorec

Ejemplo Calendario con tooltip de twitterBoostrap

El Twitter Boostrap trae integrado en su sección de javascript un plugin de JQuery (el ToolTip) el cual resulta muy útil e interesante a la hora de mostrar información extra sobre algún elemento o enlace de nuestro sitio.

Por otra parte WordPress nos proporciona un calendario que nos muestra los posts por fecha, el código html del calendario que nos interesa es básicamente este:

 
<table id="wp-calendar">
..
<td>
<a href="url" title="descripcion detallada">num día</a>
</td>
...
</table>

Conociendo el código HTML al que queremos acceder podemos acceder a estos elementos y agregarle el tooltip, como se muestra a continuación:

/** Le agregamos el toolTip a los elementos que nos interesan **/
$('#wp-calendar').find('td a').tooltip();

Queda a reflexión del lector por que use $('#wp-calendar').find('td a') en lugar de $('#wp-calendar td a').

Ejemplo Manejo de eventos con Javascript & Mootools – Teclado

Posted on agosto 24, 2011 by fitorec

: Vegeta movimiento con el evento del teclado

Hace un par de meses que di mi taller Mootools en la academia de software libre, uno de los ejemplos que di fue el de manejo de eventos con el teclado, aqui programe un monito que se mueve y que dejo pendiente el código para en un futuro hacer algún game.

Codigo & ejemplo en linea: <http://vivoenhuajuapan.com/eventos-teclado-ejemplo/>

Mapa de México con SVG y Javascript empotrado en HTML

Posted on abril 11, 2011 by fitorec

ejemplo_mexico_mapa_svg_javascript

Para hacer un mapa dinamico en un sitio web las opciones son las siguientes:

Canvas
SVG
VML

(Descartando flex, apples y silverlight ya q no son crossbrowsers ) de estas opciones la que mas me gusta son las canvas, sin embargo en esta ocasión tras leer un articulo de opera y la comparativa de estas tecnologías decidir ocupar SVG, sin mas dejo la liga en donde puedes descargar el ejemplo y su respectivo código fuente:

Este post ha sido actualizado y movido a la siguiente dirección:

http://fitorec.github.com/manual_mapas_svg_raphael/

fCalendar

Posted on marzo 21, 2011 by fitorec

fCalendar Ejemplos: izquierda simple controles externos, Derecha eventos y configuración personalizada.

Desde hace un tiempo estoy desarrollando una aplicación, para organizar procesos de un desarrollo web en un equipo multi-disciplinario, como es de esperarse la calendarización de actividades y la comunicación entre el equipo de trabajo es sumamente vital.

Por otra parte en algunas ocasiones trabajo con Mootools y en otras con Jquery dependiendo del proyecto(si es solución empotrada, del framework, cms blog a utilizar, etc), y en ocasiones e tenido uno que otro conflicto por la incompatibilidad de FrameWorks en Javascript he incluso entre versiones del mismo.

Y fue asi como empecé desarrollar el fCalendar un calendario básico en javascript y CSS. ¡¡Vale!! ya se que existen otros, sin embargo creo que el fCalendar tiene características muy útiles:

Principales características

Ligero
- No usa ni descarga imagenes encambio implementa técnicas de CSS3, webkit y moz
- Tiene una implementación de control de eventos que no sobre carga el DOM
- La libreria principal fcalendar.js sólo pesa 7.5kb
Multi idiomas
- Versión en español fcal-lang-es.js
- Versión en ingles fcal-lang-en.js
- Futuras versiones: Frances, Portuges, Aleman.
- Futuras variantes lingüísticas (ar-es, mx-es, uk-en, us-en).
Compatibilidad
- Emplea unicamente javascript apegado la mayor parte al ECMAScript ISO 16262
- No redefine ningun prototypo de DOM
- Compatible con cualquier frameWork
- CrossBrowser (probado con firefox, opera, chromium, safari)
Eventos y Controles
- Su manejador de eventos nos permite incorporarlos al vuelo
- El usuario tiene control pleno sobre Estos eventos
- Al poder usarse con frameWorks lo podemos combinar, facilmente
Multiplantillas incorporadas
- dark(Actualmente la unica, L0L)
- blue
- orange
- white

Por el momento no se donde hospedar el proyecto, si embargo usted puede acceder al proyecto desde: http://vivoenhuajuapan.com/calendario/

MooRainBow un pickcolor para Mootools

Posted on marzo 18, 2011 by fitorec

El MooRainBow es un excelente pickColor el cual viene integrado en herramientas como el phpMyAdmin(http://www.phpmyadmin.net), hace poco empecé a desarrollar en mis tiempos libres una plantilla para dicho sistema y fue asi como conocí este complemento de mooTools, hoy que quería agregar este complemento a un sistema que estoy desarrollando me encontre con los siguientes conflictos:

la versión de mootools que estoy ocupando en el proyecto es la 1.3.

La versión 1.2b1 de MooRainBow (la que viene en phpMyAdmin) no es compatible con mooTools 1.3.

Por otra parte la versión 1.2b2, la más reciente de de MooRainBow elimina el campo MooRainbow::options.selectText (ver linea 23 de la versión 1.2b1), imposibilita la capacidad de configurar el mensaje del «botón de seleccionar color» lo cual hace que aparezca siempre como: lo cual puede llegar a ser incomodo para sitios en donde los usuarios no estan tan familiarizados con la lengua inglesa.

Creo que la mejor solución es agarrar la versión mas reciente(1.2b2) y agregarle el campo MooRainbow::options.selectText, esto es:

1- Agregar selectText

Hay que agregar la propiedad selectText en MooRainbow::options

options: {
id: 'mooRainbow',
/* los demas parámetros */
onChange: $empty, //a este ultimo le agregamos una coma
selectText: 'Select' //agregamos selectText con el valor por defecto 'Select'
},

2.- Agregando el texto al boton.

El boton de aceptar internamente en el código es cread por una función «privada» llamada ok la cual devuelve un boton con el texto incrustado como ‘value’: ‘Select’ (linea 508 aprox).

'value': this.options.selectText,

usandolo

Guardo estas modificaciones como mooRainbow.1.2b3.js y teniendo la siguiente estructura de archivos:

.
|-- css
|   |-- mooRainbow.css
|   `-- mooRainbowMini.css
|-- img
|   |-- blank.gif
|   |-- color_swatch.png
|   |-- color_wheel.png
|   |-- moor_arrows.gif
|   |-- moor_boverlay.png
|   |-- moor_cursor.gif
|   |-- moor_slider.png
|   `-- moor_woverlay.png
|-- index.html
|-- mooRainbow.1.2b3.js
`-- mootools-more-1.3.1.1.js

Agregando las librerías y hojas de estilo:

Del more de mootools se agrega el objeto Color y el Drag.

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools.js"></script>

<script src="mootools-more-1.3.1.1.js"></script>

<script language="Javascript"  type="text/javascript" src="mooRainbow.1.2b3.js"></script>
<link rel="stylesheet" type="text/css" href="css/mooRainbow.css" />
<link rel="stylesheet" type="text/css" href="css/mooRainbowMini.css" />

Creando los objetos los objetos Rainbow:

En el domready creamos los objetos Rainbow configurando sus parametros como el mensaje selectText y sus funciones a controlar sus eventos.

var r = new MooRainbow('bg_color_rainbow', {
'startColor': [00, 166, 188],
'imgPath': 'img/',
'selectText' : 'Seleccionar color',
'onChange': function(color) {
$('bg_demo').setStyle('background', ( $('mi_input').value = color.hex ));
},
}); 

var m = new MooRainbow('color2', {
//'imgPath': 'js/mooRainbow/img/',
//'imgPath': 'images',
id: 'mooRainBowMini',
'onChange': function(c) {
$('color2').setStyle('background', c.hex);
$('mi_input2').setStyle('background', c.hex);
document.body.getElement('h1').setStyle('color', c.hex);
}
});

Generamos el siguiente código html implicado(para este ejemplo) en los eventos

<h1 style='font-size: 25px;'>Selector de color con MooRainBow</h1>

<form>
<img id="bg_color_rainbow" src="img/color_wheel.png" alt="[r]" width="16" height="16" />
<input id='mi_input' value='#00A6BC'>
<br>
<img id="color2" src="img/color_swatch.png" alt="[r]" width="16" height="16" />

<input id='mi_input2' size='3'>

</form>

Resultado

MooRainBow 1.2.b3 funcionando con Mootools 1.3.1

Descargar Código: mooRainbow.1.2b3.js.tar.gz

Creando un Buscador para Mozilla Firefox con OpenSearch

Posted on agosto 14, 2009 by fitorec

Normalmente cuando queremos realizar una búsqueda en alguna página para esto lo que hacemos es que primero introducimos la dirección de dicha pagina a nuestro navegador y posteriormente que cargue realizamos nuestra búsqueda y por ultimo nos esperamos a que nos devuelva el resultado, en cambio este proceso se reduce a la mitad si en cambio realizamos nuestra búsqueda desde los motores de búsqueda incluidos en el Firefox.

En general existen multiples buscadores creados por las compañias de busquedas p.e. google, yahoo, amazon, etc.. en la siguient liga podras agregar algunos a tu firefox.

https://addons.mozilla.org/en-US/firefox/browse/type:4/cat:all?sort=name

Sin embargo falta el nuestro hace apenas algunos días que hemos estado desarrollando la página de mundosica.com me puse a desarrollar un buscador para el Firefox.

Aquí en esta entrada expongo mi experiencia en el desarrollo de esta simple pero potente herramienta que nos ayuda mucho a reducir el tráfico.

buscador OpenSearch mundosica.com

Indice:

1. Generar nuestro archivo con especificación OpenSearch

2. Insertando el vinculo de instalación.

3.- Poniendo refenrencia de nuestro buscador en la cabecera del sitio.

Paso 1.- Generar nuestro archivo con especificación OpenSearch:

OpenSearch expecificación

OpenSearch es un conjunto de formatos simples para el intercambio de resultados de búsqueda.

El documento de descripción OpenSearch formato se puede utilizar para describir un motor de búsqueda a fin de que pueda ser utilizada por las aplicaciones cliente de búsqueda (en nuestro Caso El firefox).

La respuesta OpenSearch elementos se pueden utilizar para ampliar los formatos de sindicación, como RSS y Atom, con el extra de metadatos necesarios para devolver los resultados de la búsqueda.

Para realizar esto nos basamos en el ejemplo de la siguente liga:

http://www.opensearch.org/Specifications/OpenSearch/1.1#Examples

Regresar al Indice

De este ejemplo gener el siguiente archivo: http://mundosica.com/openSearchSICA.xml



 	 Buscador para Mozilla-Firefox code basado en la doc. de .opensearch.or

Como podemos ver existen algunos camops importantes tales como:

Los parámetros simples son:

ShortName : Nombre abreviado de nuestro buscador
LongName   : Nombre de nuestro buscador.
Description: una descripción breve de nuestro buscador.
Contact    : Nuestro contacto como desarrollador.
Developer : Nuestro contacto como desarrolladores
Attribution: Licencia
Language   : idioma es-mx para México
OutPutEncoding: Codificación de texto que genera como resultado nuestro sitio.
IntPutEncoding: Codificación de texto que recibe como entrada nuestro sitio.

Para los campos de URL
Para type=»text/html» aquí ponemos la dirección que responde cuando le enviamos una consulta en nuestro caso.

http://mundosica.com/09/index.php?searchword={searchTerms}&ordering=&searchphrase=all&option=com_search
Nota: {searchTerms} es la consulta que le estamos enviando a nuestro sitio.
Por ejemplo si queremos hacer un openSearch para google solo pondriamos:
http://www.google.com.mx/search?q={searchTerms}
Pues si queremos buscar por ejemplo fitorec en google basta con acceder a la url:
http://www.google.com.mx/search?q=fitorec

Para los campos Image
Son las imágenes de 64 y 16 pixeles y llevan la ruta absoluta(URL) de las imagenes respectivamente (estas pueden ser png, gif, jpg,etc..).

si quieres tener la imagen como datos en el archivo xml esta herramienta te ayudara mucho.

http://software.hixie.ch/utilities/cgi/data/data

Al cual le mandamos una imagen de 16×16 (de nuestra maquina o una URL) la cual queremos que sea nuestro icono y nos devuelve los datos en la barra URL del navegador.

Para mayor referencia ir al sitio oficial (esta en ingles):

	Omar Estrada Ramirez en wget con un ejemplo descargand…
	ccsalazard en Cargando distintos archivos .E…
	ccsalazard en Cargando distintos archivos .E…
	ccsalazard en Cargando distintos archivos .E…
	herwin en Mapa de México con SVG y Javas…