OFICITI OS: Entorno de aplicaciones empresariales en la nube.

Oficiti OS: Entorno de aplicaciones empresariales en la nube.

El objetivo de este entorno es crear un escritorio totalmente online de aplicaciomes útiles para las empresas. Este paradigma es conocido como cloud computing, con muchas ventajas:

• Disponibilidad del servicio y/o aplicación web 24h/7dias/365dias.
• Abstracción de problemas de mantenimiento, soporte y instalación.
• Accesibilidad mediante diferentes tecnologías compatibles, tales como: pdas, móviles, portátiles, blackberrys, netbooks, etc.
• No saturación del uso del disco duro en el ordenador o aplicación que se usa, debido a que solo se necesita un navegador web, e internet.

En los últimos tiempos están proliferando mucho este tipo de aplicaciones, para lo cual ha habido que superar un reto importante que es el de llevar lla experiencia RIA (Rich Internet Applications) a los usuarios. La historia de los últimos años nos ha traído diversas tecnologías, basadas en Flash (Adobe), Java (Sun), Silverlight (MS). Todas muy interesantes, pero con la desventaja de necesitar algún tipo de extensión en los navegadores que podría no estar presente. Ha sido esta limitación lo que le ha dado la victoria  a Javascript y la  tecnología  AJAX.

ExtJS encaja dentro de este esquema como un motor que permite crear aplicaciones RIA, con las siguientes ventajas:

• Alto Rendimiento, Interfaces de Usuarios muy configurables.
• Un modelo de Componentes muy bien diseñado y extensible.
• Una API muy fácil de usar.
• Licencias Open Source.
• Compatibilidad de Browsers.

Oficiti intenta reunir el conjunto de aplicaciones útiles para la empresa de hoy (Herramientas de colaboración, ERP, Facturación, Gestión Documenta, recursos humanos, etc). Las aplicaciones  se encuentran centralizadas en un escritorio web basado en qwikioffice.

Arquitectura: Ext + Java/PHP + Oracle/MySQL

Gestión del sistema

qwikioffice: Escritorio

extplorer: Explorador de ficheros

AeroSql: Web database console
Administración de usuarios, perfiles y aplicaciones
Backups centralizados.
Auditorias de acceso.

Herramientas Empresariales:

Opengoo/Tine20: Mail, calendarios, Tareas (Ext + PHP)

SDSimple: Facturación y contabilidad (Ext y Java)

nan21: ERP/CRM (Ext y Java)

Docasu: Gestor documental (Ext con Alfreco)

IceHRM: Gestión de recursos humanos (Ext +Java)

Cubusmail: Web Mail (Ext +Java)

El proyecto ha sido  presentado a la segunda edición del  BBVA Open Talent.

Nuevo emprendimiento

Estas últimas semanas me encuentro, montando un nuevo negocio, se trata de una agencia de eventos  especializada en despedidas de solteras y solteros. Trabajaremos principalmente en Sevilla aunque nos descartemos otros lugares en un futuro. Su nombre Eventun y su web www.eventun.com se encuentra de momento en construcción.  Os seguiré contando los próximos días más detalles.

Mi sitio web hackeado

Debido a una vulnerabilidad de la versión 1.0.13 de JOOMLA la página www.openti.net ha sido hackeada introduciendo en varias de sus páginas elementos HTML del tipo iframe que apuntaban a sitios maliciosos.

Pronto Google empezó a advertir  del problema de seguridad al intentar acceder a la página:

 

Accediendo a las herramientas de webmaster de Google te explicaban mejor el problema.

Investigando un poco, encontré como resolver el problema de seguridad de esa versión de JOOMLA, el problema está en usar el usuario administrador por defecto, entonces, cree otro usuario administrador, y al anterior le quité los permisos de administrador. además restablecí  el sitio web con una copia de seguridad, En caso de no poseer copia de seguridad, habría que eliminar de todas las páginas de índices el elemento iframe.

Aquí una captura del whois de la página que contiene el código malicioso.

Me he planteado si presentar un denuncia al Grupo de delitos telemático de la guardia civil.

 https://www.gdt.guardiacivil.es/denuncias.php

Pero de momento no procederé.

AJAX y SEO, recomendación de Google

Tras haber adaptado la web a AJAX, Google había dejado de indexar parte de las páginas de la misma.

