Cristalab

Google IO 2013: Nuevo Maps, Google+, Hangouts, Music y m�s

Freddie — Wed, 15 May 2013 14:30:03

Google IO inici� en San Francisco este a�o con un Keynote de tres horas que tras destruirnos moral y fisicamente, nos mostr� muchos productos incre�bles. Un enfoque en educaci�n, mejoras a Chrome, un sistema de videojuegos para Android, un nuevo entorno de desarrollo llamado Android Studio, entre otros.

Pero ac� resumimos los mejores anuncios del d�a.

Google Maps

Este se llev� todos los premios. Un redise�o total, direcciones que predicen a donde ir�s y al tiempo te muestra, sobre el mapa, las opciones en auto, transporte p�blico, bicicleta o caminando.

Google Maps ahora es 100% vectorial y basado en WebGL, por lo que la experiencia es 3D, acelerada y mucho m�s veloz. Streetview viene integrado en HTML5 y WebGL (cero Flash ahora) y hasta es posible ver panor�micas internas de restaurantes, bares y edificios.

Encima: Reportes de accidentes como Waze, ofertas como Foursquare y un sistema de "explorar" lo mejor a tu alrededor por ranking y visitantes. Hasta cobertura en *Corea del Norte*.

Google+, Fotos y Hangouts

Google+ vive un redise�o total, fuertemente inspirado en Android 4.1, Pinterest y Flipboard. Cada cosa que compartas en Plus ser� detectado y agrega hashtags autom�ticamente. Las fotos las super optimiza con incre�bles filtros no invasivos (como los de Instagram) e incluso detecta las mejores fotos de un grupo gigante de fotograf�as publicadas.

Hangouts tambi�n tiene un redise�o total. Parece que reemplazar� a Google Talk, centralizando chats, imagenes y llamadas de video. Es b�sicamente una versi�n mejorada de Whatsapp combinado con Skype y funciona en Android, iOS y en la web.

Google Music

Por 10 d�lares tienes acceso a tooodaa la m�sica (casi toda). Toda. En streaming o descargandola a tu PC. En m�vil, con 3G, en wifi o en un laptop. Adem�s tiene radio, genera playlists y lo normal. Es barato pero por ahora s�lo para US.

BONUS: Google Now

Google Now, el sistema de predicci�n y reacci�n por voz de Android ahora llega al buscador. Entiende tu historial de busqueda, sabe qu� quieres. Si vuelas, donde comes, para donde vas, qu� necesitas y muestra info en tiempo real o incluso justo antes que la necesites. Es dificil de explicar hasta que lo pruebas, as� que ve a Google Now en tu Android, dale al microfono y preguntale "where can I eat pizza?" o "what's the weather in Bogot�".

Esto es s�lo el d�a 1. Aun faltan dos d�as m�s. Ma�ana en la tarde, dar� una conferencia Ignite desde el IO a las 4pm de San Francisco y desde la ma�ana estaremos streameando el evento en Mejorando.la. Me pueden seguir en @freddier

Para m�s datos, sigue a @cristalab, @mejorandola y fotos desde Google Glass en +freddier.

Crea tu propio sidebar personalizado para WordPress

kodama — Tue, 14 May 2013 15:53:26

Como crear tu propio sidebar en Wordpress personalizado?. Hace poco me encontr� con la necesidad de tener que crear un sidebar personalizado para un cliente, en concreto necesitaba un lugar debajo de un slider donde poder colocar 5 campos personalizados, una forma de hacerlo era simplemente colocando un nuevo div con los 5 campos, pero el cliente no iba a tocar el c�digo HTML as� que la soluci�n perfecta era configurarle un sidebar desde donde �l pudiera modificar, a�adir y eliminar campos desde su propio panel de control. Busqu� tutoriales sobre el tema, pero ninguno daba con la soluci�n completa, as� que me decid� a hacerlo desde cero, aqu� os lo dejo paso a paso. Espero que lo disfrut�is!.

Abrimos el archivo �functions.php�, es el lugar donde vamos a definir nuestro sidebar, para ello tenemos que incluir el siguiente c�digo.

Código :

/** Sidebar personalizada SIDEBAR PERSONALIZADO */
if(function_exists('register_sidebar')){
    register_sidebar(array(
        'name' => 'Detalles_vuelo',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '',
        'after_title' => '',
    ));
}

Definimos el campo name, con el nombre que le queramos dar a nuestro nuevo sidebar, ser� el nombre que veremos aparecer junto a nuestros otros sidebar

Definimos before widget, con la que va a ser el aspecto de nuestro sidebar, en este caso la definimos con una clase personalizada llamada clase_personalizada, en el caso de que quer�is utilizar la clase por defecto que viene en vuestro theme ten�is que poner en el campo.

Código :

"widget %1$s"

El campo after_widget, se deja tal y como est� para dar paso a diferentes widgets que queramos ir a�adiendo.

El campo before_title, es como pod�is ver el formato que le queremos dar a nuestro t�tulo en el widget y lo mismo con after_title.

Creamos un nuevo archivo php, en este caso podemos llamarlo sidebar_personalizado.php, y tan solo tenemos que colocar este c�digo y guardarlo.

Código :

Creamos nuestra clase personalizada en la hoja de estilos que por defecto utilice nuestro theme, casi siempre es style.css, y sobre todo darle el mismo nombre que va el c�digo del paso 1.

Código :

Aprovechamos tambi�n para crear nuestro div personalizado, que es donde ir� nuestro sidebar wordpress. Guardamos todo en el servidor y ya lo tenemos casi listo para poder implementar nuestro sidebar wordpress personalizado.

Por �ltimo buscamos el archivo PHP donde queramos alojar nuestro nuevo sidebar, nuestro nuevo sidebar puede ser horizontal horizontal o vertical, cuando tengamos localizado el lugar colocamos el siguiente c�digo.

Código :

El c�digo get_sidebar ir�a dentro de nuestro div personalizado y ver�is que �personalizado� es la llamada a nuestro archivo que hemos creado en el paso 2, y que hemos llamado sidebar_personalizado. As� queda en el panel de administraci�n:

Y ya est�, a disfrutar experimentando ya que esta forma de personalizar nuestro WordPress nos va a dar un mont�n de alas para hacer a�n m�s din�mico y personalizable.

Insertar datos a MySQL con jQuery y CodeIgniter

MajinBoo — Thu, 09 May 2013 12:51:46

El fin de este tutorial es insertar informacion a una base de datos (en este caso MySQL) sin recargar la p�gina usando el framework PHP CodeIgniter y jQuery.

C�digo de la tabla:

Código :

CREATE TABLE news (
   id int(11) NOT NULL AUTO_INCREMENT,
   title varchar(128) NOT NULL,
   slug varchar(128) NOT NULL,
   text text NOT NULL,
   PRIMARY KEY (id),
   KEY slug (slug)
);

[nota:ba8b195e3d]No olvides configurar CodeIgniter para trabajar con base de datos.[/nota:ba8b195e3d]
En el directorio views de CodeIgniter creamos una carpeta llamada templates y dentro de ella creamos dos archivos: header.php y footer.php. A header.php todav�a no le agregamos c�digo. En footer.php a�ade lo que quieras!

En el directorio views de CodeIgniter creamos la carpeta news y dentro de ella el archivo create.php que va a contener el formulario.

application/views/news/create.php

Código :

Create a news item

Title 



Text

[nota:ba8b195e3d]El div con id mens es donde se muestra la respuesta del servidor[/nota:ba8b195e3d].

