Agregando Tooltips de Twitter Bootstrap al calendario de WordPress

Ejemplo Calendario con tooltip de twitterBoostrap

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').

Anuncios

Ejemplo Manejo de eventos con Javascript & Mootools – Teclado

Vegeta movimiento con el evento del teclado
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

ejemplo_mexico_mapa_svg_javascript

ejemplo_mexico_mapa_svg_javascript

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

(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

fCalendar vista de pruebas

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

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

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

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

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

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}&amp;ordering=&amp;searchphrase=all&amp;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):

http://www.opensearch.org

Regresar al Indice

Paso 2 .- Insertando el vinculo de instalación.

Para esto nos basamos en una funcion en JavaScript la cual permite agregar un openSearch la documentación adecuada esta en el sitio oficial de firefox pongo la liga.

https://developer.mozilla.org/en/Adding_search_engines_from_web_pages

Este script debera ir en nuestra pagina web les recomiendo que se ponga entre las etiquetas head para que cargue la funcion antes que del boton la manda a llamar.

veamos el script.

IInstalador del openwebSearch en javascript

Instalador del openwebSearch en javascript

Nota: las URL que se le ponga a la funcion addSearchEngine deberan ser absolutas p.e. http://misitio.com/ruta-absoluta/file.xml

Ahora solo es necesario poner la llamada en la funcion a algun evento del usuario p.e. cuando le da click a una imagen, veamos como seria esto:


imagen con accion al instalador

codigo imagen con accion al instalador

Regresar al Indice

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

Aunque en este momento ya es complemente funcional nuestro buscador, y desde un boton el usurio instalar en ocaciones no queremos poner mas botones en nuestro sitio o si lo que queremos es que el firefox se de cuenta que en nuestro sitio si es que existe una aplicacion para instalar como se puedeen el la siguiente imagen.

Instalacion desde el administrador de buscadores Firefox

Instalacion desde el administrador de buscadores Firefox

Para que el FireFox identifique los elementos instalables en nuestro sitio tenemos que incruir dicha informacion en nuestra página esto lo realizamos poniendo el siguiente codigo en la cabecera (<head> </head>) de nuestro sitio.


Codigo para que el navegador detecte el buscador

Codigo para que el navegador detecte el buscador

Nota: el parametro href lo debemos cambiar de igual forma por la ruta absoluta en donde se encuentra nuestro archivo xml al igual que el title por el titulo de nuestro buscador.

Realmente espero que esto le sirva a alguien, es por esto que subi el codigo en un archivo comprimido para la descarga directa desde la pagina de mundosica.com.

Deseo mejorar el mundo pero todavia no tengo su codigo fuente!.
Regresar al Indice

Los Mejores FrameWorks en JavaScript

Existen múltiples FrameWorks en JavaScript muchos de ellos muy buenos y de código abierto otros no tan libres pero de igual forma muy buenos y algunos cuantos muy buenos de licencia libre pero promovidos por grandes corporaciones como google o yahoo.

No olvidemos que no hace mucho tiempo se tenia que pagar por utilizar componentes sencillos en javascript pero afortunadamente de la mano del movimiento de SL se inicio a generar un conjunto de librerías de usuarios las cuales se compartían de pronto el conjunto de estas librerías y paquetes formaron lo que conocemos como frameWorks. Y con esto muchas personas resultaron beneficiados de estos códigos reutilizables.

Hoy en día cada vez son mas personas las cuales nos unimos a estas formas de reutilizar a tal grado que las compañías grandes han liberado una serie de elementos.

Con la llegada del web 2.0 y lo que conocemos como  AJAX, javascript esta mas que presentes en nuestros navegadores y con la llegada de los FrameWorks para Javascripts, en la actualidad el desarrollo es mas dinámico  pues basta con llamar un conjunto de elementos objetos como controles, widgets, etc.. y en pocos minutos tenemos una aplicación web del tipo RIA (Rich Internet applications).

Sin mas veremos algunos y analizaremos características:

INDICE:

