Home Authors Publicaciones porJesus Liñan

Jesus Liñan

948 PUBLICACIONES 1 COMENTARIOS
Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

Si hace falta un sencillo💰 aceptamos formatear la compu💻 😂😂😂😂

Una publicación compartida de RibosoMatic Code (@ribosomatic.code) el

0 135

Solo parece! 😁

Una publicación compartida de RibosoMatic Code (@ribosomatic.code) el

map

En un post anterior informarmos de D3.js, una biblioteca JavaScript para manipular documentos basados en datos. D3 le permite enlazar datos arbitrarios a un modelo de objetos de documento (DOM) y, a continuación, aplicar transformaciones basadas en datos al documento. Por ejemplo, puede utilizar D3 para generar una tabla HTML de una matriz de números. O bien, utilizar los mismos datos para crear un gráfico de barras SVG interactivo con transiciones suaves e interacción. La página oficial cuenta con excelente documentación y buenos ejemplos.

Justamente para ver el potencial de esta biblioteca, encontramos un tutorial (en inglés) de como usarlo para hacer hermosos mapas web. Aquí el vínculo: A Map to Perfection: Using D3.js to Make Beautiful Web Maps.

Vía: toptal

0 4033

Lisa Smith, quizo compartir esta infografía sobre razones de peso para elegir maquetar sobre HTML5 muy interesante y gracias por tu trabajo.

Top Reasons to Choose HTML5 Right Now

Esta infografía es cortesia de HTML5 Templates.

El proyecto Mono ha llamado mi atención desde hace ya buen tiempo. He estado probándolo desde Ubuntu en una versión anterior. Pero en esta ocasión y con la versión actual vamos a probarlo desde plataforma Windows. En primer lugar para lo que no hayan escuchado de Mono, pues es una plataforma de software diseñada para permitir a los desarrolladores crear aplicaciones multi-plataforma de forma sencilla. Es una implementación de código abierto del .NET Framework de Microsoft basada en los estándares ECMA para C# y Common Language Runtime (CLR). Puedes encontrar mas información que explica mejor esto en los siguiente enlaces:

Vamos a empezar instalando los paquetes necesarios para el primer uso, luego codificaremos en lenguaje C# el cual usaremos en este y próximas entregas.

  1. Instala la plataforma de desarrollo Mono. Descarga el paquete desde http://www.go-mono.com/mono-downloads/download.html. Seleccionamos la plataforma Windows, descargamos e instalamos.
  2. Instalar el IDE. Bien ahora vamos a descargar el entorno para desarrollar nuestras aplicaciones. Descargaremos Xamarin Studio (llamado tambien MonoDevelop) desde http://monodevelop.com/Download, seleccionamos la versión estable y también tendremos que descargar e instalar dos paquetes adicionales: el SDK para Windows .NET Framework 4 y GTK (bibliotecas de objetos y funciones para crear interfaces gráficas de usuario) para Windows.
    Recomendación: Instala estos 2 últimos paquetes descritos antes de instalar el entorno de desarrollo Xamarin Studio.

Vamos a crear una pequeña aplicación para probar: detectar que versiones del .NET Framework tenemos instalada en nuestro equipo.

Abrir Xamarin Studio : Clic en New ó Archivo > Nuevo > Solución.

xamarin_screenshot

 

En el cuadro de dialogo: En el listado izquierdo seleccionamos C# y Proyecto de consola y le damos un nombre a nuestro proyecto, finalmente OK.

xamarin_new

Automáticamente se creará un archivo Program.cs que contiene la clase MainClass con el método Main que es el punto de inicio en toda aplicación desarrollada en C#.

Ahora vamos a agregar otro método ó función que realizará la labor de listar las versiones de .Net Framework instaladas. Luego del método Main, copia y pega lo siguiente:

private static void GetVersionFromRegistry() { using (RegistryKey ndpKey = RegistryKey.OpenBaseKey(RegistryHive.LocalMachine, RegistryView.Registry32).OpenSubKey(@"SOFTWARE\Microsoft\NET Framework Setup\NDP\")) { foreach (string versionKeyName in ndpKey.GetSubKeyNames()) { if (versionKeyName.StartsWith("v")) { RegistryKey versionKey = ndpKey.OpenSubKey(versionKeyName); string name = (string)versionKey.GetValue("Version", ""); string sp = versionKey.GetValue("SP", "").ToString(); string install = versionKey.GetValue("Install", "").ToString(); if (install == "") //no install info, ust be later Console.WriteLine(versionKeyName + " " + name); else { if (sp != "" && install == "1") { Console.WriteLine(versionKeyName + " " + name + " SP" + sp); } } if (name != "") { continue; } foreach (string subKeyName in versionKey.GetSubKeyNames()) { RegistryKey subKey = versionKey.OpenSubKey(subKeyName); name = (string)subKey.GetValue("Version", ""); if (name != "") sp = subKey.GetValue("SP", "").ToString(); install = subKey.GetValue("Install", "").ToString(); if (install == "") //no install info, ust be later Console.WriteLine(versionKeyName + " " + name); else { if (sp != "" && install == "1")
  { Console.WriteLine(" " + subKeyName + " " + name + " SP" + sp); } else if (install == "1") { Console.WriteLine(" " + subKeyName + " " + name); } } } } } } }

Aparte de este método tendremos que incluir el espacio de nombre Microsoft.Win32, esta linea irá en la parte superior luego de using System; deberia quedar así:

using System; using Microsoft.Win32;

