RibosoMatic

TideSDK, mi primera aplicacion (Windows 7)

webmaster@ribosomatic.com (Jesus Linan) — Mon, 24 Sep 2012 22:41:18 +0000

La vez pasada hablamos de TideSDK una plataforma para desarrollar aplicaciones de escritorio con lenguajes de programación para web como HTML, JavaScript, PHP, Pyton, Ruby, Rails, incluso con gestores de datos como MySQL Ahora vamos a explicar como usar TideSDK para crear una aplicación de ejemplo sencilla: el clásico "Hola Mundo" que nos dará una idea básica-esencial de la configuración inicial de un proyecto. Primero necesitamos un IDE. TideSDK es un actualización ó continuación del SDK de Titanium Desktop, el cual ya no tiene soporte. Este dispone de un editor de código llamado Titanium Studio. Usaremos este IDE para cargar la API de TideSDK y trabajar con esta (Al parecer no es el único IDE para trabajar con el TideSDK, así que hablaremos de ello más adelante). Veamos:

Instalación y Configuracion de Titanium Studio

Descargar Titatium Studio: http://www.appcelerator.com/platform/titanium-studio. Luego de unos minutos de instalación, iniciar el IDE. Te pedirá iniciar sesión para lo cual tendrás que registrarte para usar Titanium Studio. Además, actualizará algunas SDK como por ejemplo para desarrollar aplicaciones móviles y Android, así que dejar que realice este proceso.

Ir al menu Help -> Install new software, clic en Add y en Location pegar esta url: http://preview.appcelerator.com/appcelerator/studio/desktop/update/beta/. Esta actualización permitirá a Titanium Studio agregar la caracteristica de desarrollar aplicaciones de escritorio (la cual nativamente ya no es soportada, por lo menos hasta nuevo aviso). Luego de la instalación, reiniciara el IDE.

Instalar TideSDK

Ahora tenemos que instalar la API de TideSDK: https://github.com/TideSDK/TideSDK/downloads, seleccionar la versión de acuerdo a nuestro sistema operativo y descargar. Una vez descargado el zip (para nuestro caso trabajamos con la versión para Windows: desktopsdk-1.2.0.RC4-win32.zip ), ir al IDE darle clic en menu Help -> Install a Specific Titanium SDK y buscar el zip descargado y clic en Finish.

Ahora tenemos configurado el IDE para crear aplicaciones de escritorio con HTML, CSS, PHP y más, para comprobarlo ir menu File -> New-> Project. Buscar Titanium -> Titanium Desktop Project.

Clic en Next, en la siguiente pantalla podemos especificar datos del proyecto y ubicación de los archivos a usar. Asegurarse que en la opción Titanium SDK Versión, figure la versión del TideSDK que descargamos. Para este ejemplo 1.2.0.RC4.

Mi primera aplicación

Ok, esta es la parte más sencilla :) Clic en File -> New -> Project -> Titanium Desktop Project. En Project name escribimos: HelloWorld, en App Id escribimos: com.sample.helloworld ó algo que identifique su aplicación. Clic en los módulos con los que se trabajará en este caso PHP. Clic en Finish.

Automaticamente carga la configuración del proyecto, la cual podemos modificar al gusto. Esta configuración se guarda en un archivo XML llamado tiapp.xml. Para ver el contenido de este, clic en pestaña de abajo donde dice tiapp.xml. Veremos que podemos configurar valores como el tamaño de la ventana; el archivo inicial a cargar; permitir botones maximizar, minimizar, cerrar; pantalla completa; etc.

En la parte izquierda, en el panel de Exploración de Proyectos, vemos nuestro proyecto HelloWorld contenida en una carpeta, desplegamos y notaremos la carpeta Resources que tambien desplegaremos. Allí irán todos nuestros archivos fuentes incluso otras carpetas.

Clic derecho en la carpeta Resources y agregamos un nuevo archivo New -> File. Escribimos index.php. Allí podemos probar con código PHP y HTML, como si fuera cualquier otro editor de código. Para el ejemplo ponemos los siguiente:


	
	
	
		Hola Mundo

Ahora debemos configurar el archivo tiapp.xml que vimos anteriormente para que cuando inicie la aplicación lo haga con este archivo index.php y no con el index.html que es por defecto. Abrimos tiapp.xml vamos a la parte del código y buscamos la línea app://index.html y cambiamos el valor por index.php.

Ahora clic en el menú Run -> Run, esperamos que empaquete y mostrará nuestra primera aplicación.

Bueno muy simple la aplicación ¿verdad? Mas adelante entraremos a mas detalles y más avanzado con otros lenguajes de programación como JavaScript e intentaremos conexiones a datos en MySQL.

Mas ejemplos | https://github.com/TideSDK

Plugins y Tutoriales acordeón (accordion) jQuery