0.- mootools
1.- moofx
2.- meteora
3.- jquery
4.- mochikit
5.- dojo
6.- clean
7. rialto
8. QooxDoo
9. script.aculo
10. ExtJS
11. ZK
12. Cappuccino
13. YUI
14. Google Web Toolkit
15. Spry

0.- MooTools.

Mootools

Mootools

MooTools es un FrameWork, modular, Orientado a Objetos, diseñado para el nivel intermedio y avanzado de JavaScript. Le permite escribir poderoso, flexible y transversal del navegador de código, ademas de tener una elegante y bien documentada API.

Licencia:  tipo MIT Licence.

LINKS: Sitio Demos Descargar

Regresar al Indice

1.- Moo.FX

moo.fx

moo.fx

Heredero(literalmente) de Mootools es un libreria ultra ligera la cual es completamente compatible con mootools y protype, si en tu sitio quieres solo un par de efectos en javascript y quieres que permanesca ligero, moo.fx es una muy buena opción.

Licencia:  tipo MIT Licence.

LINK: Sitio

Regresar al Indice

Meteora.

meteora

meteora

Otro hijito de MooTools (versión 1.2) el cual pretende ofrecer Widgets ya con controles ya listos para usarse en aplicaciones web.

Licencia:  tipo MIT Licence.

URLS: Sitio Demos Descargar

Regresar al Indice

jQuery

jQuerry

jQuerry

jQuery es también uno de los mas útiles y populares FrameWork que existen en la web, sus mayores características es que es rápida y consista, nos permite generar eventos con AJAX, es tan famoso y poderoso este FrameWork que CMS como WordPress hacen uso de el.

Licencia:  MIT y GPL.

URLS: Sitio Demos Descarga

Regresar al Indice

MochiKit

MochiKit

MochiKit

MochiKit es una muy bien documentada y probada, conjunto de bibliotecas de JavaScript que le ayudará a crear de forma rápida aplicaciones web. En su sitio nos dicen que han tomado todas las buenas ideas y experiencia que podemos encontrar en Python, Objective-C, etc para adaptarla a el mundo loco de Javascript.

Licencia:  tipo MIT Licence.

URLS:

Sitio Demos Descargas

Regresar al Indice


Dojo

dojo

dojo

Dojo es un FrameWork en JavaScript el cual te permite añadir características dinámicas fácilmente a las páginas Web. Puedes utilizar los componentes que incorpora Dojo para mejorar la usabilidad y funcionabilidad. Puedes construir interfaces con degradados de color, widges y transacciones animadas de forma rápida y sencilla. También puedes usar el API de bajo nivel y capas compatibles para escribir scripts portables y simplificar aquellos que son complejos.

Licencia:  tipo LGPL

URLS: Sitio Demos Descargas

Regresar al Indice

CLEAN

Clean

Clean

Clean-ajax Nos frece una interfaz de alto nivel para trabajar con la tecnología AJAX.
Puede ser conectado en cualquier página o DHTML marco, ya que fue diseñado en la conformación con el principio de separación de las preocupaciones, de mantenimiento de centrarse en cuestiones de AJAX.

Clean es un software basado en patrones de diseño y tener éxito y se inspira en el servicio de mensajes de Java API que ofrece soluciones fiables para AJAX.

Se creó para resolver los problemas reales encontrados en aplicaciones AJAX, y es usado en muchos proyectos. Limpio le ayudará a adoptar AJAX ahorrando su tiempo y su código, la reducción de su curva de aprendizaje y el Código de la reingeniería.

Licencia:  tipo GPL

URLS: Sitio Demos Descargas

Regresar al Indice

RIALTO

rialto

rialto

Rialto (Rich Internet Application Toolkit) es un FrameWork en javascript con widgets en bibliotecas. Para puede ser ligado con tecnologías como JSP, JSF,Net, Python, PHP, etc…

El propósito de Rialto es facilitar a las empresas el acceso al desarrollo de aplicaciones web por Internet.

El ideal de Rialto es que exista necesidad de escribir o entender DHTML, Ajax o código DOM.

La orientación de Rialto es para la generación de aplicaciones de aplicaciones web y no a la generación sitios web.

Licencia:  tipo GPL