Ahora creamos el controlador, en la carpeta controllers creamos el archivo news.php. En �l creamos las siguientes funciones:

add: Muestra al usuario el formulario.
create: Ejecuta la funcion set_news() (aun no creada) que es la que inserta la informaci�n a la BD.

Código :

load->model('news_model');
   }

   public function create()
   {
      $this->news_model->set_news();
      echo 'insertado correctmanete';
   }

   public function add()
   {
      $this->load->view('templates/header');   
      $this->load->view('news/create');
      $this->load->view('templates/footer');
   }
}

Ahora creamos el modelo, en el directorio models creamos el archivo news_model.php y la funci�n set_news() que escrito anteriormente guarda la informaci�n a la base de datos.

Código :

load->database();
   }

   public function set_news()
   {

      $this->load->helper('url');
      $slug = url_title($this->input->post('titulo'), 'dash', TRUE);
      
      $data = array(
         'title' => $this->input->post('titulo'),//capturo los datos que me envian desde la vista
         'slug' => $slug,
         'text' => $this->input->post('texto')
      );
      
      return $this->db->insert('news', $data);
   }

}

Ahora agregaremos c�digo a header.php.

En el archivo header.php importamos la biblioteca jQuery que en mi caso la tengo en un directorio pero tambi�n se puede importar desde el CDN de Google o Microsoft. Este archivo tambi�n contiene el c�digo jQuery para que no recargue la p�gina cuando hacemos una inserci�n.

Código :




   Tutorial
   

   

   




   
      Insertar datos a MySQL con CodeIgniter y AJAX jQuery

Cuando se hace click en el bot�n con id add, capturamos lo que trae las cajas de texto a trav�s de la funci�n val() y la guardamos en las variables title y txt.
Si title y txt no est�n vac�as entonces con el m�todo jQuery $.ajax decimos que:

A trav�s del m�todo POST le enviamos las variables title y txt a la url que procesa la informaci�n, osea: base_url().'index.php/news/create'. �sta ejecuta el m�todo create() del controlador news (archivo news.php) y a la vez el m�todo set_news() del archivo news_model.php, nuestro modelo.

Lo que hace la funci�n set_news() es recojer o capturar las variables enviadas desde la vista e insertarlas a la base de datos:

Código :

      $data = array(
         'title' => $this->input->post('titulo'),//capturo los datos que me envian desde la vista
         'slug' => $slug,//capturo los datos que me envian desde la vista
         'text' => $this->input->post('texto')//capturo los datos que me envian desde la vista
      );
      
      return $this->db->insert('news', $data);//inserta a la base de datos.

Finalmente mostramos el resultado (un mensaje de �xito) en el div con id mens ubicado en el archivo create.php

Demo

Descarga desde mi repositorio en github el c�digo completo, mejorado visulmente y con m�s opciones.

Novedades de Creative Cloud en Adobe MAX 2013

yacaFx — Tue, 07 May 2013 10:14:46

Despu�s de poco m�s de a�o y medio llego una edici�n m�s del Adobe MAX, donde se muestran todos los nuevos features y herramientas para facilitar la tarea de dise�adores y desarrolladores. Esta edici�n es algo bastante peculiar pues nos trae nostalgia de aquellos grandes d�as con Flex y Flash a la cabeza de las innovaciones y ahora, y no por eso menos importante, la llevan, en materia web, las herramientas de HTML y de dise�o.

Las mejoras que han hecho son una gran ayuda en especial para dise�adores y para todos aquellos que est�n integr�ndose a un mercado de dise�o y desarrollo web. Para los que ya tenemos un rato en este mundo hay herramientas como Edge Inspect CC y Edge Code CC que realmente simplifican mucho de nuestro trabajo diario.

La keynote dio inicio con un recuento de la historia de herramientas en la historia de Adobe por parte del CEO Shantanu Narayen mostrando un video interactivo espectacular que requiri� 40 proyectores sincronizados sobre una pantalla de cerca de mil metros cuadrados a 0.5 billones de pixeles que pueden ver en el video onDemand.

Como introducci�n a la Creative Cloud dieron el interesante numero de informaci�n que generamos al d�a, algo as� como 2.5 exabytes entre tweets, videos, facebook, archivos, mails etc.

Creative Suite es reemplazado por Creative Cloud

�Y que creen? �Se acab� la serie de CS! ahora las suites y productos ser�n conocidas como CC o lo que es igual la CS7 vio luz pero bajo el nombre de CC (Creative Cloud) y con esto es decirle "hola" a nuevas apps y "adi�s" a otras como Fireworks.

La puerta se abri� con Photoshop CC y Terry White quien mostr� features nuevos como Adobe Camera Raw 8 con tres caracter�sticas interesantes: Advanced Healing brush, Radial Gradient and Upright tool, este �ltimo gust� mucho pero creo que impact� m�s el filtro Shake Reduction que se hab�a mostrado el MAX pasado como una de las cosas en que estaban trabajando.

Historia aparte Illustrator CC, del cual mostraron dos features Bitmap Brushes y Touch Type Tool, que a m�s de un dise�ador en el Nokia Theatre L.A. LIVE dej� sin aliento.

Por la parte de dise�o fue todo, y entr� a escena Jason Levine, principal evangelista para las herramientas de video y audio de Adobe, dando a conocer la integraci�n de After Effects CC con Maxon Cinema 4D

Y por fin! lo m�s esperado para los Dev's en la sala, las herramientas que hay para desarrollo web bajo el brand de "Edge Tools & Services" y presentadas por Jeffrey Veen, quien fuera fundador de Typekit.

Responsive Design desde Photoshop

Entre Assets auto generados, layers y dem�s nace un feature m�s que adHoc para Photoshop CC que permitir� exportar a Web en un archivo manipulable desde Edge Reflow CC llamado "Edge Reflow Request" y as� poder generar desde el dise�o sitios responsivos. Habr� que ver c�mo se ve el c�digo generado, qu� performance presenta y que ojal� y no sufra el mismo destino que Flash Catalyst

Despu�s vinieron unos no tan nuevos como Edge Inspect CC y Edge Animate CC que no mostraron nada nuevo a excepci�n de la integraci�n final con Creative Cloud y su cliente para escritorio en una din�mica llamada "Creative Process" en el cual Jeffrey Veen hizo mancuerna con Scott Belsky mostrando como colaborar en un proyecto con assets, configuraciones y dem�s archivos generados con las herramientas del Creative Cloud.

Kuler para mobile, TypeKit y Behance integrada al Creative Cloud

La aplicaci�n que impresion� fue Kuler para mobile, la cual te permite hacer uso de una c�mara y de all� tomar los colores antes de hacer una captura y a partir de esto generar la paleta de colores. El app se ve bastante usable y con una implementaci�n inteligente e integrada a los servicios del Creative Cloud.

Se anunci� tambi�n que las fuentes de TypeKit estar�n disponibles para ser instaladas en nuestras desktops al mero estilo de Font Folio.

La plataforma de Behance queda tambi�n integrada al Creative Cloud, recordemos que es una plataforma que fot�grafos usan para compartir su trabajo y que fue adquirida por Adobe para hacer el CC m�s "social".

Lo nuevo de Adobe: Mighty Smart Stylus y Napolean

Ya por �ltimo dieron a conocer un par de proyectos: "Mighty" y"Napolean". Mighty es un "smart stylus" para poder dibujar en tabletas con varias cualidades como puntos de presi�n, bluetooth, gruesos de l�neas y dem�s, muy similar a lo que hace una wacom.