webmaster@ribosomatic.com (Jesus Linan) — Thu, 20 Sep 2012 11:04:35 +0000

El famoso accordion es un elemento perfecto para mostrar una galería de fotos con estilo. Gracias a jQuery y las hojas de estilo podemos implementar uno rapidamente. He aqui una recopilación de entre plugins y tutoriales sobre jQuery para desarrollar ó colocar nuestro propio acordeón de imagenes ó cualquier otro contenido. Indispensable tener a disposición una lista de recursos para nuestros proyectos.

zAccordion

liteAccordion

JavaScript Accordion Menu Wizard

Tutorial: Colorido acordeón

Tutorial: Acordeón elegante

jQuery Accordion

Tutorial: Easy Accordion

jQuery Accordion Plugin

Vallenato Simple jQuery Accordion

Tutorial: Accordion Madness

Tutorial: Como crear Accordion

Tutorial: Acordeón Vertical

Tutorial: Stupid Simple Accordion Menu

Tutorial: Acordeón Grid con jQuery

Tutorial: Simple jQuery Accordion

Socialite, botones sociales para compartir en tu web

webmaster@ribosomatic.com (Jesus Linan) — Thu, 20 Sep 2012 10:46:08 +0000

Socialite nos permite una manera muy facil de implementar y activar un gran números de botones para Compartir en las distintas redes sociales. Por ejemplo al cargar una página web ó al hacer un scroll con el mouse en la página. Tiene soporte para Twitter, Google+, Facebook, LinkedIn, Pinterest y Spotify. Es cross-browser. No necesita dependencia alguna para su funcionamiento.

Si trabajamos con WordPress existe un plugin para implementar Socialite en los post fácilmente.

Enlace | Socialite

Demos | Hover, Scroll

Base, framework CSS para Diseño Web Sensible

webmaster@ribosomatic.com (Jesus Linan) — Mon, 17 Sep 2012 11:31:38 +0000

En estos días hemos estado hablando de diseño web sensible y esta tarea se puede simplificar con Base, que es un sencillo framework para CSS para construir sitios web sensibles que sean visibles adecuadamente en todo dispositivo desde PC hastas teléfonos moviles.

En realidad es una hoja de estilos base para construir a partir de este nuestros proyectos. Cuenta con estilos que podemos personalizar cono encabezados, tablas, formularios, citas y más. Es fácil de consultar pues el código contiene comentarios indicativos. Además es cross-browser, trabaja con IE 7+ y navegadores modernos como Chrome, Firefox y Opera.

Al descargar el framework notarás que el código CSS esta bien estructurado y documentado.

Enlace | Base

Decorar imágenes con CSS 3 y HTML 5 - Parte 2

webmaster@ribosomatic.com (Jesus Linan) — Thu, 13 Sep 2012 10:59:54 +0000

Ahora vamos a crear una galería mas avanzada utlilizando etiquetas de HTML 5 especificas para este tipo de trabajo. En este caso la etiqueta

alrededor de cada imagen y la etiqueta

para agregar una etiqueta informativa a la imagen. La idea es decorar las imagenes con un efecto tipo marco y una cinta adhesiva en la parte superior.

HTML

Esta estructura colocar dentro de la etiqueta body:


	
		 
			
			Llamas
	        
  	
	
		
			
			Machupicchu
		
	
	
		 
        	
			Ollantaitambo

La estructura es fácil de comprender, hemos agregar elementos nuevos del HTML 5 para envolver la imagen con figure y una pequeña información al pie de esta con figcaption.

CSS

En el mismo documento HTML ó en una hoja de estilos fuera, colocar el siguiente código:

.galeria {
	margin: 0 0 25px;
	text-align: center;
}
.galeria li {
	display: inline-block;
	margin: 5px;
	list-style: none;
}
.galeria a {
	display: inline-block;
}
.tape li {
	width: 170px;
	padding: 5px;
	margin: 15px 10px;
	border: solid 1px #cac09f;
	background: #fdf8e4;
	text-align: center;
	box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}
.tape figure {
	position: relative;
	margin: 0;
}
.tape figure:before {
	position: absolute;
	content: ' ';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(overlay.png) no-repeat;
}
.tape figcaption {
	font: 100%/120% Handlee, Arial, Helvetica, "sans-serif";
	color: #787568;
}
.tape a:before {
	position: absolute;
	z-index: 2;
	content: ' ';
	top: -12px;
	left: 50%;
	width: 115px;
	height: 32px;
	margin-left: -57px;
	background: url(tape.png) no-repeat;
}

Si nos fijamos la parte de galeria es para darle estilo a la imagenes que estan en forma de lista, pero con este código las ponemos en linea recta y ocultamos la viñeta. Lo que nos interesa es la clase tape que le da estilo a cada elemento de lista li, figure y figcaption.