Google nos dice cómo debemos usar AJAX para que su buscador pueda acceder también a esos contenidos.

http://googlewebmastercentral.blogspot.com/2007/11/spiders-view-of-web-20.html

los enlace en la página deben de quedar de la siguiente forma:

 

<a href="paginadestino.php" onClick="funcionAjax(parametros);return false">enlace</a>

 

Con lo cual en nuestra función que modifica los enlaces en vez de modificar el atributo “href” añadiremos el atributo “onclick”, la forma de añadir este atributo depende del navegador que usemos.

 

function ajaxLinks () {

	for (var i=0;i < document.links.length;i++) {

		var extension = document.links[i].href.substr(document.links[i].href.length-3,3);

		if(extension!="pdf")

		{

			if(document.links[i].href.substr(0,<?php echo strlen($mosConfig_live_site)?>)=="<?php echo $mosConfig_live_site ?>"||document.links[i].href.substr(0,9)=="index.php:"){

				var url = "javascript:ajaxload('index2.php"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"')";

				if(url.indexOf('?')<0)

				{

					url = "javascript:ajaxload('index2.php?"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"')";

					if(document.links[i].attachEvent)

					{

					//Do IE Specific

					document.links[i].attachEvent("onclick", new Function("ajaxload('index2.php?"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"');return false;"));

					} else {

					document.links[i].setAttribute("onclick","ajaxload('index2.php?"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"');return false;");

					}



				}

				else

				{

					if(document.links[i].attachEvent)

					{

					//Do IE Specific

					document.links[i].attachEvent("onclick", new Function("ajaxload('index2.php"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"');return false;"));

					} else {

					document.links[i].setAttribute("onclick","ajaxload('index2.php"+document.links[i].href.substring(<?php echo strlen($mosConfig_live_site)+10?>)+"');return false;");

					}


				}




				//document.links[i].href = url;

			}

		}

	}

}

 

Esperemos que para la próxima indexación de Google, vuelva a indexar todas las páginas.

 

Un Saludo.

3 Métodos sencillos para decidirse por una tecnología o aplicación

 

Internet nos da muchas posibilidades, y una de ellas es poder analizar y estudiar las tendencias tecnológicas actuales, cuando tenemos que elegir entre una tecnología para el desarrollo de una aplicación o elegir entre un conjunto de aplicaciones para implantar en nuestra empresa, nos encontramos con un gran abanico de posibilidades.

Pues aquí muestro tres formas que suelo usar yo a la hora de decantarme por una de ellas.

Usar Google Trends, el cual nos da una comparativa de la evolución en el tiempo del volumen de búsqueda que han tenido, pudiendo ver esta evolución en diferentes zonas geográficas

La segunda es comparar el número de ofertas profesionales en páginas como www.infojobs.net

 

La tercera forma es comparar buscando en redes de profesionales como www.xing.com el número de profesionales que usan esa tecnología o aplicación. También se puede filtrar por distintas zonas geográficas.

Con estos tres métodos podemos tener ya una idea bastante clara para tomar una decisión acertada, a la hora de elegir entre tecnologías o aplicaciones parecidas.

 

Un Saludo.

Poniendo Ajax a tu Joomla CMS II

En esta segunda parte del post anterior,  veremos como cargar de forma asíncrona el menú izquierdo, dependiendo de la página mostrada. Además incorporaremos un fading al mostrar los contenidos cargados asíncronamente, de esta manera la experiencia de usuario es mucho más atractiva. Podéis ver como queda en www.openti.net .

Para poder cargar el menú izquierdo de forma asíncrona, crearemos una página php que nos devuelva el contenido de estos menús, y llamaremos con el AJAX de mootools a este php, para recoger el contenido y colocarlo en el div que crearemos en dicha posición.

Primero creamos en la raiz del sitio la página php, mod_left.php,  que será una copia de index2.php pero con el final del fichero cambiado, para que no cargue el contenido de un artículo, sino que cargue el menú izquierdo, llamando a:

<?php mosLoadmodules(“left”,-2)?>

	<body>

			<?php if(mosCountmodules("left")){ ?>

				<?php mosLoadmodules("left",-2)?>

			<?php } ?>


		</body>

	</html>

	<?php

	}

} else {

	mosLoadmodules("left",-2);

}

 

Una vez creada esta página tenemos  que llamarla desde nuestro fichero ajax.js