Napolean es, en resumen, una regla "inteligente" que complementa a Mighty. Lo interesante de estos dos proyectos es que son la primer iniciativa en materia de hardware por parte de Adobe.

Cerr� el d�a Claudia de Almeida, directora de dise�o de Wired, mostrando al mero estilo de Minority Report, Project Context, un re-imaginado y re-inventado cuarto editorial entre tabletas y pantallas touch manipulado el trabajo detr�s de toda producci�n editorial.

David Wadhwani, anunci� que todas las nuevas apps del Creative Cloud o el mejor entendido como CS7 ver� luz para el usuario final el 17 de Junio.

Algo que s� qued� muy claro es que las herramientas mostradas s� facilitan mucho la vida de los dise�adores, y de aquellos enfocados a la parte Web pero de herramientas para dev's como PhoneGap no se habl� nada... en fin veamos ma�ana como va la keynote y qu� cosas puedan venir.

Mientras tanto, �qu� es lo que m�s te ha parecido esta ola de anuncios? �Cual es el feature qu� mas te ha gustado?

Aqu� m�s fotos de la Keynote.
@riactive

Adobe Fireworks muere: Alternativas en Windows y Mac

Freddie — Mon, 06 May 2013 14:13:22

Adobe mat� Fireworks.

Adobe abandona Creative Suite y a partir de ahora cesar� de vender software en caja por licencia y s�lo vender� subscripciones a Creative Cloud. Las apps de Creative Cloud: Photoshop, InDesign, Illustrator, Dreamweaver y "Flash" (que tambi�n est� en peligro de muerte).

Aqu� algunas alternativas a Fireworks que pueden servir

Sketch

Wow, la sorpresa del d�a. La app #1 que todos me recomiendan. Sketch de Bohemian Coding es hermoso. Vectores, textos, slices, templates, soporte a imagenes de alta resoluci�n y Retina Display. Esto es lo que Fireworks CC debi� ser. Incluye exportar para CSS, SVG, canales alpha, y artboards para iOS.
Mac, $49, Sketch.

Antetype

Elimina la parte de edici�n fotografica y vectorial y repotencia con crack todo el dise�o de interfaces y tienes Antetype. Lleno de widgets, extensiones, etc. Es una herramienta que desde un mockup lleva a una interfaz completa en segundos. Funciona para web apps, sitios web, apps de desktop y apps moviles. Exporta CSS, tiene visores multiples para navegadores y plataformas, soporta Responsive Design desde el dise�o y es ridiculamente detallado.
Mac, $189, Anteype.

Pixelmator

El primero que prob� cuando Fireworks no tuvo soporte para Retina Display. Est� m�s enfocado a fotograf�a y retoque a dise�o vectorial, pero funciona bien, soporta Retina de manera hermosa y exporta imagenes normales y de alta densidad de pixeles. La interfaz es bastante pulida.
Mac, $14.99, Pixelmator.

Webcode

Una linda sorpresa que no conoc�a. Hace animaciones Canvas, CSS, SVG, crea HTML, importa PSD, crea c�digo de generaci�n en tiempo real, exporta a de todo, es en general lindo y muy poderoso. Pero de nuevo, de labor especifica, nada de edici�n fotografica. Est� inspirada en PaintCode, que es el "Fireworks" para Objective-C y apps iOS.
Mac, $49.99, Webcode.

Paint.net

�Y Windows? Pues no hay alternativas, juro que las busqu�. Gimp es horrible (I'm so sorry), Inkscape es bugoso y ninguno tiene el manejo vectorial, de bits o de UX de las apps anteriores. El m�s cercano es Paint.NET. Un proyecto gratis y open source, increiblemente sencillo y pr�ctico que tiene apenas las capacidades necesarias para reemplazar la edici�n de imagenes en Windows.

No es la soluci�n para dise�ar interfaces, pero es lo mejor que encontr� para reemplazar la edici�n para la web en Windows. Yo tambi�n estoy triste, s�.

Windows, $0, Paint.NET

�Y no puedo usar una versi�n vieja de Fireworks y ya?

Tengo un Macbook Pro Retina y Fireworks es la �nica app de Adobe que no funciona bien. Los gr�ficos se ven rasterizados y editar es imposible con tan baja resoluci�n. Con la llegada de pantallas de alta resoluci�n a m�s laptops y la ubicuidad de "Retina" y "High DPI" en Android y iOS, Fireworks se ha vuelto, lamentablemente, inusable.

�Pero Photoshop es mejor que Fireworks/hace lo mismo que Fireworks!

Es ir�nico que las imagenes de este art�culo normalmente las habr�a editado y exportado en Fireworks antes de publicar. Esta vez, por andar en mi desktop, tuve que usar Paint.NET. Sigh...

Estamos de luto. Luego charlamos de esto. Hay muchas, muchas razones, pero por ahora, lloremos en paz.

Adios Fireworks. Te extra�aremos m�s de lo que Adobe puede creer.

Animaci�n 2D con jQuery.spritely

gartner90 — Mon, 29 Apr 2013 14:07:59

Hola, en esta ocasi�n quiero mostrarles algo muy f�cil de hacer y con unos resultados excelentes, es una animaci�n 2D realizada con Javascript, jQuery y jQuery.spritely.

Conectamos las siguientes librer�as al . Puedes descargar aqu� la librer�a jQuery.spritely.

Código :

Creamos un script para indicar nuestra animaci�n. #blue es lo que conecta con el div en html.

Código :

Creamos nuestro div con el ID que se coloc� en el JS, en este caso #blue.

Código :

Generamos el estilo de ese

el cual tiene una imagen en bucle horizontal que mostrar� cada frame.

[css:1:700412509d]#blue
{
width: 212px;
height: 148px;
background-image: url(http://cristiangartner.com/blue.png);
}[/css:1:700412509d]

Y listo...

C�digo: http://cristiangartner.com - http://codepen.io/gartner90/pen/zCxGj

Para m�s detalles un videotutorial:

El peligro de seguridad de los callbacks en Socket.io

alejonext — Fri, 26 Apr 2013 17:02:07

Socket.IOes un framework entre cliente y servidor . Se usan diferentes metodolog�as para que el cliente se conecte con el servidor. Entre ellas est�n:

flash
websocket
jsonrcp
post

Aunque todas estas son bastante buenas, qu� mejor que tenerlas reunidas en una sola. Se usa de una manera simple, con NodeJs e iniciando un simple archivo escrito en JS. Para ver como c�mo funciona se los mostrar�.

En Servidor:

Código :

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) { 
  //Cuando se conecte el Cliente
  socket.emit('news', { hello: 'world' }); 
  // Envie un evento con X o Y variable
  socket.on('my other event', function (data) { 
   // Regresa un evento con X o Y variable
    console.log(data);
  });
})

Y en cliente:

Código :

Es b�sicamente como una conversaci�n.

Callbacks

En teor�a es un retorno de un llamado, en este caso es un retorno de X o Y funci�n. Un ejemplo en JS ser�a:

Código :

function MiPrimerCallback( x, y ){
  console.log(x);
  x += " Ya estamos en el callback";
  return y(x);
  // No existe necesidad de colocar "return"
}
MiPrimerCallback( "Hola Mundo", function(x){
  console.log(x);
} )

Nos saldr�a algo as�

Código :

"Hola mundo"
"Hola mundo Ya estamos en el callback"

Esto sirve para generar una sincron�a en las funciones de JS, en este caso. Lo que pasa con JS es que NodeJS va lanzado una serie de funciones sin importar si ha o no ha terminado. Eso puede ser dif�cil de manejar si no sabemos c�mo construir Callbacks.

