Unos meses y la tecnología avanza a grandes pasos. Así que nos vamos poniendo al día. Muchos móviles y tablets vienen con Android, así que como desarrolladores de aplicaciones debemos estar a la par del avance tecnológicos sino nos quedamos. Un blog que nos puede ayudar es sgoliver, con muchos tutos sobre programación en Android.

Algunos que te puede interesar:

1. Entorno de desarrollo Android
2. Estructura de un proyecto Android
3. Componentes de una apliación Android
4. Desarrolla aplicacion sencilla
5. Interfaz de usuario en Android: Layouts, Controles Básicos, Controles de Selección
6. Menus en Android

Y pues muchos más, así que ¿por que no aprender algo nuevo este año?

Enlace | Desarrollo en Android

Este ejemplo muestra como aplicar jQuery para mostrar efecto fade de una imagen sobre otra al situar el puntero del mouse.

Uso:

HTML:

<div id="ejemplo_fade">
    	<img src="http://www.webintenta.com/img/fashion1.jpg" />
</div>

CSS:

#ejemplo_fade{
	background:url("img/fashion2.jpg");
	position:relative;
	width:200px;
	height:200px;
	cursor:pointer;
}

JAVASCRIPT:

$(document).ready(function() {
	
    $("#ejemplo_fade").hover(function(){
        $(this).find("img").fadeOut();
    }, function() {
        $(this).find("img").fadeIn();
    });	

});

Vía WebIntenta | Demo

Scrollorama es un plugin para jQuery que permite agregar algunos efectos al desplazarnos verticalmente a través de una página web. Podemos configurar efectos tales como:

• Flying
• Fading in/ out
• Rotation
• Zooming in / out
• Parallax

Cómo se usa

Divide en bloques tu diseño entonces aplica este código:

$(document).ready(function() {
    var scrollorama = $.scrollorama({
        blocks:'.scrollblock'
    });
});

Para mas información: scrollorama

Una extension de Google Chrome nos recuerda poner el práctica esta recomendación, una vez instalada nos recomienda que cada 20 minutos debemos tomarnos un descanso de 20 segundo mirando un objeto a 20 metros de distancia. Algo muy valioso para un webmaster, diseñador, IT profesional, etc son sus ojos así que hay que cuidarlos!

Descargar 20 cubed

Magento es una plataforma para sitio web e-commerce, que ademas proporciona una gran flexibilidad y control de la apariencia, contenido y otras funcionalidades. Aqui una lista de temas de acuerdo a los productos ó servicios que podamos ofrecer-brindar a traves de esta plataforma. Hay para todos los gustos.

Descargar/ Demo 

Descargar/ Demo 

Descargar/ Demo 

Descargar / Demo 

Descargar/ Demo 

Descargar / Demo 

Descargar / Demo 

Ver mas temas en 40 Best Magento Themes

Hace tiempo atrás mencionamos a jQuery Masonry, que organiza nuestros div ó contenedores en CSS de una forma mas atractivas sin dañar el diseño así se redimensione la página web. A este respecto esta imagen resume lo que hace:

Aqui un listado de algunos sitios web que hace uso de esta libreria para jQuery que nos sirven de inspiración para nosotros:

Cutets Paw

Cla-ude

Chromeography

Veerle's blog

We and The Color

Ver el resto en WebAppers.com

En busca de un menu similar a los tradicionales menus desplegables (en la parte superior de las ventanas) Windows. Encontre esté plugin muy sencillo de uso, que convierte una lista de elementos (ul - li) en un menu desplegable con sub menus (de requerirlos). Bastará con configurar unos parametros de incio y colocar el menu donde deseemos. El resultado.

Adicionalmente, lo interesante es que podemos enlazar con un imagen cada item ó elemento del menu, para darle mas valor visual a nuestro menu tipo Windows. Muy practico para una que otra aplicación tipo escritorio que desarrollemos.

Enlace : Memu - A simple CSS / JavaScript / JQuery Menu

RibApp es el nombre del gestor de contenidos detrás de este blog que ahora está libre para descargar. Esta aplicación web esta hecha en PHP y JavaScript (usando jQuery) y como motor de Base de Datos usa MySQL. Es una versión que tiene mucho que corregir pero para efectos didacticos pueden beneficiarles a muchos que se adentran en el mundo de la programación y/o desarrollo de aplicación para web.

En caso de futuras versiones iré publicando su log en este mismo post.

Caracteristicas:

• Instalación
• Publicación de contenidos
• Comentarios
• Categorias
• Post listados por fecha, categoria, mes-año, busqueda
• Paginación
• Opciones basicas para cambiar titulo y descripcion
• etc

Nota: El software se basa en una versión inicial desarrollada en 2006 con minimas mejoras para su uso práctico. No se brinda ninguna garantía sobre esta aplicación web, se proporciona tal cual. No hay quejas. Lo brindo con fines didacticos. Ver licencia dentro del comprimido. Y pues a parte de esto ... que lo disfruten :)

Descargar RibApp Gestor de Contenidos Básico