function ajaxloadLeftColumn(url){

	$('ajaxleft').innerHTML=$('loading2').innerHTML;

	//call showload function to show preloader		

	try

	{

		url = url.replace('index2.php','mod_left.php');

		new Ajax(url, {

			//loaded content would be updated inside this division

			update: 'ajaxleft',

			//this should be true if you want to execute JS inside the loaded content

			evalScripts: true,

			onComplete:function(r)

			{

				//It sets the type property of the script tag, 

				//then puts the script body inside of the element (between the opening and closing script tags),

				//then injects into the head of the page

				var script = new Element('script')

				script.setProperty('type','text/javascript');

				try

				{

					script.setHTML(r);


				}

				catch(e)

				{


				}

			},

			onSuccess:function(){

				try

				{

					//The ajaxlinks function is being called here,I defined this function in footer					

					ajaxLinks();


					iniciaObjeto($('ajaxleft'));

					efecto($('ajaxleft'));


				}

				catch(e)

				{


				}

			}

		}).request();

	}

	catch(e)

	{


	}

}

En la primera línea mostramos la imagen de carga en el div del menú:

	$('ajaxleft').innerHTML=$('loading2').innerHTML;

Esta petición asíncrona se ejecutará siempre que se haga una petición de página, mandándole los mismos parámetros que a la petición de la página, de esta manera la función de mosLoadmodules nos devolverá el menú que corresponde a la página que se está pidiendo, con esto para construir nuestra url de petición solo tendremos que hace lo siguiente:

url = url.replace('index2.php','mod_left.php');

A esta url haremos la petición AJAX recogeremos el contenido y lo mostraremos en el div ajaxleft que creamos en la posición de nuestro menú izquierdo en el index.php de nuestra plantilla.

Posteriormente  llamamos a las funciones de iniciaOjecto y efecto para obtener el fading, al mostrar el contenido:

 

function iniciaObjeto(obj)

{	obj.style.opacity = 0;

    obj.style.MozOpacity = 0;

    obj.style.KhtmlOpacity = 0;

    obj.style.filter = 'alpha(opacity=' + 0 + ')';

    obj.style.zoom=1;//necesario para Explorer

}



function setOp(obj, value) {

    obj.style.opacity = value/100;

    obj.style.MozOpacity = value/100;

    obj.style.KhtmlOpacity = value/100;

    obj.style.filter = 'alpha(opacity=' + value+ ')';

    obj.style.zoom=1;//necesario para Explorer

}

function efecto(o){

    for (var c=0 ; c < 100; c++)

        (function(c){

             setTimeout(function(){setOp(o,c);} , 10*c);

        })(c);

}  

Es todo es todo, si tenéis  alguna duda, o necesitáis los fuentes completos, pedírmelo.

 

Un Saludo.

Usando las redes sociales

Más de la mitad de los internautas españoles usan  las redes sociales, esto hace que estas comiencen a despertar interés como canal de marketing idóneo.

Facebook, MySpace, Tuenti, Xing, Linkedin, Twiter … Son nombres que nos resultan familiares pero llevan muy poco tiempo entre nosotros y han llegado para quedarse. Es un reto para las empresas tener un espacio en estas redes sociales, ya que a través de estas llegarán a un gran numero de clientes, y  lo más importante, servirá para que los clientes contentos, te recomienden a sus amigos, ya que en la sociedad actual interconectada y globalizada la opinión de los amigos cuenta más que nunca.

Algunas de estas redes sociales no solo sirven para encontrar clientes sino también buscar socios, empleados, etc.

Pasos para crear una campaña en una red social:

1. Define cual es tu público objetivo. A partir de esto elige la red que más se adapte a ese público. Por ejemplo si lo que buscas como público es un perfil joven, la red ideal sería Tuenti o si buscas un público más empresarial  la red ideal sería Xing.
2. Ofrece un valor añadido, para poder traer el interés, ofrece descuentos, eventos, etc. No tiene sentido estar en una red social y no ofrecer nada.
3. Comunícate de tú a tú, evita la publicidad, es algo básico en las redes sociales.
4. No seas intrusivo, no avasalles  con publicidad.

 

El objetivo de OpenTI es darse de alta en estas rede sociales y ofrecer un valor añadido a través de ellas.

Ya tenemos sitio en Facebook y Tuenti, con el primer objetivo de que nos conozcan la gente más cercana.