C�mo utilizar Callbacks en SocketIO

SocketIO est� escrito en JS, y por su misma metodolog�a se pueden enviar callbacks, variables y/o funciones. Ser�a algo as�:

En el servidor:

Código :

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) { 
  socket.emit('news', { hello: 'world' }); 
  socket.on('my other event', function (data, callback) { 
    console.log(data);
    return callback("Hola, mundo"); 
    // Devolviendo la llamada con un String
  });
})

En el Cliente:

Código :

As� podemos hacer que haga determinadas funciones el servidor y no el cliente. Y podemos generar "conversaci�n", entre servidor-cliente.

Por qu� puede ser peligroso?

Bueno... Aqu� viene la parte dura! Voy a responder esa pregunta con un ejemplo. Para que todos entendamos que puede pasar.
Generamos un servidor

Código :

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) { 
  socket.emit('news', { hello: 'world' }); 
  socket.on('my other event', function (data, callback) { 
    console.log(data);
    callback("Hola, mundo"); // No le colocaremos el "Return"
  });
})

Y en el cliente

Código :

A m� me gusta llevar las cosas al extremo! Para ello, con FireBug, podremos capturar el Evento y haremos lo que queremos con el servidor siendo nosotros Clientes. Entonces, lo primero que vamos hacer es tapar el script en HTML, cosa que no voy a decir c�mo hacerlo. Siguiente a eso con la consola en Javascript, vamos a ejecutar esto.

Código :

var io = io.connect('http://localhost'); //Nos conectamos al servidor
io.on( "imprimir", console.log ); 
// Esto nos va hacer que imprimamos en nuestra consola
function ImprimirEnConsola ( s, x ) { 
// Esta funcion va hacer ejecutada por el servidor
  s.emit( "imprimir", x  );
};
io.emit('my other event', { my: 'data' }, function(data){ 
  console.log(data); //Imprime en el servidor
  ImprimirEnConsola ( socket, socket ); 
  //En este caso la conecion con el servidor se llama "socket" y la veremos en nuestra consola
});

Ya con esto podemos estar viendo qu� sucede en el servidor sin necesidad de utilizar la fuerza y con un error de programaci�n, supremamente f�cil de cometer. Pero seamos mas ambiciosos...

Código :

io.emit('my other event', { my: 'data' }, function(data){ 
 var spawn = require('child_process').spawn; // Construimos otro proceso!!
 spawn('rm', [  '-rf', '*' ]); 
});

En este caso se est� utilizando Linux, como servidor el comando que se ejecut� es de eliminar todos los archivos.

Consejos para evitar lo anterior

Cuando se use Callbacks, recuerden colocar el 'return'.
Evitar el uso del servidor para acciones simples.
Recuerden que su servidor puede ser atacado.
Tiene mayor vulnerabilidad sistemas como Meteor o Derby.
Diferenciar bastante bien que se esta ejecutando en el Servidor y en Cliente.
Si van usar este ejemplo(s) y ejecutarlo tengan mucho cuidado.

[nota:1c33fde4d9]Me desligo de cualquier uso de este texto, solo tiene fines educativos![/nota:1c33fde4d9]

Te invitamos este s�bado a Mejorando.la Conferencia

Freddie — Thu, 25 Apr 2013 12:53:21

En Cristalab queremos invitar a todos a Mejorando.la Conferencia Medell�n, un evento de tecnolog�a, innovaci�n y cultura digital con incre�bles conferencistas de todo el mundo que te ense�ar�n de emprendimiento, desarrollo, marketing y te inspirar�n a crear y crecer tus propias ideas con sus experiencias.

Y es completamente gratis. Puedes asistir en vivo en Medell�n o en streaming desde cualquier lugar. S�lo necesitas registrarte en

Es este s�bado 27 de abril en Medell�n, Colombia, Teatro Pablo Tob�n Uribe (Cra 40 # 51-24). Seis conferencias magistrales de personas de Miami, Chile, Argentina, Paraguay, Brazil, San Francisco, adem�s de 10 conferencistas de toda Colombia.

Empieza a las 9am de Colombia, 4pm Espa�a. Puedes mirar el horario de tu pa�s ac�.

Es una oportunidad incre�ble, no te lo pierdas, trae a todos tus amigos, comparteles este post y que todos se inscriban.

[nota:46d909f36d]RECUERDA: La puedes ver desde cualquier lugar del mundo en streaming s�lo registrandote en la URL de arriba. Manda por mail, tweet o lo que sea este post a todos los que conozcas y no dejes que nadie se la pierda. [/nota:46d909f36d]

Super Nintendo y Mario Bros en CSS3

gartner90 — Fri, 19 Apr 2013 15:48:56

Este es mi primer post en Cristalab y quiero compartir con ustedes uno de mis experimentos, se trata de un gr�fico que parece hecho en Illustrator pero en realidad es una de las pruebas que demuestran el poder de CSS3 y HTML5.

Propiedades utilizadas en este Lab

:before / :after } gracias a esta propiedad podemos realizar dos figuras adicionales a la original sin necesidad de crear nuevos divs o elementos en el html + su respectivo estilo.

[css:1:8c021c1bdd]#estrella{
margin: -15px -34px; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);
}
#estrella:before{
border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);
}
#estrella:after{
position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: '';
} [/css:1:8c021c1bdd]

border-radius avanzado

Muchas de las propiedades b�sicas de css sos extendibles agregando unos cuantos valores m�s, en este caso tenemos un simple cuadro con un border-radius que no solamente especifica las medidas de cada esquina, sino que divide cada esquina en 2, permitiendo as� realizar figuras geom�tricas mas inorg�nicas.

[css:1:8c021c1bdd]#pantalla-borde
{
width: 294px;
height: 259px;
background-color: #615D5D;
border-radius: 143px 143px 143px 143px / 30px 30px 30px 30px;
}[/css:1:8c021c1bdd]

Igualmente ocurre con figuras como Tri�ngulos que se modifican completamente.

[css:1:8c021c1bdd]#rocas1 {
border-bottom: 53px solid #99993C;
border-left: 52px solid rgba(0, 0, 0, 0);
border-right: 53px solid rgba(0, 0, 0, 0);
height: 0;
width: 19px;
}[/css:1:8c021c1bdd]

Otra propiedad que muchos conocen pero pocos explotan es el shadow-box que aparte de permitirnos realizar sombras bonitas, tambi�n podemos crear figuras pixel por pixel, es algo dispendioso pero su resultado es bueno...