Esta aplicacion web consiste en un gestor de contenidos, es decir una estructura de soporte para crear y administrar contenidos. Esto fue la primera versión de una aplicacion web que desarrolle hace unos meses, que me parecio bien compartirla. Consiste en una interfaz back-end para crear documentos (por ejemplo un libro) donde insertaremos datos relacionados como el titulo, autor, fecha. En cada documento podemos agregar secciones (en el ejemplo del libro cada sección sería un capítulo) y subsecciones (que vendrían a ser subtitulo, subtema, etc) y asi creando un estructura en forma de ramificaciones. Todo ello con su editor de texto web.

En la interfaz fron-end tenemos los diferentes tipo de documentos y un listado de estos. Al seleccionar el deseado, se muestran sus secciones, en forma de árbol. Al seleccionar la sección nos muestra su contenido. También nos permite realizar una búsqueda de un término ó términos deseados.

En el paquete para descargar está includo la estructura de base de datos MySQL. Funciona con PHP y jQuery, versiones actuales. Hace uso de TinyMCE como editor de texto web y jQuery plugin Treeview para listado tipo árbol.

Enlace | Descargar Aplicación Web: Gestor de Contenido Básico

Update: Si el link de Box.net no funciona prueben este: http://www.ribosomatic.com/ejemplos/simplegestor/rb_appcms.zip

Bien parece mucho tiempo que no posteo, el trabajo seglar me privan de este gusto. Pero ya que encontré un tiempito, y además con el fin de contestar uno de los tantos correos y comentarios de los fieles visitantes, me anime a postear acerca de cómo subir/cargar imagenes con la ayuda de TinyMCE.

Seguramente conocen TinyMCE, el editor web WYSIWYG por excelencia, muy usado en WordPress para su contenido back-end. Este editor esta disponible para descarga gratuitamente. Algunos componentes adicionales como un administrador de imágenes y archivos tienen un costo monetario. Ahora con la ayuda de WordPress y otros CMS quizas no tengamos que pasar por el proceso de instalar y configurar TinyMCE. Sin embargo si, como yo, surge un proyecto web en el que el usuario nos pide que su aplicacion web contenga un editor de contenidos, entonces podemos hacer uso de TinyMCE. La configuración para su funcionamiento es fácil y sencilla.

Pero ahora vamos al grano. TinyMCE tiene la opción de hacer uso de plugins para darle potencia al editor. Por defecto TinyMCE no trae una opción para subir imágenes al servidor. Solo nos muestra una botón que llama una ventana para incluir imagenes en el contenido especificando su URL. Pero queremos el adicional de subirla. Veamos:

¿Qué debemos hacer?

Vamos por pasos y asi no nos perderemos. Asumimos que ya tienes el TinyMCE configurado en tu servidor:

1. Descargar el plugin PHP Image Upload.
2. Descomprime y el directorio phpimage copia y pega en el directorio plugins de tiny_mce (donde esté instalado)
3. Dentro de phpimage ve a config.php y edita los siguiente:

   //Comenta esta lineas
   //$_cur_dir = getcwd(); if ($_cur_dir == FALSE) { $_cur_dir = dirname($_SERVER['SCRIPT_FILENAME']); }
   //$_cur_dir = $_cur_dir.'/../../../..'; 
   
   //Y copia y pega la de abajo
   $_cur_dir = $_SERVER['DOCUMENT_ROOT']; 
   
   //Por defecto el directorio donde irán a parar las imágenes es raiz/uploads/images. 
   

4. Ahora ve al archivo index.php (u otro similar) donde está la configuración para referenciar a TinyMCE.
   En la línea opción relative_urls:false, configuramos para que la URL de la imagen sea de formato /upload/images/imagen1.jpg y no de esta otra forma ../upload/images/imagen1.jpg. Así no tendremos problemas desde donde se llame a la imagen.
   En la línea theme_advanced_buttons1, donde especificamos que botones aparecen en el editor cambiamos image por phpimage, para mostrar la ventana del Subir Imagen.

   <script type="text/javascript" src="tiny_mce/tiny_mce/tiny_mce.js"></script>
   <script language="javascript" type="text/javascript">
   	tinyMCE.init({
   relative_urls: false,
   		mode : "textareas",
   		plugins : "phpimage",
   		theme : "advanced",
   		theme_advanced_toolbar_location : "top",
   		theme_advanced_toolbar_align : "left",
   		theme_advanced_statusbar_location : "bottom",
   		theme_advanced_resizing : true,
   		theme_advanced_resize_horizontal : false,
   		theme_advanced_buttons1 : "bold,italic,strikethrough,separator,styleselect,formatselect,separator,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,phpimage,separator,code",	
   		theme_advanced_buttons2 : "",
   		theme_advanced_buttons3 : "",
   		content_css : "tiny_mce/estilo_editor.css",
   	});
   </script>

5. Finalmente cuando carguemos nuestro editor y le demos clic en el botón imagen veremos esta ventana. Listo para cargar e insertar nuestras imagenes.
   

Espero le sirva la información.