En tape figure:before especificamos el marco difuminado que agregaremos a cada imagen, y en tape a:before incluimos en el vinculo ó enlace la imagen de una cinta adhesiva en la parte superior de cada imagen de la galería.

El resultado final puedes apreciarlo aca: [ ver ejemplo ]

Decorar imágenes con CSS - Parte 1

webmaster@ribosomatic.com (Jesus Linan) — Tue, 11 Sep 2012 11:11:42 +0000

Le agrega un valor visual extra cuando una imagen tiene un decorado como un clip en la esquina, un marquito ó una etiqueta informática en la parte inferior de esta. Existen muchas formas de lograrlo, una de estas es con CSS en esta ocasión con los pseudo-elementos :before y :after. Estos elemento nos permite añadir cosas antes y después de un elemento HTML.

Vamos usarlo para agregar ó decorar imágenes en este caso con un clip en la parte superior izquierda de las páginas.

HTML

Dentro del body tenemos esta estructura dentro de una lista:

CSS

Dentro del documento HTML ó una hoja de estilo aparte, colocar el siguiente código:

Hay que tener en cuenta que todo trabajo lo hace el selector .clip a:before, donde especificamos la posición de la imagen que se sobrepondrá.

[ Ver el resultado final ]

Más adelante usaremos HTML 5 y CSS 3 para realizar otro decorado.

BookBlock: Contenido web en forma de revista, folleto ó catálogo

webmaster@ribosomatic.com (Jesus Linan) — Tue, 11 Sep 2012 10:39:48 +0000

BookBlock es un plugin para jQuery que puedes usar para crear contenido web en forma de folletos ó revista, con un efecto de voltear página ó "page flip". Cualquier contenido puede estar dentro del bloque que se convertirá en una página, tales como imágenes ó texto. El plugin transforma el bloque o estructura sólo cuando sea necesario (a pasar de página).

Codrops explica el uso de este plugin en un tutorial paso a paso y utiliza adicionalmente otro plugin jQuery++ que contiene algunos complementos para jQuery.

Uso Básico

Llamar al plugin:

$(function() {            
    $( '#bb-bookblock' ).bookblock();
});

Opciones de BookBlock

// speed for the flip transition in ms.
speed       : 1000,
 
// easing for the flip transition.
easing      : 'ease-in-out',
 
// if set to true, both the flipping page and the sides will have an overlay to simulate shadows
shadows     : true,
 
// opacity value for the "shadow" on both sides (when the flipping page is over it).
// value : 0.1 - 1
shadowSides : 0.2,
 
// opacity value for the "shadow" on the flipping page (while it is flipping).
// value : 0.1 - 1
shadowFlip  : 0.1,
 
// perspective value
perspective : 1300,
 
// if we should show the first item after reaching the end.
circular    : false,
 
// if we want to specify a selector that triggers the next() function. example: '#bb-nav-next'.
nextEl      : '',
 
// if we want to specify a selector that triggers the prev() function.
prevEl      : '',
 
// callback after the flip transition.
// page is the current item's index.
// isLimit is true if the current page is the last one (or the first one).
onEndFlip   : function( page, isLimit ) { return false; },
 
// callback before the flip transition.
// page is the current item's index.
onBeforeFlip: function( page ) { return false; }

Enlaces | Demo, Código fuente

Cómo crear aplicaciones de escritorio con HTML 5, CSS 3 y JavaScript

webmaster@ribosomatic.com (Jesus Linan) — Mon, 10 Sep 2012 11:42:14 +0000

Existen aplicaciones muy robustas en la web, muchas de ellas programada con HTML y JavaScript, y el diseño con CSS (trabajando con lenguajes de servidor y manejadores de BD). Muchos programadores se sienten cómodos con lenguajes de programación web que usan. Cuando hablamos de aplicaciones de escritorio, muchos lenguajes de web no se usan para ello (salvo algunos conocidos). Para un programador muy hábil no habria problema ponerse al día con la sintaxis y funciones de un nuevo lenguaje, pero aun siendo muy habiles quizas queramos ahorrarnos el tiempo que ello implique pues el tiempo es oro ¿verdad? Entonces ¿por que no desarrollar aplicaciones de escritorio y multiplataforma con los conocimientos que tenemos sobre lenguajes enfocados para web?

Bueno de esto se trata TideSDK, una plataforma para compilar y desarrollar aplicaciones de escritorio con HTML 5, CSS 3 y JavaScript. El cual puede extender su funcionalidad trabajando con lenguaje de lado del servidor como PHP, Python y Ruby.

La plataforma tiene una API sencilla y familiar, además cuenta con una extensa documentación y una comunidad que da soporte y resalpado a la plataforma. Con esta herramienta no solo somos desarrolladores web, sino que además complementamos nuestras habilidades para el desarrollo de aplicaciones de escritorio.