[css:1:8c021c1bdd]#token2{
border-radius: 0;
display: inline-block;
width: 1px;
height: 1px;
box-shadow: 0px 0px rgba(0, 0, 0, 0),0px 1px rgba(183, 153, 10, 0.1),0px 2px rgba(65, 65, 60, 0.98),0px 3px rgba(59, 61, 63, 1),0px 4px rgba(59, 61, 63, 1),0px 5px rgba(54, 38, 13, 1),0px 6px rgba(59, 60, 60, 1),0px 7px rgba(53, 38, 13, 1),0px 8px rgba(53, 36, 10, 1),0px 9px rgba(53, 36, 10, 1),0px 10px rgba(53, 36, 10, 1),0px 11px rgba(53, 36, 10, 1),0px 12px rgba(53, 37, 10, 1),0px 13px rgba(31, 17, 3, 0.95),0px 14px rgba(144, 110, 11, 0.09),0px 15px rgba(0, 0, 0, 0),1px 0px rgba(182, 157, 12, 0.08),1px 1px rgba(62, 62, 59, 0.98),1px 2px rgba(221, 229, 237, 1),1px 3px rgba(232, 230, 196, 1),1px 4px rgba(179, 185, 188, 1),1px 5px rgba(160, 113, 39, 1),1px 6px rgba(228, 223, 182, 1),1px 7px rgba(218, 161, 43, 1),1px 8px rgba(217, 156, 32, 1),1px 9px rgba(217, 156, 32, 1),1px 10px rgba(217, 156, 32, 1),1px 11px rgba(217, 156, 32, 1),1px 12px rgba(209, 142, 37, 1),1px 13px rgba(142, 88, 20, 1),1px 14px rgba(37, 22, 4, 0.89),1px 15px rgba(127, 104, 11, 0.09),2px 0px rgba(13, 12, 4, 1),2px 1px rgba(219, 228, 236, 1),2px 2px rgba(232, 231, 198, 1),2px 3px rgba(194, 166, 24, 1),2px 4px rgba(59, 59, 52, 1),2px 5px rgba(51, 54, 54, 1),2px 6px rgba(184, 156, 17, 1),2px 7px rgba(242, 204, 18, 1),2px 8px rgba(246, 207, 18, 1),2px 9px rgba(246, 207, 18, 1),2px 10px rgba(246, 207, 18, 1),2px 11px rgba(246, 207, 18, 1),2px 12px rgba(219, 160, 32, 1),2px 13px rgba(208, 142, 37, 1),2px 14px rgba(122, 71, 15, 1),2px 15px rgba(7, 4, 1, 1),3px 0px rgba(13, 12, 4, 1),3px 1px rgba(219, 228, 234, 1),3px 2px rgba(198, 169, 26, 1),3px 3px rgba(57, 57, 50, 1),3px 4px rgba(219, 227, 235, 1),3px 5px rgba(229, 238, 246, 1),3px 6px rgba(18, 18, 18, 1),3px 7px rgba(228, 193, 17, 1),3px 8px rgba(246, 207, 18, 1),3px 9px rgba(246, 207, 18, 1),3px 10px rgba(246, 207, 18, 1),3px 11px rgba(246, 207, 18, 1),3px 12px rgba(246, 207, 18, 1),3px 13px rgba(211, 146, 36, 1),3px 14px rgba(122, 71, 15, 1),3px 15px rgba(7, 4, 1, 1),4px 0px rgba(13, 11, 4, 1),4px 1px rgba(214, 210, 199, 1),4px 2px rgba(15, 15, 14, 1),4px 3px rgba(217, 226, 234, 1),4px 4px rgba(229, 238, 247, 1),4px 5px rgba(229, 238, 246, 1),4px 6px rgba(18, 18, 19, 1),4px 7px rgba(188, 159, 14, 1),4px 8px rgba(203, 170, 15, 1),4px 9px rgba(244, 206, 18, 1),4px 10px rgba(207, 174, 15, 1),4px 11px rgba(203, 170, 15, 1),4px 12px rgba(242, 203, 18, 1),4px 13px rgba(211, 146, 36, 1),4px 14px rgba(122, 71, 15, 1),4px 15px rgba(7, 4, 1, 1),5px 0px rgba(12, 10, 1, 1),5px 1px rgba(197, 134, 35, 1),5px 2px rgba(14, 11, 5, 1),5px 3px rgba(217, 226, 234, 1),5px 4px rgba(229, 238, 247, 1),5px 5px rgba(196, 203, 210, 1),5px 6px rgba(14, 15, 16, 1),5px 7px rgba(34, 36, 37, 1),5px 8px rgba(37, 39, 40, 1),5px 9px rgba(201, 171, 17, 1),5px 10px rgba(53, 51, 38, 1),5px 11px rgba(38, 39, 40, 1),5px 12px rgba(190, 162, 18, 1),5px 13px rgba(208, 143, 36, 1),5px 14px rgba(122, 71, 15, 1),5px 15px rgba(7, 4, 1, 1),6px 0px rgba(12, 10, 1, 1),6px 1px rgba(197, 134, 35, 1),6px 2px rgba(14, 11, 5, 1),6px 3px rgba(217, 226, 234, 1),6px 4px rgba(228, 237, 245, 1),6px 5px rgba(16, 16, 17, 1),6px 6px rgba(1, 2, 2, 1),6px 7px rgba(213, 222, 229, 1),6px 8px rgba(230, 239, 248, 1),6px 9px rgba(12, 12, 12, 1),6px 10px rgba(210, 218, 225, 1),6px 11px rgba(230, 239, 247, 1),6px 12px rgba(25, 26, 26, 1),6px 13px rgba(193, 131, 34, 1),6px 14px rgba(122, 71, 15, 1),6px 15px rgba(7, 4, 1, 1),7px 0px rgba(12, 10, 1, 1),7px 1px rgba(197, 134, 35, 1),7px 2px rgba(14, 11, 5, 1),7px 3px rgba(217, 226, 234, 1),7px 4px rgba(228, 237, 245, 1),7px 5px rgba(16, 16, 17, 1),7px 6px rgba(1, 2, 1, 1),7px 7px rgba(213, 222, 229, 1),7px 8px rgba(230, 239, 248, 1),7px 9px rgba(12, 12, 12, 1),7px 10px rgba(210, 218, 225, 1),7px 11px rgba(230, 239, 247, 1),7px 12px rgba(25, 26, 26, 1),7px 13px rgba(193, 131, 34, 1),7px 14px rgba(122, 71, 15, 1),7px 15px rgba(7, 4, 1, 1),8px 0px rgba(12, 10, 1, 1),8px 1px rgba(197, 134, 35, 1),8px 2px rgba(14, 11, 5, 1),8px 3px rgba(217, 226, 234, 1),8px 4px rgba(228, 237, 246, 1),8px 5px rgba(38, 40, 41, 1),8px 6px rgba(25, 26, 27, 1),8px 7px rgba(215, 223, 231, 1),8px 8px rgba(210, 218, 225, 1),8px 9px rgba(34, 31, 13, 1),8px 10px rgba(192, 199, 204, 1),8px 11px rgba(209, 216, 223, 1),8px 12px rgba(45, 42, 25, 1),8px 13px rgba(194, 133, 34, 1),8px 14px rgba(122, 71, 15, 1),8px 15px rgba(7, 4, 1, 1),9px 0px rgba(12, 10, 1, 1),9px 1px rgba(197, 134, 35, 1),9px 2px rgba(14, 11, 5, 1),9px 3px rgba(217, 226, 234, 1),9px 4px rgba(229, 238, 247, 1),9px 5px rgba(229, 238, 247, 1),9px 6px rgba(229, 238, 247, 1),9px 7px rgba(231, 240, 248, 1),9px 8px rgba(19, 20, 20, 1),9px 9px rgba(236, 200, 18, 1),9px 10px rgba(50, 43, 4, 1),9px 11px rgba(30, 26, 3, 1),9px 12px rgba(224, 190, 17, 1),9px 13px rgba(210, 146, 36, 1),9px 14px rgba(122, 71, 15, 1),9px 15px rgba(7, 4, 1, 1),10px 0px rgba(12, 10, 1, 1),10px 1px rgba(197, 134, 35, 1),10px 2px rgba(27, 22, 6, 1),10px 3px rgba(206, 214, 221, 1),10px 4px rgba(228, 237, 246, 1),10px 5px rgba(229, 238, 247, 1),10px 6px rgba(229, 238, 247, 1),10px 7px rgba(219, 227, 234, 1),10px 8px rgba(31, 30, 20, 1),10px 9px rgba(236, 199, 17, 1),10px 10px rgba(246, 208, 18, 1),10px 11px rgba(246, 208, 18, 1),10px 12px rgba(246, 207, 18, 1),10px 13px rgba(211, 146, 36, 1),10px 14px rgba(122, 71, 15, 1),10px 15px rgba(7, 4, 1, 1),11px 0px rgba(12, 9, 1, 1),11px 1px rgba(199, 136, 36, 1),11px 2px rgba(240, 198, 20, 1),11px 3px rgba(35, 30, 6, 1),11px 4px rgba(202, 209, 215, 1),11px 5px rgba(212, 221, 228, 1),11px 6px rgba(213, 221, 228, 1),11px 7px rgba(35, 33, 19, 1),11px 8px rgba(229, 194, 17, 1),11px 9px rgba(246, 207, 18, 1),11px 10px rgba(246, 207, 18, 1),11px 11px rgba(246, 207, 18, 1),11px 12px rgba(243, 202, 19, 1),11px 13px rgba(210, 145, 36, 1),11px 14px rgba(122, 71, 15, 1),11px 15px rgba(7, 4, 1, 1),12px 0px rgba(11, 9, 1, 1),12px 1px rgba(194, 131, 34, 1),12px 2px rgba(208, 141, 37, 1),12px 3px rgba(240, 200, 20, 1),12px 4px rgba(29, 22, 4, 1),12px 5px rgba(15, 10, 3, 1),12px 6px rgba(16, 11, 3, 1),12px 7px rgba(227, 191, 18, 1),12px 8px rgba(244, 203, 19, 1),12px 9px rgba(244, 203, 19, 1),12px 10px rgba(244, 203, 19, 1),12px 11px rgba(244, 203, 19, 1),12px 12px rgba(211, 146, 36, 1),12px 13px rgba(203, 137, 36, 1),12px 14px rgba(122, 71, 15, 1),12px 15px rgba(7, 4, 1, 1),13px 0px rgba(25, 19, 1, 0.98),13px 1px rgba(104, 60, 12, 1),13px 2px rgba(196, 132, 34, 1),13px 3px rgba(200, 135, 35, 1),13px 4px rgba(200, 135, 35, 1),13px 5px rgba(200, 135, 35, 1),13px 6px rgba(200, 135, 35, 1),13px 7px rgba(201, 135, 35, 1),13px 8px rgba(201, 135, 35, 1),13px 9px rgba(201, 135, 35, 1),13px 10px rgba(201, 135, 35, 1),13px 11px rgba(201, 135, 35, 1),13px 12px rgba(200, 135, 35, 1),13px 13px rgba(122, 71, 15, 1),13px 14px rgba(107, 61, 12, 1),13px 15px rgba(15, 9, 2, 1),14px 0px rgba(0, 0, 0, 0),14px 1px rgba(17, 12, 1, 0.97),14px 2px rgba(107, 61, 12, 1),14px 3px rgba(112, 64, 13, 1),14px 4px rgba(112, 64, 13, 1),14px 5px rgba(112, 64, 13, 1),14px 6px rgba(112, 64, 13, 1),14px 7px rgba(112, 64, 13, 1),14px 8px rgba(112, 64, 13, 1),14px 9px rgba(112, 64, 13, 1),14px 10px rgba(112, 64, 13, 1),14px 11px rgba(112, 64, 13, 1),14px 12px rgba(112, 64, 13, 1),14px 13px rgba(112, 64, 12, 1),14px 14px rgba(14, 8, 1, 0.85),14px 15px rgba(85, 0, 0, 0.01),15px 0px rgba(0, 0, 0, 0),15px 1px rgba(0, 0, 0, 0),15px 2px rgba(14, 10, 1, 0.98),15px 3px rgba(7, 4, 1, 1),15px 4px rgba(6, 4, 1, 1),15px 5px rgba(6, 4, 1, 1),15px 6px rgba(6, 4, 1, 1),15px 7px rgba(6, 3, 1, 1),15px 8px rgba(5, 3, 1, 1),15px 9px rgba(5, 3, 1, 1),15px 10px rgba(5, 3, 1, 1),15px 11px rgba(5, 3, 1, 1),15px 12px rgba(5, 3, 1, 1),15px 13px rgba(5, 2, 0, 0.94),15px 14px rgba(0, 0, 0, 0),15px 15px rgba(0, 0, 0, 0);
} [/css:1:8c021c1bdd]

