feed twitter facebook LinkedIn facebook

Eventos » Webinar Real Sense App Challenge 2014 en Español

septiembre 5, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

developer-pinchDentro del evento Real Sense App Challenge 2014 ahora tenemos la oportunidad de atender a un webinar en español, lo cual hará que tengamos más información sobre el concurso de desarrollo sobre tecnología perceptual de Intel.

Dentro del Webinar Real Sense App Challenge 2014 en Español podremos conocer temas como:

  • Intel® RealSense™ SDK beta para Windows
  • ¿Qué es Intel® RealSense™ Technology?
  • Importancia para los desarrolladores
  • Detalles técnicos de Intel® RealSense™ Technology
  • Comenzar con Intel® RealSense™ SDK
  • Desarrollando una Aplicación con Intel® RealSense™ SDK for  Windows
  • Programa de Desarrolladores Intel® RealSense™ SDK
  • Q&A

El Webinar Real Sense App Challenge 2014 en Español será coordinado por Albertina Durante y Hernán Alijo.

Puedes registrarte directamente desde aquí... No dejes de pasar la oportunidad.

JavaScript » Acceder a una clase con QuerySelector

septiembre 3, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

El API Query nos puede permitir la ejecución de selectores. Así que en este artículo vamos a ver como acceder a una clase con QuerySelector.

Lo primero será validar si nuestro navegador soporta el API QuerySelector, ya que no todos los navegadores lo soportan.

  1. if (document.querySelector)
  2. document.write ("API Query Selector soportado");

Una página HTML puede tener diferentes elementos a los que les asigne una clase, a diferencia de un ID dónde solo encontraremos uno único dentro de la página.

De esta forma la página sobre la que partamos tendrá la siguiente forma:

  1. <li class="item">Item 1</li>
  2. <li class="item">Item 2</li>
  3. <li class="item">Item 3</li>
  4. <li class="item">Item 4</li>
  5. <li class="item">Item 5</li>
  6. </ul>

Como podemos comprobar hay varios elementos LI los cuales tienen asociada una clase "item".

Para acceder a una clase con QuerySelector tenemos que saber que el selector de clases se monta anticipándole un punto al nombre de la clase.

.nombreClase

Ahora pasamos a ejecutar el método .querySelector para obtener acceso al elemento.

  1. var elemento = document.querySelector(".item");

Al ejecutar el método .querySelector sobre la clase lo que obtenemos es un acceso al primer elemento que contenga dicha clase en la página. Es decir, que si ejecutamos el volcado del contenido:

  1. console.log(elemento.innerHTML);

Lo que vamos a obtener es:

Item 1

En el caso de que queramos obtener todos los elementos que contengan la clase "item" deberemos de recurrir a la función .querySelectorAll.

  1. var elementos = document.querySelectorAll(".item");
  2. for (x=0;x<elementos.length;x++) {
  3. console.log(elementos[x].innerHTML);
  4. }

JavaScript » Obtener ID con API QuerySelector

septiembre 1, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Ya hemos visto que con el API QuerySelector podemos ejecutar selectores que accedan a los elementos DOM de nuestra página web. Ahora vamos a ver como podemos obtener el ID con API QuerySelector para poder recuperar un elemento en concreto.

Recuerda que para que una página esté bien formada no deberá de tener repetidos los ID y que un ID corresponderá a un solo elemento.

Para obtener el ID con API QuerySelector lo primero que haremos es definir una web dónde tengamos un elemento con dicho ID.

  1. <div id="mensaje">Esto es un mensaje</div>

Ahora lo siguiente será acceder al ID "mensaje". Para ello vamos a ejecutar el método document.querySelector al cual le pasaremos el selector que referencie al ID.

Los selectores de ID se referencian anticipándoles una almohadilla.

#id

Es por ello que el código para obtener el ID con API QuerySelector será el siguiente:

  1. var mensaje = document.querySelector("#mensaje");

En la variable mensaje habremos dejado un elemento DOM, así que podemos obtener su contenido mediante métodos como .innerHTML.

  1. console.log("El contenido de los elementos de la clase mensaje '" + mensaje.innerHTML + "'");