URLS: Sitio Demos Descargas

Regresar al Indice

QooxDoo

QooXDoo

QooXDoo

QooXDoo es un completo e innovador marco para la creación de aplicaciones ricas de Internet (RIAs). El apalancamiento de JavaScript orientado a objetos permite a los desarrolladores construir impresionantes aplicaciones Cross-Browser. Con poca experiencia en HTML, CSS y del DOM.

Licencia:  tipo GPL

URLS: Sitio Demos Descargas

Regresar al Indice


script.aculo

script.aculo

script.aculo

script.aculo nos provee con un rápida fácil y útil FrameWork en javascript para hacer aplicaciones cross-browser de forma rápida.

Que se puede hacer: Animación, controles Ajax, utilidades del DOM, utilidades de pruebas.

Licencia:  tipo GPL

URLS: Sitio Demos Descargas

Regresar al Indice

ExtJS

extJs

extJs

Este Framework es muy flexible y además nos permite realizar de una manera muy rápida interfaces con un “look and feel” muy profesional, la comunidad que esta detrás de esta herramienta es muy grande y la documentación cada vez es mas extensa, además cuenta con varias licencias que podemos utilizar de acuerdo al proyecto que estemos haciendo, podemos usar la licencia “Open Source” o bien podemos comprar una licencia “comercial”.

(Fuente Nierox.com)

URLS: Sitio Demos Descargas

Regresar al Indice

ZK

ZK FrameWork

ZK FrameWork

ZK FrameWork Ajax + Móvil diseñado para maximizar la empresa la eficiencia operativa y reducir al mínimo el tiempo de desarrollo y costo.
Directa con los resultados de una innovadora arquitectura, ZK simplifica y acelera la creación, despliegue y mantenimiento de aplicaciones ricas de Internet.

zkframework1

Licencia:  tipo GPL

URLS: Sitio Demos Descargas

Regresar al Indice

Cappuccino

cappuccino

cappuccino

Cappuccino es un FrameWork de código abierto orientado para facilitar a los programadores el desarrollo de aplicaciones de escritorio que se ejecutan en un navegador web (similar a Rialto).

Licencia:  tipo LGPL

LINKS: Sitio Demos Descargas

Regresar al Indice

YUI

YUI

YUI

YUI la Biblioteca es un conjunto de utilidades y controles, escrito en JavaScript, desarrollayo por Yahoo! para la construcción de aplicaciones web interactivas ricas usando técnicas como DOM scripting, DHTML y AJAX. YUI está disponible bajo una licencia BSD y es gratuito para todos los usos.

Licencia BSD

LINKS: Sitio

Regresar al Indice


Google Web Toolkit

Google Web Toolkit

Google Web Toolkit (GWT) ofrece a los desarrolladores la posibilidad de crear y mantener rápidamente aplicaciones JavaScript con interfaces complejas, pero de gran rendimiento.

Google ofrece una serie de controles especiales para sus aplicaciones web p.e. Controles para el reproductor de youtube, googlevideo, etc..

Licencia: Apache 2.0 open source license

Link: sitio

Regresar al Indice

Spry

spry

spry

Spry es un FrameWork desarrollado por Adobe permite incorporar XML, JSON o HTML en páginas de datos usando HTML, CSS, y una cantidad mínima de JavaScript, sin necesidad de refrescar toda la página. Spry también proporciona fácil construir y el estilo de widgets, ofreciendo avanzados elementos de página para los usuarios finales. El marco es Spry HTML céntrica, y fácil de implementar para los usuarios con conocimientos básicos de HTML, CSS y JavaScript. El marco ha sido diseñado de tal forma que el margen es muy sencilla y el código JavaScript es mínima. El Spry marco puede ser utilizado por cualquier persona que es de autoría para la web en su herramienta de elección.

Al traer con una licencia del tipo BSD al estar integrado en los efectos que te genera el Dreamwaver y en general CS4, al traer un amplia compatibilidad con su lenguaje actionScript me deja un sabor de boca de incongruencia en la libertad de uso.

Licencia: BSD

Link: sitio

Regresar al Indice