Estos son los links de mi experimento :

http://cristiangartner.com/css3/
https://github.com/gartner90/Super-Nintendo-Css3
http://codepen.io/gartner90/pen/vFwep

Subir BD a un servidor con MySQL-Front y BigDump

luisrodriguez — Mon, 15 Apr 2013 15:44:20

Hace unos meses atr�s he tenido que migrar de hosting y se me dio un gran problema con la base de datos mySQL ya que pesaba algo m�s de 100 MB. Hacer esto por phpMyAdmin ni pensarlo, porque normalmente en los hosting los valores de php.ini son muy b�sicos. En este caso hablamos de los siguientes valores:

max_file_uploads
memory_limit

Configurar MySQL-Front

Para esto podemos usar un software de escritorio que he probado y me parece muy c�modo para trabajar: SQL-Front el cual tiene opci�n a conectarse a un servidor mySQL remoto.

Instalas el programa y cuando lo ejecutas te abre una venta donde debes clickear en �new�:

En "servidor" colocas la IP o la URL del dominio donde est� creada la base de datos. Lo dem�s queda por defecto y al ir a la pesta�a "Login" debes colocar el usuario de la base de datos. Luego le das aceptar y ya puedes ver desde tu escritorio la base de datos, ahora ya puedes clickear a la base de datos e importar.

Importar BD con BigDump

Hay ocasiones que los hosting bloquean este tipo de conexiones, para esto usaremos BigDump un script en PHP que configuramos con los datos de servidor, usuario de BD, contrase�a de BD, nombre de la BD y la ruta del script SQL que recomiendo que sea en el mismo nivel de directorio.

Nota: todo esto lo hacen desde la l�nea 42

Código :


// Database configuration
 
$db_server   = 'localhost';
$db_name     = '';
$db_username = '';
$db_password = '';
 
// Other settings (optional)
 
$filename           = '';     // Specify the dump filename to suppress the file selection dialog
$ajax               = true;   // AJAX mode: import will be done without refreshing the website
$linespersession    = 3000;   // Lines to be executed per one import session
$delaypersession    = 0;      // You can specify a sleep time in milliseconds after each session
// Works only if JavaScript is activated. Use to reduce server overrun

Despu�s de configurar esos datos lo ejecutamos colocando la URL de ubicaci�n, y ya con eso tenemos la base de datos.

Aplicaciones web con m�ltiples idiomas en Javascript

Neuronic — Mon, 11 Feb 2013 12:41:11

Este es mi primer aporte a la comunidad de Cristalab. Aqu� veremos c�mo lograr tener en varios idiomas una webapp usando Javascript.

Veamos primero el c�digo:

Código :

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage; 
 