En próximos artículos veremos como a parte de obtener el ID con API QuerySelector podemos montar una cantidad amplia de selectores que nos filtren los elementos.

JavaScript » API QuerySelector

agosto 31, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

El API QuerySelector es un API Javascript que nos permite ejecutar selectores para poder acceder a elementos del DOM de de una página web. Algo que frameworks como jQuery ya tenían implementado hace tiempo, pero que ahora tenemos de forma estándar en Javascript.

De esta forma el API QuerySelector complementa a las funciones ya existentes .getElementById(), .getElementByName() y .getElementsByTagName().

Aunque el soporte del API QuerySelector está bastante extendido lo primero que vamos a realizar es comprobar si el navegador en el que ejecutamos el código tiene el soporte del API QuerySelector. Para ello validamos si existe document.querySelector.

  1. if (document.querySelector)
  2. document.write ("API Query Selector soportado");
  3. else
  4. document.write ("API Query Selector NO soportado");

Para poder ejecutar el API QuerySelector es muy sencillo, para ello basta con ejecutar la función .querySelector indicándole el selector como parámetro que queramos ejecutar.

  1. var elemento = document.querySelector("selector");

Los selectores pueden indicar múltiples cosas, ya sean identificadores, clases, etiquetas, jerarquías de etiquetas,...

Por ejemplo si tenemos un ID dentro de nuestra página web que se llame "mensaje"...

  1. <div id="mensaje">Esto es un mensaje</div>

Podemos ejecutar el siguiente código:

  1. var mensaje = document.querySelector("#mensaje");

La variable mensaje contendrá un objeto DOM, en este caso un objeto HTMLDIVElement. De esta forma podemos acceder a todas sus propiedades, por ejemplo a su contenido con .innerHTML

  1. console.log("El contenido del ID mensaje es '" + mensaje.innerHTML + "'");

Ahora ya solo te queda ir jugando con los diferentes selectores del API QuerySelector para ir viendo toda su potencia.

Eventos » Segundo Webinar del Real Sense App Challenge 2014

agosto 20, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

developer-pinchSigue en curso el Real Sense App Challenge 2014. Si todavía no tienes clara tu idea para intentar ganar los premios del Real Sense App Challenge 2014 no te preocupes, hoy se celebra el segundo Webinar para poder ayudarte con las ideas.

Ya sabes que en Real Sense App Challenge 2014 están buscando que la gente programando con C++ p C# pueda construir aplicaciones perceptuales, es decir que podamos interactuar con ellas mediante gestos, voz, reconocimiento facial,...

Seguro que se te ocurre una buena idea y puedes optar a los premios que tienen por valor de 1 millón de dolares.

No dejes pasar la oportunidad e inscribete en el Segundo Webinar del Real Sense App Challenge 2014.

Puedes inscribirte al concurso desde aquí.

WordPress » Obtener el título en WordPress

agosto 14, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Una de las cosas que haremos cuando estemos construyendo un tema será obtener el título en WordPress de la entrada o página que estemos presentando.

Para poder obtener el título en WordPress vamos apoyarnos en la función:

  1. wp_title();

Antes de utilizar la función wp_title() deberemos de conocer las posibilidades que nos ofrece. Y es que esta función cuenta con 3 parámetros:

  1. wp_title($separador,$mostrar,$posicion);

Si los vemos en detalle:

  • $separador, es el carácter o símbolo que utilizaremos para separar el título. Este podrá ir antes o después del título atendiendo al valor que tenga el parámetro $posicion.
  • $mostrar, es un valor booleando en el cual indicaremos que el contenido se muestre (si utilizamos un true) o si queremos utilizar el contenido como parámetro de una función (si utilizamos false).
  • $posicion, indica la posición en la que que queremos poner el separador del título. Los valores pueden ser LEFT o RIGHT.

De esta forma podemos obtener el título en WordPress de la siguiente forma:

  1. wp_title('|',true,RIGHT);