http://es-es.facebook.com/pages/OpenTI/46266623597

http://www.tuenti.com/#m=profile&uid=63542314

En breve abriremos los espacios tanto en Xing como Linkedin.

 

Un Saludo.

Tarjeta de visita

Con algo de Photoshop, basándome en el diseño de la web, y rompiendo un poco con las tarjetas de visita tradicionales. Aquí teneis el diseño de mi tarjeta para OpenTI.

Realicé un pedido de 250 tarjetas a través de Vistaprint, con una calidad de papel de 265g/m².

El precio fue el siguiente:

Cantidad total del pedido – IVA excluido: 30,46 EUR
Gastos de envío y tramitación – IVA excluido: 5,69 EUR
Cantidad en concepto de impuestos IVA (16,00%): 5,79 EUR
Cantidad total: 41,94 EUR

Una vez que me llegó a casa, el resultado es que la calidad del papel es bastante buena, pero los textos podrían haber quedado con mayor resolución ya que, si hay poca luz, no se distingue demasiado bien.

Para la próxima tanda habrá que buscar una solución para esto.

Que os parece, ¿mejoraríais algo?.

Un Saludo.

Los 10 principios de Google

Vía http://www.laflecha.net

Encuentro este artículo, que es una joya y que todo debríamos tenerlo siempre a la vista,. Ahí va:

El logro de un equilibrio armónico de estos diez principios es un desafío constante. Así, un producto que cumple con todos esos objetivos es "Googley", eso significa que será útil y gustará a muchas personas de todo el mundo. Estos son los 10 principios que son para Google, los más importantes:

• Foco en las personas

  Su vida, su trabajo, sus sueños. La tecnología más puntera no sirve de nada si no cubre las necesidades de los usuarios.

• Cada milisegundo cuenta

  Nada es más valioso que el tiempo de la gente. La velocidad es una bendición para los usuarios. También es una ventaja competitiva que Google no sacrifica sin una buena razón.

• La simplicidad es poderosa

  Facilidad de uso, velocidad, atractivo visual y accesibilidad. Incluir sólo las funciones que la gente necesita para lograr sus objetivos.

• Enganchar a los principiantes y atraer a los expertos.

  Los mejores productos de Google, parecen simples, pero incluyen poderosas características.

• Atrévete a innovar.

  Google alienta proyectos innovadores que asumen riesgos, siempre y cuando respondan a las necesidades de los usuarios.

• Diseñar para el mundo

  La World Wide Web ha abierto todos los recursos de Internet para personas de todo el mundo. El objetivo es crear un producto universalmente accesible.

• Hacer planes para hoy, pero tambien para el futuro.

  Google nunca trata de aumentar los ingresos de un producto, si eso significa reducir el número de usuarios de Google en el futuro.

• Alegrar los ojos sin distraer la mente

  El diseño es muy importante, porqué genera la primera impresión. Pero no hay que olvidar los objetivos. La audiencia y el contecto cultural es lo que importa. El mejor proyecto es aquel cuyo diseño agrada a los usuarios y les es de utilidad.

• Ser dignos de la confianza de la gente

  Ser transparente sobre cómo se utiliza la información y nunca compartir datos sin el consentimiento explícito del usuario.

• Añadir un toque humano

  Los diseños de Google tienen personalidad y solicitan feedback, y intentar mejorar como respuesta a ese feedback de los usuarios.

Poniendo AJAX en tu CMS Joomla

Desde hace tiempo tengo la idea, creo que buena, de incorporar AJAX a la página Web de www.openti.net, con sus grandes beneficios:

• Carga más rápida de las páginas.
• Mejor experiencia de usuario y mayor impacto para este.
• Menor tráfico de datos, con lo cual permitirá mayor número de usuarios concurrentes.
• Tomar tendencia hacia la Web 2.0

Pero también tenemos que tener cuidado con otra serie de aspectos:

• No impedir la indexación de partes del contenidos a los navegadores.
• No impedir a los generadores de estadísticas (Yo uso Google Analytics) que puedan controlar este tipo de tráfico.

Llevo desde ayer integrando la librería de MooTools en la web, por lo general es bastante sencillo, pero tengo algunos problemillas pendientes de resolver, como la carga de la página de contacto que está fallando la evaluación de los javascripts que validan el formulario.

