INVITACIÓN AL IX SIMPOSIUM DE SOFTWARE LIBRE DE LA MIXTECA

simposium_de_la_Mixteca

Hola,  les quiero compartir, que he sido invitado al “IX Simposium de Software Libre de la Mixteca“, dicho evento se realizará en la Universidad Tecnológica de la Mixteca (UTM), en la ciudad de Huajuapan de León Oaxaca, los días 26, 27 y 28 del presente mes.

Mi participación será el día 28,  en una mesa redonda, formada por egresados de esta universidad los cuales tenemos tenemos relación con el Software Libre.

Espero nos vaya muy bien en este evento, posteriormente, por este medio subiré la información del cómo nos fue, así como el servo fotográfico que generé.

 

Para mayor información consultar el sitio oficial: http://www.utm.mx/~simposio/IX/

Anuncios

Introducción a JavaFX

logoFX

Las tecnologías web llegaron para revolucionar a la Ingeniería de Software, ya hace un tiempo las webapps al ser cada vez mas complejas tendieron a dividir la complejidad en 3 partes:

  1. lógica de la aplicación(JavaScript y lenguajes del lado del servidor p.e. php,python, ruby, perl, asp, etc…)
  2. El contenido de la aplicación (El marcado HTML)
  3. El diseño (CSS).

JavaFX es una implementación de esto, diviendo los elementos en:

  1. lógica de la aplicación(Java)
  2. El contenido de la aplicación (El marcado FXML)
  3. El diseño (CSS).

En otras palabras javaFX es un conjunto de librerías que utiliza Java para el manejo de la lógica de la aplicación, FXML para el marcado de contenido(botones, etiquetas, textos de entrada, etc..) y CSS para darle estilo o diseño a estos elementos de contenidos, la siguiente imagen ilustra como se comporta las tecnologías JavaFX en un patrón MVC.

Vista:

La parte de la vista son escenas las cuales el contenido están descritas por archivos con extensión .FXML estos son modificados desde la aplicación JavaFX Scene Builder por otra parte el diseño de la ventana(escena) se realiza mediante archivos de descripción de estilo .CSS

Controlador:

La vista previamente tiene la capacidad de definir un controlador el cual hace referencia a una clase en Java que se va a encargar de controlar la lógica de la ventana.

Modelo:

El modelo es el responsable de la recuperación de datos convirtiéndolos en conceptos significativos para la aplicación, así como su procesamiento, validación, asociación y cualquier otra tarea relativa a la manipulación de dichos datos.

En los siguiente contenido de esta categoría javaFX se va a vamos a explicar mas el funcionamiento de las vistas.

Le recomiendo descargar y revisar el código de la calculadora con JavaFX para que se vaya contextualizando con esta forma de crear aplicaciones.

Calculadora con JavaFX

Vamos a crear la siguiente calculadora:

calculadora_estructura

Ejemplo del funcionamiento

calculadora

Estructura:

Vamos a crear una calculadora, la cual tiene la siguiente estructura:

  • Calculadora.java
  • Controller.java
  • Evaluar.java
  • Vista.fxml
  • Style.css

Vista

La vista de la aplicación es el archivo Vista.fxml el cual describe una ventana divida en dos partes la parte superior contiene el texto de entrada y la parte inferior es una rejilla(GridPane) de 4×4 que contiene los botones (4 renglones de 4 columnas), como se puede ver a continuación.

calculadora_estructura_detalle

Controlador:

El archivo Controller se encarga de “controlar la lógica de la vista”, el cual contiene los métodos:

  • Evaluar: es ejecutada cuando se presiona el Enter en la “#entrada” o el botón con símbolo “=”
  • Borrar: Es ejecutada cuando se presiona el botón con símbolo “c”(clear)
  • OtroBoton: Es ejecutada cuando se presiona cualquier otro botón(0-9*/+-) y simplemente concatena el símbolo contenido en el botón a #entrada..

Evaluar.java se encarga de realizar las operaciones detectando errores de aritmética como la división entre cero.

Código:

Dejo el enlace del código fuente:

https://github.com/fitorec/calculadora_javaFX

Paginación de Twitter Bootstrap en WordPress

El twitter Bootstrap entre sus componente que tiene trae incorporado un sistema de paginación con links activos, normales y deshabilitados.

Paginación de twitterBootstrap en WordPress

Resultado Paginación de twitterBootstrap en WordPress

http://twitter.github.com/bootstrap/components.html#pagination

Por otra parte el sistema WordPress suele agregar la paginación de los posts en el archivo loop.php de la plantilla en cuestión, desgraciadamente la función paginate_links nos genera un código html algo diferente a lo que requerimos para adaptarlo al bootstrap.

Salida en HTML necesaria

Salida en HTML necesaria

http://codex.wordpress.org/Function_Reference/paginate_links

Navegando por Internet encontré algunas implementaciones, p.e:

http://panosgalatis.com/2012/08/14/wordrpess-and-twitter-bootstrap-pagination/#.UHvXCqyqyio

Sin embargo incluyen modificaciones al CSS, cuando este renderizado se puede hacer solo con PHP como se muestra continuación:

loop.php

loop.php

Hice un gists en github con el código fuente para que se pueda descargar:

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