Así conseguiremos que se muestre el título del contenido seguido del símbolo '|'. Si el contenido se llama 'Mi Página' visualizaremos lo siguiente:

Mi Página|

Y es que podemos concatenar el título del contenido con otra información, por ejemplo con el nombre o descripción del blog.

Así tendríamos el siguiente código:

  1. wp_title('|',true,RIGHT);bloginfo('name');

Lo que nos visualizaría por pantalla será:

Mi Página|Línea de Código

El uso de esta función para obtener el título en WordPress lo encontraremos principalmente en el archivo header.php al generar la etiqueta title, aunque podemos utilizarlo dónde queramos:

  1. <title>wp_title('|',true,RIGHT);bloginfo('name');</title>

Lógicamente el título puede variar atendiendo a muchos criterios: si queremos personalizar cuando sea la página de 404, o cuando sea una entrada el contenido o cuando sea una página,... Podremos complicar la generación del título lo que queramos.

Para estos casos se puede optar, y parece lo más coherente por añadir un filtro sobre la función 'wp_title' y que funcione como nosotros queramos:

  1. add_filter( 'wp_title', 'titulo_personalizado', 10, 2 );

Pero esto será objeto de otro artículo.

Eventos » Primer Webinar del Real Sense App Challenge 2014

agosto 13, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

developer-pinchSi te ha interesado la idea de poder llevar a cabo tus ideas con programación sobre tecnología perceptual y sobre todo llevarte los premios del Real Sense App Challenge 2014 tienes que saber que hoy montan el primer Webinar sobre el proyecto Real Sense App Challenge 2014.

Es bueno que asistas al primer Webinar sobre el proyecto Real Sense App Challenge 2014 ya que en él se darán las claves sobre cómo enfocar la idea de tu proyecto y así ser uno de los elegidos para entrar dentro de la bolsa de premios del

No dejes la posibilidad y APUNTATE.

WordPress » Nombre y descripción del blog con WordPress

agosto 12, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Vamos a empezar una serie de ejemplos relacionados con el desarrollo y programación sobre la plataforma WordPress. Para ello queríamos empezar por uno sencillo, que será como mostrar en pantalla el nombre y descripción del blog con WordPress.