Cosas que necesitas considerar:

• Crear un fichero ajax.js que contiene todas las funciones necesarias
• Incluir tanto mootools.js y ajax.js en el head de la página index.php
• Colocar DIV de precarga donde desees dentro del index.php.
• Colocar un DIV con un ID <div id="ajaxcontainer"> donde se encuentra el mainbody de nuestra plantilla, que es donde se cargan el contenido de los artículos, y coloca el mainbody actual dentro de esta división, para que cuando se haga una solicitud de página, la página se cargará en este DIV.
• Incluir un código javascript que cambiará todos los enlaces dentro de la página por algo así: javascript:ajaxload(‘index2.php?option=com_frontpa ge&Itemid=1′)

El DIV ajaxcontainer deberá ser parecido a esto:

  1: <div id="ajaxcontainer">

  2:       <div id="main_content">

  3:              <?php mosMainBody(); ?>

  4:       </div>

  5: </div>

y la función ajaxlink antes de cerrar la etiqueta body, la cual sustituirá todos los enlaces para que llamen a la función AJAX, en vez de al link que recargaría la página, es un pequeño parche pero funciona, otra opción sería cambiar todos nuestro enlaces desde la administración de Joomla, pero este proceso puede llegar a ser muy tedioso:

  1:  <!-- Start of AjaxLink function for changing    all the links of page -->

  2:          <script type="text/javascript">

  3:          <!--

  4:          function ajaxLinks () {

  5:          for (var i=0;i < document.links.length;i++) {

  6:          if(document.links[i].href.substr(0,<?php echo strlen($mosConfig_live_site)?>)=="<?php    echo $mosConfig_live_site ?>"||document.links[i].href.substr(0,9)=="index.php:"){

  7:          document.links[i].href = "javascript:ajaxload('index2.php"+document.links[i].href.substring(<?php    echo strlen($mosConfig_live_site)+10?>)+"')";

  8:          }}}

  9:          ajaxLinks();

 10:          -->

 11:          </script>

 12:          <!-- End of AjaxLink function -->

 13:          </body>

 14:          </html>

El ajax.js

  1: //This function is for switching beetwin two condtions of preloader division that you need to 

  2: //place in your page here the division name is: loading 

  3: function showLoad(show){

  4:     if(show){

  5:         $('loading').style.display="inline";

  6:     }else{

  7:         $('loading').style.display="none";

  8:     }

  9: };

 10: //This is ajax function that you can use inside your page, the only parameter that 

 11: //i defined for this function is url, all the content of loaded url would be placed inside 

 12: //a division that is ajaxconatiner here. As you see evalscript is true and that is the only 

 13: //way that any Javascript can be executedinside the loaded content 

 14:

 15: function ajaxload(url){

 16:     //call showload function to show preloader 

 17:     window.scrollTo(0,100);

 18:     document.getElementById('ajaxcontainer').innerHTML='';

 19:     showLoad(true);

 20:     try

 21:     {

 22:         new Ajax(url, {

 23:             //loaded content would be updated inside this division 

 24:             update: 'ajaxcontainer',

 25:             //this should be true if you want to execute JS inside the loaded content 

 26:             evalScripts: true,

 27:             onComplete:function(r)

 28:             {

 29:                 //It sets the type property of the script tag, 

 30:                 //then puts the script body inside of the element (between the opening and closing script tags), 

 31:                 //then injects into the head of the page 

 32:                 var script = new Element('script')

 33:                 script.setProperty('type','text/javascript');

 34:                 try

 35:                 {

 36:                     script.setHTML(r);

 37:                 }

 38:                 catch(e)

 39:                 {

 40:                 }

 41:             },

 42:             onSuccess:function(){

 43:                 try

 44:                 {

 45:                     //This would disappear preloader div 

 46:                     showLoad(false);

 47:                     //The ajaxlinks function is being called here,I defined this function in footer 

 48:                     ajaxLinks();

 49:                 }

 50:                 catch(e)

 51:                 {

 52:                 }

 53:             }

 54:         }).request();

 55:     }

 56:     catch(e)

 57:     {

 58:     }

 59: }

 60: 

Para todo esto me basé en la plantilla:

http://www.web2coder.com/downloads/web2coder-Mittwoch.zip

Podéis ver una demostración en www.openti.net , aunque faltan algunos detallitos.

Un Saludo.