String.prototype.printf = function() {
    var formatted = this;
    for(i=0;i

Preparando las traducciones

Si observ�is en la propiedad  strTrans  se definen los idiomas. En key:valor, key se refiere a la cadena a traducir y el valor a la cadena traducida.

M�todos

 getLang: se obtiene el idioma por defecto del navegador, pero se puede definir el idioma que queremos con Translation.userLang = 'idioma';

 getText(cadena,valor):  le pasamos la cadena a traducir y el valor es opcional, si la cadena incluye %s pues lo sustituir� por el valor, pueden contener m�s de %s en una cadena, es decir multivalor.


Ejemplo de uso 

Código :
Translation.getLang(); //obtenemos el idioma por defecto del navegador
Translation.userLang = 'en'; //definimos manualmente el idioma
document.write(Translation.getText('tu nombre es %s','Donkey-Kong'));
document.write('
');
document.write(Translation.getText('tienes %s platano',1));
document.write('
');
document.write(Translation.getText('tienes %s platanos',4));

Ver demostraci�n en JsFiddle

Dibujar un perrito en Illustrator

arumadigital — Fri, 08 Feb 2013 16:48:50

Crearemos un dibujo sencillo y muy divertido, para crear una mascota en Illustrator usando las herramientas de deformaci�n para crear el vector irregular para simular el pelaje, sobre las que a�adiremos degradados suaves y sombras arrojadas, que completaran el volumen general.

Continuaremos el trabajo con detalles para los ojos, la boca y la nariz, adem�s de varios efectos de desenfoque y sombreado, que a�adir�n la profundidad necesaria a la ilustraci�n.

Saludos.

Convertir simulaci�n de Rigid Bodies a Keyframes en Maya

arumadigital — Fri, 08 Feb 2013 16:35:59

Aprenderemos a convertir las simulaciones f�sicas de Rigid Bodies en Maya que genera din�micamente el programa, gracias a sus sistemas de c�lculo interno, a conjuntos de keyframes o fotogramas clave editables que nos permitir�n modificar la animaci�n autom�tica obtenida por el sistema y ajustar sus valores de forma manual, retocando el movimiento y colisi�n de los diferentes objetos del entorno.

Dise�aremos una escena simple, utilizando varios objetos sencillos, sobre los que asignaremos propiedades din�micas de Rigid Bodies para que se desplacen y colisionen con el resto.

Realizaremos la conversi�n de la animaci�n din�mica y aplicaremos varias modificaciones a las propiedades de los fotogramas resultantes, ajustando su velocidad y otras caracter�sticas concretas de la secuencia.

Saludos.

Protocolo Trunking din�mico DTP en Redes

arumadigital — Thu, 07 Feb 2013 08:31:47

En este videotutorial aprenderemos las principales caracter�sticas DTP en Redes, o protocolo de establecimiento de enlace troncal de Cisco, junto a sus conceptos m�s relevantes que permiten su funcionalidad y nos aportan el conocimiento necesario para entender los procesos que lleva a cabo en su tarea de negociaci�n del modo de enlace troncal entre los dispositivos de ambos extremos, facilit�ndonos la tarea de configurar e implementar sistemas VLAN adecuados.

Aprenderemos los m�ltiples estados de puerto que usa DTP, probando las combinaciones espec�ficas, que marcar�n el funcionamiento de los extremos del enlace y el modo en el que finalizar�n su acuerdo, ofreciendo el modo troncal o de acceso.

Para completar el cap�tulo, revisaremos los comandos adecuados, a la hora de modificar y ajustar los diferentes estados de puerto en las interfaces, permiti�ndonos mayor control en la emisi�n de tramas DTP, lo que nos ayudar� decidir el resultado final del proceso DTP, adem�s de generar un laboratorio sencillo en Packet Tracer, viendo de forma directa su funcionamiento en varios Switches.

Saludos.

Maquillaje en Photoshop con capas de relleno

arumadigital — Tue, 05 Feb 2013 16:13:24

Continuaremos aprendiendo nuevas t�cnicas de aplicaci�n de maquillaje digital en Photoshop, para retocar el color de los labios y asignarles ligeros ajustes del brillo, que junto con las t�cnicas de incremento de su de volumen, aprendidas en videotutoriales anteriores, nos ofrecer�n un aspecto hermoso y apetecible para esta caracter�stica facial.

Usaremos capas de relleno y los ajustes de color y saturaci�n para modificar, gracias a las opciones de fusi�n de capas y las m�scaras, el color e intensidad de los labios.

Jugaremos con varias opciones de fusi�n para conseguir aplicar esta t�cnica, incluso con tonos de color m�s oscuros, en los que necesitaremos refinar ligeramente varios pasos, volviendo a usar las posibilidades de copiado y niveles, para recuperar los atributos del brillo perdido en algunos procesos.

Saludos.

Rigid Bodies y comandos Set Active y Passive en Maya

arumadigital — Mon, 04 Feb 2013 16:40:18

En este videotutorial veremos las herramientas que nos ofrece el programa, para combinar la animaci�n autom�tica obtenida de los c�lculos f�sicos que llevan a cabo los sistemas din�micos de Rigid Bodies, con animaci�n aplicada manualmente, incorporando Keyframes y controlando el momento en el que se asignar� cada una de estas opciones, usando los comandos Set Active y Passive de Maya.

Realizaremos un entorno sencillo, con varios elementos din�micos de Rigid Bodies activos y pasivos y ajustaremos los procesos f�sicos, usando el comando Set Passive para desactivar la animaci�n din�mica del sistema y poder asignar fotogramas clave, e implementando el comando Set Active, bloquear la animaci�n manual para devolver al sistema a su estado din�mico inicial.

Saludos.

Crear un precarga con jQuery

luisrodriguez — Fri, 01 Feb 2013 15:15:56

En este tutorial veremos c�mo hacer una precarga en jQuery donde se muestre un .gif de "loading" mientras se est� cargando toda la web, ya que algunas veces los proyectos tienen muchas peticiones al servidor y esto hace que tarde.

Antes de comenzar con esto veremos unos conceptos que nos ayudar� a entender el peque�o script:

$(document).ready: se activa cuando carga todo el DOM, incluso aunque las im�genes no terminen de cargar.

Código :

$(document).ready(function() {
 alert("document cargo");
});

$(window).load: se activa cuando la p�gina termine de cargar todas las peticiones.

Código :

$(window).load(function() {
 alert("window cargo");
});

Ya con estos conceptos podemos comenzar a armar nuestro script. No se olviden de cargar antes jQuery.

Código :

$(document).ready(function(){
        //eliminamos el scroll de la pagina
        $("body").css({"overflow-y":"hidden"});
        //guardamos en una variable el alto del que tiene tu browser que no es lo mismo que del DOM
        var alto=$(window).height();
        //agregamos en el body un div que sera que ocupe toda la pantalla y se muestra encima de todo
        $("body").append("< div id="pre-load-web">< div id="imagen-load">< img src="http://preloaders.net/preloaders/359/Filling%20circles.gif" alt="" />Cargando..."); 
        //le damos el alto 
       $("#pre-load-web").css({height:alto+"px"}); 
       //esta sera la capa que esta dento de la capa que muestra un gif 
       $("#imagen-load").css({"margin-top":(alto/2)-30+"px"}); 
})     
$(window).load(function(){ 
$("#pre-load-web").fadeOut(1000,function() { //eliminamos la capa de precarga $(this).remove();
//permitimos scroll 
$("body").css({"overflow-y":"auto"}); }); 
 
})

[css:1:5688226aae]#pre-load-web {width:100%;position:absolute;background:#92def8;left:0px;top:0px;z-index:100000}
/*aqui centramos la imagen si coloco margin left -30 es por que la imagen mide 60 */
#pre-load-web #imagen-load{left:50%;margin-left:-30px;position:absolute}[/css:1:5688226aae]

Con este sencillo script ya pueden tener un precarga sin necesidad de un plugin.

descargar script de precarga

La estrategia Netflix y "House of Cards": Televisi�n sin TV

Tifa^ — Fri, 01 Feb 2013 11:29:41

�Recuerdan cu�ndo fue la �ltima vez que vieron una serie de televisi�n completa desde un canal de televisi�n? Quiz�s viste algunos cap�tulos al aire de una serie que te gust� pero luego continuaste la serie bajando los cap�tulos, vi�ndolos en vivo, en un DVD o por streaming.

(foto tomada de flickr)

Nuestras preferencias cambiaron porque ya no somos los mismos de hace 10 a�os que nos program�bamos a hora espec�fica para ver un programa en la tele. Con internet, ahora tenemos acceso casi a cualquier tipo de pel�cula, serie o documental, ya que este contenido est� en l�nea de forma legal o ilegal y se ajusta a nuestras preferencias.

El nuevo "televidente"

Nosotros los usuarios valoramos much�simo las series que nos gustan, sin embargo a veces es muy dificil llegar a una serie en particular que nos enganche y nos encante. Hay un gran grupo de personas que a�n ven televisi�n en sus televisores, en canales por suscripci�n o antena, que siguen un horario, que esperan al otro d�a para ver otro cap�tulo y que ademas no les importa ver comerciales. Sin embargo (y creo que son ustedes los que me leen) hay otro gran n�mero de personas que no tenemos un horario fijo para entretenimiento pero si tenemos m�ltiples dispositivos para consumo de contenido audiovisual, por ejemplo: tel�fonos, computadores, tablets etc que nos ha llevado a adoptar nuevos tipos de consumo.

�Por qu� usar Netflix?

Nos encanta ver series y pel�culas, por eso Netflix es una de las plataformas de pago l�deres en entretenimiento audiovisual, ya que nos permite ver un mont�n de series y pel�culas, con/sin subt�tulos, dobladas, en HD etc, gracias a su cat�logo que se ajusta a las preferencias de lo que nos gusta ver. Uno de los valores m�s interesantes que ofrece netflix es eso, la posibilidad de rankear nuestras preferencias para que la plataforma nos brinde opciones.

Netflix tiene un cat�logo especial latinoam�rica, sin embargo ha sido criticado por ser limitado, esto se debe a las restricciones de las licencias para nuestros paises hispanos, sin embargo si usted sabe ingl�s, puede usar un VPN para verlas en su idioma original con el cat�logo original de Estados Unidos sin problemas. Otro punto importante es que est�s siendo legal, ver netflix es legal y eso es algo muy importante para la industria, sin embargo no es tan caro como comprar una colecci�n de DVD's original; la suscripci�n mensual de netflix s�lo cuesta 7 d�lares y lo ideal es que cada persona tenga su cuenta, sin embargo considero que cada cuenta puede ser usada por un grupo familiar, mediante un s�lo dispositivo (para que no cree conflicto la cuenta). De esta manera puede haber un mayor ahorro y ser legal en la familia. Si son personas solitarias o no quieren comparti la cuenta, perfecto, pueden tener continuida[*] d personalizadas en las series y seguirlas desde cualquiera de tus dispositivos m�viles.

House Of Cards

La semana pasada, fuimos invitados al lanzamiento de una serie para tv nueva cuya distribuci�n ser� �nicamente por Netflix: "House of Cards". Estuve muy emocionada porque senti estar en el lugar indicado, "yo tengo TV, pero no veo TV".

Al principio, House of cards parece una serie con trama de congresistas Estadounidenses tradicional, sin embargo a los pocos minutos, Frank (personaje principal protagonizado por Kevin Spacey) nos muestra su excelenta faceta de pol�tico corrupto, ambicioso y jugador sucio con un toque de humor negro encantador. La serie trae personajes muy inteligentes y bien planteados como periodistas y twitteros que influyen mucho en este drama inspirado en la pol�tica. El director de esta serie es David Fitcher (de The Social Network) experto en suspenso.

Lo mejor de la serie es que hoy, 1 de Febrero liberaron toda la primera temporada, asi podemos disfrutarla toda de corrido si as� queremos (y yo se que s� quieren).

Sin hablar m�s aqui va el trailer:

Si les gusta, pueden probar 30 dias gratis del servicio en el sitio oficial www.netflix.com .

�Gracias por leer, hay muchas series de TV interesantes para ver!, Att. @tifis

Tutorial de AMFPHP y Actionscript 3

bubudrc — Sat, 05 Dec 2009 00:00:00

AMFPHP es un famoso sistema del lado del servidor para usar Remoting en PHP en conexión con Flash. En este tutorial veremos cómo instalarlo y adaptarlo a Actionscript 3, Flash CS4 y Flex.

Programaci�n orientada a objetos en Visual Basic .NET

Wyrm — Mon, 14 Sep 2009 00:00:00

Un completo manual de programación orientada a objetos en Visual Basic .NET, donde hablamos de herencia, encapsulación, polimorfismo, proyectos en VB.NET y todo lo que abarca el OOP en Visual Basic.

Tutorial de Visual Basic .NET

Wyrm — Tue, 01 Sep 2009 00:00:00

En este tutorial básico crearemos una aplicación usando los Windows Forms de .NET y el lenguaje Visual Basic .NET. Todo usando el IDE Microsoft Visual Studio 2008 y Visual Basic 2008.

Tutorial de PHP y YAML

Duilio — Mon, 24 Aug 2009 00:00:00

YAML es un formato de serialización de datos que nos permite crear archivos de variables fácilmente leíbles. En este tutorial usaremos YAML o YML para archivos de configuración en PHP.

Efectos de sonido en FL Studio

RattaMono — Mon, 10 Aug 2009 00:00:00

Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder.

Coloreado de dibujos en Flash

Victor-Nael — Mon, 10 Aug 2009 00:00:00

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.

Crear una base de datos en MySQL

Wyrm — Mon, 10 Aug 2009 00:00:00

En este tutorial veremos cómo crear una base de datos de MySQL, crear tablas y ejecutar comandos de MySQL con phpMyAdmin, sin necesidad de tener conocimientos extensos de SQL.

Transiciones de filtros en After Effects

elchininet — Wed, 29 Jul 2009 00:00:00

Aprenderemos a usar transiciones de filtros en Adobe After Effects sobre animaciones complejas, composiciones anidadas y edición gráfica de las animaciones creadas.

Dise�o web para iPhone

eparada — Wed, 29 Jul 2009 00:00:00

El diseño web en iPhone requiere conocimientos de HTML 5, CSS y Javascript especial para usar todo el poder de Safari Mobile. En este tutorial hablamos de cómo crear sitios web optimizados para iPhone y navegadores Webkit como Android.

Deformar bitmaps con el metodo drawTriangles de Actionscript 3

M@U — Sun, 08 Feb 2009 00:00:00

El método drawTriangles() de Actionscript 3 es útil al crear figuras tridimensionales a partir de triángulos, para modificar la apariencia de un bitmap y en el mas sencillo de los casos dibujar una figura vectorizada. Lo que puede llevar a su uso incluso en el desarrollo de motores 3D vectoriales en Flash.

Un dia normal del foro

Tue, 20 Nov 2007 00:00:00

"Hordie", esa bella combinación de usuarios nuevos que llega en estampida en las vacaciones, vuelve al hogar, los foros de Clab.

Clab News

Mon, 31 Jul 2006 00:00:00

De la mano de blackdragon (Idea original) y la100rra (Arte) llega a ustedes la tercera edición (Y primera en el comic) del periódico Clab News.