Particularmente me parece muy interesante, no es la primera vez que veo un proyecto así, pero está vez me empaparé un poco al respecto y publicaré lo que iré aprendiendo.

Enlace | TideSDK

Códigos CSS que diseñadores y desarrolladores web deben tener a la mano

webmaster@ribosomatic.com (Jesus Linan) — Thu, 06 Sep 2012 10:36:14 +0000

Gracias a CSS podemos transformar el diseño de un sitio web. Con mucha creatividad podemos sacarle partido a este lenguaje. Sin embargo, de vez en cuando, las técnicas convencionales de su uso no satisfacen ciertos requerimientos, es por ello que podemos hacer uso de otras declaraciones también disponibles, pero que muchas veces están ocultas, por decirlo asi (propiedades de cada navegador). Veamos algunas de ellas:

Esquinas redondeadas

border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px;  /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */

El enemigo número uno de este tip es IE, aqui artículo para que funcione en Internet Explorer.

Sombras

La mayoría de navegadores soporta esta propiedad box-shadow. En Safari existe una propiedad alternativa -webkit-box-shadow.

#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}

Regla @media

Esta regla se utiliza para hacer cambios en el estilo de un página web para diferentes tamaños de pantalla, teniendo en cuenta la técnica de Diseño Web Sensible. Ver un ejemplo de ello.

@media screen and (max-width: 480px) {

}

Efecto degradado

No todos los navegadores soportan este regla. Algunos ejemplos en este post.

background: -webkit-gradient(linear, left top, left bottom, from(darkGray), to(#7A7A7A));

Propiedad background-size

Una de las propiedades que ha alcanzado gran soporte de los navegadores. Esta propiedad específica el tamaño de la imagen de fondo. Algo de información aqui.

div
{
background:url(bg.jpg);
background-size:800px 600px;
background-repeat:no-repeat;
}

@font-face

Una propiedad muy útil para la transformación del diseño en cuanto a tipografía. Recientemente comentamos un artículo sobre Icons Fonts.

@font-face
{
font-family: mySmashingFont;
src: url('blitz.ttf')
,url('blitz.eot'); /* IE9 */

}

Una vez declarado, como usarlo:

div
{
font-family:mySmashingFont;
}

En smashinghub podemos encontrar otras 3 tips CSS más que no deben faltarnos como desarrolladores web.

Los mejores juegos Arcade para Android

webmaster@ribosomatic.com (Jesus Linan) — Tue, 04 Sep 2012 11:06:22 +0000

De vez en cuando hay que relajarnos del trabajo con algun jueguito y que mejor que los del género arcade pues tienen niveles cortos, controles intuitivos, sencillos y la dificultad aumenta a medida que se superan los niveles; lo cual lo hacen entretenidos y nos permiten pasar un buen rato. Obviamente no es la mejor opción para la productividad pues nos quitarían mucho tiempo, pero si viajamos largas distancias es una buena opción para ocupar en parte el tiempo del viaje.

Si tiene un dispositivo con Android y estás buscando buenos juegos género arcade, aqui te recomendamos algunos:

RibosoMatic

TideSDK, mi primera aplicacion (Windows 7)

Instalación y Configuracion de Titanium Studio

Instalar TideSDK

Mi primera aplicación

Hola Mundo

Plugins y Tutoriales acordeón (accordion) jQuery

zAccordion

liteAccordion

JavaScript Accordion Menu Wizard

Tutorial: Colorido acordeón

Tutorial: Acordeón elegante

jQuery Accordion

Tutorial: Easy Accordion

jQuery Accordion Plugin

Vallenato Simple jQuery Accordion

Tutorial: Accordion Madness

Tutorial: Como crear Accordion

Tutorial: Acordeón Vertical

Tutorial: Stupid Simple Accordion Menu

Tutorial: Acordeón Grid con jQuery

Tutorial: Simple jQuery Accordion

Socialite, botones sociales para compartir en tu web

Base, framework CSS para Diseño Web Sensible

Decorar imágenes con CSS 3 y HTML 5 - Parte 2

HTML

CSS

Decorar imágenes con CSS - Parte 1

HTML

CSS

BookBlock: Contenido web en forma de revista, folleto ó catálogo

Uso Básico

Opciones de BookBlock

Cómo crear aplicaciones de escritorio con HTML 5, CSS 3 y JavaScript

Códigos CSS que diseñadores y desarrolladores web deben tener a la mano

Esquinas redondeadas

Sombras

Regla @media

Efecto degradado

@font-face

Los mejores juegos Arcade para Android

Temple Ruin

Nin Jump

Falldown Classic

Labyrinth Lite

Dragon, Fly! Free

Yoo Ninja! Free