En el método Main tendremos que llamar a la función que hemos creado, debería quedar asi:

public static void Main (string[] args) { //Console.WriteLine ("Hello World!"); GetVersionFromRegistry (); }

Finalmente ejecutamos la aplicación presionando Ctrl+F5:

xamarin_console1

Este código quizá no sea tan funcional pero lo que queríamos mostrar era un ejemplo inicial de como instalar y usar Mono y Xamarin Studio para desarrollar una aplicación. En futuras entregas veremos mas del proyecto Mono y aplicaciones con interfaz gráfica.

 

Me preguntaban hace poco acerca de ¿Cómo obtener una URL personalizada en Google+?. La verdad es que Google está haciendo disponible esta característica para las páginas de Google Plus pero poco a poco y además hay que cumplir con algunos criterios. Ten en cuenta lo siguiente si quieres un URL personalizada: un criterio para que se habilite está opción es que al menos 10 personas deben estar en nuestro círculo. Otra a considerar, tu cuenta debe tener mas de 30 días de antigüedad y activa. Además debes proporcionar tu número de teléfono como parte del proceso para que envien un código de confirmación.

Y dentro de las Condiciones de uso de las URL personalizadas de Google+, menciona:

Las URL personalizadas por ahora son gratis, pero es posible que empecemos a cobrar una tarifa por ellas. En tal caso, se lo informaremos con antelación para que decida si quiere continuar o no con el servicio.

Bueno teniendo en cuenta lo anterior, probe en mi caso si tenia acceso a esta caracteristicas, y de paso explicaremos brevemente como obtener tu URL personalizada (sino no tienen aún esta opción, bueno sera cuestión de esperar):

Acceso a tu cuenta en Google+, ve al icono de inicio y selecciona Perfil.

opciongoogle

 

En la parte superior de esta página puedes ver los siguiente:

opciongoogle1

 

 

Esto te indicará que puede reclamar u obtener tu URL personalizada. Haz clic en Obtener URL. El resto de pasos son intuitivos y fácil de llevar a cabo.

googleplus3

 

Luego de proporcionar tu número de teléfono y recibir el código de confirmación.

googleplus4

 

La ventaja de esta URL amigable es que podemos ir directamente al contenido de algún usuario, de esta manera:

  • google.com/+URLpersonalizada/publicaciones
  • google.com/+URLpersonalizada/sobremi
  • google.com/+URLpersonalizada/fotos
  • google.com/+URLpersonalizada/videos
  • google.com/+URLpersonalizada/masunos

No hay duda que tiene buena pinta las URL personalizadas, pero lo que no “guta” mucho es que podría cobrarse una tarifa por ellas. Bueno a esperar.

Info: URL Personalizadas

0 10878

Han pasado ya unos años desde que el diseño web adaptativo es una técnica en el desarrollo web que no debe pasarse por alto. Es muy importante que un sitio web se adapte al entorno del usuario, con tanto dispositivos que tienen acceso a internet. Así que no solo nuestra estructura e imágenes deben adaptarse sino también complementos (plug-ins de jQuery por ejemplo). Y si de presentador de diapositivas (slideshow) se trata hay muchos y pues este es uno de ellos: SlideMe.

Es un presentador de diapositivas hecho en jQuery. Entre las características que cuenta este complemento están:

  • diseño web adaptable
  • CSS 3
  • compatible con varios navegadores
  • facil de configurar
  • fácil de instalar y usar
  • múltiples instancias
  • pantalla completa
  • de atractivo diseño
  • diferentes efectos de transición entre diapositivas

Uso básico

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/slideme.js"></script>
<link rel="stylesheet" href="css/slideme.css" type="text/css" media="all"/>
$(document).ready(function() {
   $('#foo').slideme(); 
});

En la parte HTML

<div id="foo">
  <ul class="slideme"> <!-- Class "slideme" is mandatatory! -->
    <li><img src="img/one.jpg" alt="One"/></li>
    <li><img src="img/two.jpg" alt="Two"/></li>
    <li><img src="img/three.jpg" alt="Three"/></li>
    <li><img src="img/four.jpg" alt="Four"/></li> 
  </ul>
</div>

Enlace | SlideMe

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.

repository

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.

install sdk

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.

menu new

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.

show sdk

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.

project

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.

xml file

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:

<html>
	<head>
	</head>
	<body style="background-color:#1c1c1c;margin:0">
		<h1>Hola Mundo</h1>
		<?php echo "Simple Sample"; ?>

	</body>
</html>

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 <url>app://index.html</url> y cambiamos el valor por index.php.

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

sample finish

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

0 10190

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

zaccordion

liteAccordion

liteaccordion

JavaScript Accordion Menu Wizard

accordion menu

Tutorial: Colorido acordeón

accordion css jquery

Tutorial: Acordeón elegante

elegant accordion

jQuery Accordion

jq accordion

Tutorial: Easy Accordion

jquery easy accordion

jQuery Accordion Plugin

jquery plugin accordion

Vallenato Simple jQuery Accordion

vallenato

Tutorial: Accordion Madness

accordion

Tutorial: Como crear Accordion

tuto accordion

Tutorial: Acordeón Vertical

verticual sliding

Tutorial: Stupid Simple Accordion Menu

jquery stupid

Tutorial: Acordeón Grid con jQuery

grid accordion

Tutorial: Simple jQuery Accordion

simple accordion

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.

socialite

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

Enlace | Socialite

Demos | Hover, Scroll

SOCIAL

SOCIAL

0FansLike