Antes de empezar a explicarlo hay que saber un par de cosas:

  • WordPress es una plataforma semántica para realizar publicaciones de contenidos.
  • La tecnología que sustenta a WordPress es PHP, por lo cual los ejemplos que mostremos de programación en WordPress serán código PHP (aunque en algunos casos también utilizaremos algo de Javascript.

Aunque ya entraremos en detalle de cual es la estructura de ficheros para poder crear un tema sobre WordPress, para este caso en el que vamos a mostrar el nombre y descripción del blog con WordPress basta con que sepas que hay un fichero que es header.php, al cual la plataforma lo llamará cada vez que se ejecute la función:

  1. get_header();

Si queremos mostrar el nombre y descripción del blog con WordPress vamos a apoyarnos en la función:

  1. bloginfo();

Dicha función recibe como parámetro el tipo de información básica que queramos extraer de WordPress, véase el título, la descripción del blog, idioma en el que está instalado WordPress, la versión de WordPress,...

Para poder extraer el nombre y descricipción del blog en WordPress necesitaremos consultar las propiedades 'name' y 'description'.

De esta manera nuestro código fuente quedará así:

  1. echo 'El blog se llama ';
  2. bloginfo('name')
  3. echo '<br>';
  4. echo 'Y su descripción es ';
  5. bloginfo('description');

Como podéis ver, algo muy sencillo.... ¿Te atreves con tu primer tema de WordPress?

Eventos » Real Sense App Challenge 2014

agosto 12, 2014 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

developer-pinchSi sabes programar en C++ o C#, te gustan las nuevas tecnologías y quieres estar en un reto con una suma de premios de 1 millón de dolares, Real Sense App Challenge 2014 es tu evento.

La idea de Real Sense App Challenge 2014 es poder crear una aplicación utilizando tecnología perceptual. Para ello utilizado una cámara que capture gestos en 3D y mediante un SDK de programación se debe de crear una aplicación.

El mundo perceptual nos permite realizar múltiples comprobaciones como identificaciones faciales, gestos mediante las manos, reconocimiento de voz, identificación de elementos en una escena,... todo para que la interacción del usuario con la aplicación sea mucho más real.

Esto se puede llevar a cualquier tipo de dispositivo ya sea un ordenador o una tablet.

Así que ya estás dándole vueltas a la cabeza y pensando que tipo de aplicación o juego presentar como idea en el Real Sense App Challenge 2014.

Si tu idea es una de las elegidas en Real Sense App Challenge 2014, será la que pase a la fase de desarrollo que acabará a principios del 2015.


Hasta el 19 de septiembre puedes enviar tus ideas. REGISTRATE
.

Si alguien se anima que cuente su experiencia.

Java » Hola mundo con JavaFX

febrero 24, 2014 por ARIEL 4 Comentarios Imprimir Imprimir

En está ocasión vamos a usar la tecnología JavaFX para crear el ejemplo de Hola mundo con JavaFX, esta aplicación abrirá una ventana que muestra el clásico mensaje "Hola, mundo".

JavaFX es una tecnología que nos permite crear aplicaciones de escritorio RIA (Ritch Internet Applications)

Vamos a usar IntelliJ IDEA para crear el proyecto Hola Mundo con JavaFX.

Para ello elegimos New Project -> JavaFX Application:

IntelliJ

Lo primero será explicar los tres conceptos que tiene JavaFX:

  • El Escenario, que es representado por la clase Stage. El escenario es el representa al contenedor general de JavaFX.
  • La escena, es representada por la clase Scene y es la que tiene el contenido de lo que queremos representar. La escena, por lógica se monta sobre el escenario.
  • Los nodos de la escena, son los elementos que componen la escena. La clase superior que representa estos nodos es un Panel, en este caso vamos a utilizar un StackPane

Vamos a montar nuestro escenario del Hola Mundo con JavaFX, desde los nodos hasta la escena...

Crear un botón que nos salude

Lo primero que haremos será crear un botón que sea el que muestre el saludo. Para crear un botón escribiremos el siguiente código.

  1. Button boton = new Button("Saludar");
  2. boton.setVisible(true);
  3. boton.setOnAction(new EventHandler<ActionEvent>() {
  4. public void handle(ActionEvent event) {
  5. System.out.println("Hola Mundo!!!");
  6. }
  7. });

Como podemos ver es una simple clase Button, a la cual le hemos asociado un manejador mediante un EventHandler. Dicho EventHandler va a mostrar un saludo por consola.

El Panel Principal

Como hemos dicho hay que crear un nodo principal que será un Panel. En este caso es un StackPane.

  1. panel = new StackPane();

Sobre el Panel vamos a añadir el botón:

  1. panel.getChildren().add(boton);

Montando la escena

La escena es la que contiene a los nodos. Así que el montado de la Escena en JavaFX no deja de ser el añadirle los nodos.

  1. Scene escena = new Scene(panel, 250, 150, Color.BLACK);

Subir la escena, al escenario

Si ya tenemos la escena, solo nos queda subir la escena al escenario y mostrar el escenario

  1. primaryStage.setTitle("Iniciando con Java FX");
  2. primaryStage.setScene(escena);
  3. primaryStage.show();

Ahora veremos que el escenario es un atributo del método start, método básico en el desarrollo de aplicciones JavaFX.

Algunas cosas básicas más...

Antes de montar la aplicación Hola Mundo con JavaFX tiene que saber un par de cosas más sobre esta tecnología.

La primera es que la aplicación extiende de la clase Application

  1. public class Main extends Application {...}

Y lo segundo es, que el método principal es start, el cual recibe como parámetro el escenario, es decir la clase Stage.

  1. public class Main extends Application {
  2. @Override
  3. public void start(Stage primaryStage) throws Exception{
  4. ...
  5. }
  6. }

Espero que os haya sido útil la explicación de como realizar un Hola Mundo con JavaFX.