Cristalab |
- #21: Hazte millonario con AdSense!
- Introducción a HTML5 Web Messaging
- Como usar la última versión de jQuery en todos tus proyectos
- Los modos de color en Photoshop
- Vista 3D en el inspector de Firefox 11
- Audio en HTML5 cross-browser con audio.js
- Crear un panel de opciones para un template de Wordpress
- Hacer hablar a tu personaje con Lip sync en Flash
| #21: Hazte millonario con AdSense! Posted: 10 Apr 2012 02:09 AM PDT  Con especial dedicatoria a todos esos grandes proyectos de emprendedores que sueñan con hacer blogs famosos, redes sociales que maten a Zuckerberg y empresas web que te permitan retirarte a los 25. El comic #de la serie Cristalab vs. The Web: "Hazte millonario con AdSense!". Si esta es tu primera vez viendo el comic, mira el comic #20: Cómo se hace Mejorando.la Web y otros anteriores. Plan alternativo: Red social que venda datos privados a grandes marcas. O aplicación de fotografía con filtritos que valga 1 billón de dólares!
|
| Introducción a HTML5 Web Messaging Posted: 10 Apr 2012 01:40 AM PDT HTML5 Web Messaging es una API de JavaScript que permite de una forma segura compartir información entre documentos en el mismo contexto de navegación, sin correr el riesgo de exponer el DOM a un sitio hostil. La especificación está centrada en relegar la comunicación de documentos directamente al navegador, logrando así una implementación hermosa y sin necesidad de intervención del servidor, reduciendo así su carga e incrementando la seguridad en el sitio (teóricamente). En la Web actual es común el intercambio de información entre documentos pertenecientes o no al mismo dominio, no obstante es un problema no muy sencillo de solucionar. Un ejemplo común es cuando se tiene un anuncio publicitario contenido en un iframe alojado en un servidor externo, en el cual se necesita enviar valores relacionados con el contenido de la pagina principal, esto con la finalidad de mostrar un anuncio adecuado. Para automatizar este proceso recurrimos a JavaScript, y lo más sencillo es que el iframe lea de alguna manera la etiqueta meta keywords de la página principal o que esta misma proporcione dicha información; sin embargo, el acceso al DOM desde cualquiera de las partes no está permitido por el navegador, esto debido principalmente a la política del mismo origen –una medida importante de seguridad presente en los navegadores modernos– que admite la comunicación sin restricciones de scripts en documentos del mismo sitio, no siendo así entre aquellos que son diferentes.  Ante esta problemática surgieron algunos mecanismos como Cross-Frame Messaging; una solución que carece de naturalidad, poco elegante y que requiere hacer malabares. [nota:7e3558eab3] En los siguientes ejemplos se han utilizado dominios locales (revisar el apéndice) así como la ultima versión de Google Chrome. [/nota:7e3558eab3] Cross-document messaging: enviando y recibiendo mensajesEl envío de un mensaje es relativamente sencillo, no hace falta más que utilizar el método postMessage de un objeto window referenciado, ya sea de la propiedad contentWindow de un iframe, el objeto devuelto de window.open, o un nombre/indice en window.frames. Código : window.postMessage( Mensaje, Origen ); El primer parámetro es el mensaje que va a ser enviado. Éste puede ser una cadena de texto, un objeto, un array, etc. El segundo parámetro es el dominio de la ventana objetivo, es decir, la ventana que va a recibir el mensaje. Si no se desea especificar un origen en concreto puede utilizarse un asterisco como comodín, sin embargo esto no es nada recomendable ya que deja enormes agujeros de seguridad. Por otra parte si el origen es el mismo que el del emisor puede utilizarse simplemente una barra diagonal: "/" (lamentablemente Google Chrome no soporta este último). También puede añadirse un tercer parámetro, el cual debe ser un objeto MessagePort, pero esto será tratado mas adelante. Enviar un mensajehttp://emisor.com/emisor.html Código : ... <body> <iframe src="http://receptor.com/receptor.html"></iframe> <button>Enviar mensaje</button> <script> var iframe = document.querySelector("iframe"); var button = document.querySelector("button"); var enviarMensaje = function(){ iframe.contentWindow.postMessage("Hola, ¿como estas?", "http://receptor.com"); }; // Al dar click al botón se ejecutar el método enviarMensaje. button.addEventListener("click", enviarMensaje, false); </script> </body> ... Al dar click al botón se enviará un mensaje con el contenido: "Hola, ¿como estas?", al iframe alojado en receptor.com; sin embargo nuestro ejemplo no está completo con sólo enviar el mensaje, también es necesario recibirlo, pero antes de continuar es importante conocer los atributos del evento message que será disparado en receptor.com cuando se reciba un mensaje. Atributos del evento messageEl evento message está compuesto por cinco atributos que sólo pueden ser leídos, que básicamente significa que es imposible alterar el valor de cualquiera de ellos.
Recibir un mensajehttp://receptor.com/receptor.html Código : … <body> <div id="mensaje">Aún no he recibido nada. :(</div> <script> var mensaje = document.querySelector("#mensaje"); var recibirMensaje = function( evento ){ // Verificamos que efectivamente el origen sea de emisor.com if (evento.origin == "http://emisor.com") mensaje.innerHTML = evento.data; }; // Cuando se reciba un evento message se ejecutara las función recibirMensaje. window.addEventListener("message", recibirMensaje, false); </script> </body> … El funcionamiento del ejemplo anterior es simple: se comienza a escuchar al evento message; cuando un mensaje es detectado, se dispara el método recibirMensaje que simplemente verifica que el origen sea el esperado y después se coloca el texto recibido dentro del elemento #mensaje. [nota:7e3558eab3] Si intentan mandar a la consola – console.log(evento) – la información del objeto evento, se darán cuenta que al final les aparece un error. Esto se debe a lo que mencioné al principio, el receptor sólo tiene acceso a la información que explícitamente es enviada, y al colocarlo en la consola está siempre y tratará de imprimir todo el árbol del DOM.[/nota:7e3558eab3] Como pueden ver es igual de sencillo recibir un mensaje, pero deben tener siempre presente que se tiene que verificar que en efecto, el origen sea el esperado, incluso el tipo de dato que se espera: una cadena de texto, un número, un objeto, etc. Además de que es muy importante que se controle el número de mensajes que pueden ser recibidos por minuto, de lo contrario dejarían la puerta abierta a un posible ataque de denegación de servicio. Ahora bien, por qué no extender el ejemplo haciendo que nuestro receptor sea capaz de ser emisor también, y viceversa: http://emisor.com/emisor.html Código : ... <body> <iframe src="http://receptor.com/receptor.html"></iframe> <div id="mensaje">Esperando contestación...</div> <button>Enviar mensaje</button> <script> var iframe = document.querySelector("iframe"); var button = document.querySelector("button"); var mensaje = document.querySelector("#mensaje"); var enviarMensaje = function(){ iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com"); }; var recibirMensaje = function( evento ){ if (evento.origin == "http://receptor.com") // Retrasamos la publicación del mensaje solo para hacerla de emoción. setTimeout(function(){ mensaje.innerHTML = "Receptor: " + evento.data; }, 3000); }; button.addEventListener("click", enviarMensaje, false); window.addEventListener("message", recibirMensaje, false); </script> </body> ... http://receptor.com/receptor.html Código : … <body> <div id="mensaje">Aún no he recibido nada. :(</div> <script> var mensaje = document.querySelector("#mensaje"); var recibirMensaje = function( evento ){ if (evento.origin == "http://emisor.com"){ mensaje.innerHTML = "Emisor: " + evento.data; // Aquí evento.source es una referencia al objeto window del emisor. // evento.origin contiene el origen del emisor: "http://emisor.com" evento.source.postMessage("iPad Pepito, por que solo iPad es «too mainstream».", evento.origin); } }; window.addEventListener("message", recibirMensaje, false); </script> </body> ...Ver ejemplo funcionando en el navegadorMessageChannel y MessagePortHasta ahora sólo hemos visto la primera mitad que compone la especificación de HTML5 web messaging; sin embargo esta también nos provee de un objeto llamado MessageChannel, el cual permite el funcionamiento de dos piezas de código independendientes (ej. corriendo en diferentes contextos de navegación) comunicarse directamente. Por ejemplo: tenemos dos iframes contenidos en un documento: por simple deducción concluimos que están en el contexto de navegación del documento principal; por otra parte, estos iframes entre sí no están en el mismo contexto; a pesar de que están juntos; uno no sabe de la existencia del otro. Otro ejemplo: considera una situación en la cual una red social tiene incrustado un iframe de una libreta de direcciones, y otro iframe que contiene un juego en línea. El juego necesita las direcciones electrónicas de los amigos del usuario, para esto se necesita la información de la libreta de direcciones. Es aquí cuando MessageChannel hace su aparición para hacer este proceso posible, en este caso la red social actuaría como mediador en la comunicación entre ambos iframes. [nota:7e3558eab3] Lamentablemente Firefox todavía no soporta MessageChannel.[/nota:7e3558eab3] Componentes de MessageChannelEl objeto MessageChannel está compuesto por dos puertos (port1 y por2) que no son otra cosa sino objetos de MessagePort, y estos a su vez contienen tres métodos:
MessagePort también contiene el evento onmessage, que puede ser utilizado en lugar de agregar un addEventListener. EjemploCon la finalidad de explicar mejor cómo trabajan MessageChannel y MessagePort, en este ejemplo nos basaremos en el escenario de la red social descrito anteriormente. [nota:7e3558eab3] Por cuestiones de infraestructura se utilizara un mismo origen; sin embargo la estructura es básicamente la misma para orígenes externos.[/nota:7e3558eab3] En primera instancia tenemos la página del juego. Lo primero que haremos es definir una función que se ejecutará cuando la estructura de nuestro documento esté completamente cargada. El objetivo primordial de esta función será el indicar a nuestro documento principal – la red social – que ya está listo para empezar a recibir correos. Para conseguir esto se crea un nuevo objeto MessageChannel, del cual su segundo puerto será enviado en un mensaje al documento principal. Después iniciamos nuestro primer puerto para procesar los mensajes que serán recibidos. http://red-social.com/juego.html Código : … <body> <!-- En #correos serán añadidas las direcciones de correo electrónico que sean recibidas. --> <ul id="correos"></ul> <script> var documentoCargado = function(){ // Definimos las variables que serán utilizadas. var canal, correos, recibirMensaje; // Seleccionamos lo que será nuestro contenedor de correos. correos = document.querySelector("#correos"); // Creamos un objeto MessageChannel. canal = new MessageChannel(); // Esta es nuestra función que será encargada de procesar los mensajes entrantes, // en otras palabras, de publicar los correos que sean enviados desde la agenda. recibirMensaje = function( evento ){ // creamos un nuevo elemento "li" y le añadimos el correo recibido. var correo = document.createElement("li"); correo.innerText = evento.data; // Depues agregamos este mismo "li" a nuestro contenedor de correos (ul#correos). correos.appendChild( correo ); }; // Ahora que el documento esta cargado, le enviamos un mensaje con el puerto dos a la red social (el sitio que contiene este iframe) // diciendo que ya estamos listos para recibir los correos. window.parent.postMessage("¡Estoy listo!", "http://emisor.com", [canal.port2]); // Por el puerto uno escuchamos la llegada de cualquier mensaje. canal.port1.addEventListener("message", recibirMensaje, false); // y abrimos el puerto. canal.port1.start(); }; // Esperemos a que se cargue el DOM. // * esta es la versión con JavaScript puro de $(document).ready() de jQuery. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> … La red social actuará como proxy: será quien enlace el juego con la agenda. Una vez que se reciba el mensaje de parte de la página del juego será enviado un mensaje a la agenda contiendo el puerto para comunicarse con el juego. http://red-social.com/redsocial.html Código : … <body> <iframe src="juego.html"></iframe> <iframe src="agenda.html"></iframe> <script> var documentoCargado = function(){ // Seleccionamos nuestra agenda, la cual esta contenida en el segundo iframe // de nuestro documento. var agenda = window.frames[1]; // Función encarga de procesar el mensaje entrante. var recibirMensaje = function( evento ){ // Le enviamos a la agenda un mensaje avisando que puede empezar // a enviar información a la pagina del juego. Al mismo tiempo, le enviamos // el puerto (port2) por el cual puede comunicarse directamente con la pagina del juego. agenda.postMessage("Puede transmitir", "http://emisor.com", evento.ports) }; // Escuchamos a cualquier evento message que pueda llegar. window.addEventListener("message", recibirMensaje, false); }; // Esperamos a que se cargue el documento. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> ...En la agenda tenemos un simple formulario con una entrada de texto, en el cual serán ingresadas las direcciones electrónicas. http://red-social.com/agenda.html Código : … <body> <!-- Este es el formulario en donde se ingresarán las direcciones de correo electrónico que serán enviadas a la página del juego. --> <form> <input type="email" placeholder="Ingrese e-mail" required> <button>Enviar</button> </form> <script> var documentoCargado = function(){ var recibirMensaje = function( evento ){ // Localizamos nuestro formulario. var formulario = document.forms[0]; var procesarFormulario = function( form ){ // Detenemos el envio del formulario form.preventDefault(); // Leemos el contenido de nuestra entrada de texto. var correo = formulario.querySelector("input").value; // Enviamos el correo ingresado por el puerto recibido en el mensaje (port2) que fue enviado desde la red social. evento.ports[0].postMessage( correo ); }; // Cuando se envíe el formulario se ejecutara la función procesarFormulario. formulario.addEventListener("submit", procesarFormulario, false); }; // Escuchamos a cualquier evento message que pueda llegar. window.addEventListener("message", recibirMensaje, false); }; // Esperamos a que se cargue el documento. window.addEventListener("DOMContentLoaded", documentoCargado, false); </script> </body> ...[nota:7e3558eab3] Por cuestiones de legibilidad y simpleza se omitieron todas las validaciones que deben hacerse; validar el origen, el tipo de datos, etc.[/nota:7e3558eab3] Ver el ejemplo funcionando en el navegador.ConclusiónEsta es una tecnología asombrosa que ayudará a hacer la vida mas fácil a muchos desarrolladores, no obstante habrá que esperar un tiempo más, ya que los navegadores principales solo han implementado parcialmente HTML5 web messaging. Referenciashttp://dev.w3.org/html5/postmsg/ https://developer.mozilla.org/en/DOM/window.postMessage http://dev.opera.com/articles/view/window-postmessage-messagechannel/ ApéndicePara simular distintos dominios se agregan entradas al archivo hosts de los dominios deseados, por ejemplo: emisor.com, receptor.com y red-social.com. En Ubuntu y Mac este archivo se encuentra en "/etc/hosts" y "system32\drivers\etc\hosts" en Windows. Se echa a andar un servidor web, como Nginx (aunque vale con cualquier otro como Lighttpd, Cherokee o el tradicional Apache) con los dominios apuntando a una misma carpeta, sin otro motivo más que de comodidad, ya que se tienen los archivos juntos. Archivo hosts Código : 127.0.0.1 emisor.com 127.0.0.1 receptor.com 127.0.0.1 red-social.com Configuración ejemplo de Nginx Código : server { listen 80; # Tres dominios distintos apuntando a la misma carpeta. server_name emisor.com alias receptor.com red-social.com; location / { root /home/jonasanx/public_html; autoindex on; } } Escrito por Jonathan Javier { Twitter: @jonasanx } para Cristalab.com
|
| Como usar la última versión de jQuery en todos tus proyectos Posted: 10 Apr 2012 12:59 AM PDT jQuery se ha convertido lentamente en el framework de Javascript por defecto de la web, y aunque en los últimos años han tenido muy pocas actualizaciones, el 2011 tuvo varias micro versiones y esperan ser aún más ágiles y constantes este año. El problema radica en mantener actualizados todos tus sitios con la última versión disponible: es tedioso. Uno siempre debe estar al tanto de las actualizaciones, descargarlas, subirlas a cada uno de tus servidores y vincularlos en el footer de tu sitio web, para mi esto simplemente es mucho trabajo.  La solución, el Content Distribution Network de Google. https://developers.google.com/speed/libraries/devguide Google ofrece múltiples versiones de los frameworks y scripts más populares, y por lo general son muy rápidos para actualizarlos. Además de sus grandes beneficios, como ahorrar ancho de banda y disponibilidad en base a tu posición geográfica, tienes la opción de cargar la última versión (posiblemente cacheada por haber visitado otra website) sin ningún esfuerzo. Para esto, solo se necesita agregar la siguiente línea de código en tu HTML, de preferencia antes de cerrar el </body> antes de todos tus scripts, y listo. Código : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> Google APIs FTW. [nota:92786736fb] Cabe recordar que algunos plugins pueden no ser compatibles con la última versión de jQuery, para esto, simplemente pueden especificar la versión necesaria: 1.7 o 1.7.1[/nota:92786736fb] [nota:92786736fb]Cristalab ha usado esta técnica desde v4[/nota:92786736fb]
|
| Los modos de color en Photoshop Posted: 10 Apr 2012 12:50 AM PDT Para los que comienzan en el diseño web, gráfico, etc. o con Photoshop, es muy común que sólo tengan conocimientos básicos de los modos de Color en Photoshop. En este tutorial les quiero mostrar los Modos de Color que tenemos en Photoshop y en qué caso podemos aplicar un determinado Modo de Color. Para que entiendan a qué me refiero con respecto a los modos de Color de una imagen, estos modos los podemos ver en nuestro Photoshop accediendo al menú: imagen > Modo.  Bueno ahora veamos un concepto básico y el uso básico de cada modo de color de una imagen: Modo de mapa de bitsPara pasar una imagen a Modo de Mapa de Bits, tenemos que ponerla primero a Modo: Escala de Grises. El modo Mapa de bits utiliza uno de los dos valores de color (blanco o negro) para representar los píxeles de una imagen.  Las imágenes en modo Mapa de bits se denominan imágenes de 1 bit en mapa de bits porque tienen una profundidad de bits de 1. Usos: El modo mapa de bits es muy útil para distintos tipos de trabajos:
 Modo de escala de grisesEl modo Escala de grises utiliza distintos tonos de gris en una imagen, sus variantes de color abarcan toda la escala de color del blanco al negro.  En imágenes de 8 bits, puede haber hasta 256 tonos de gris. Cada píxel de una imagen en escala de grises tiene un valor de brillo comprendido entre 0 (negro) y 255 (blanco). En imágenes de 16 y 32 bits, el número de tonos de una imagen es mucho mayor que en las imágenes de 8 bits. Usos: El modo escala de grises es muy útil para distintos tipos de trabajos:
Modo DuotonoPara convertir nuestra imagen a Modo Duotono, primero debemos pasar la imagen a modo Escala de grises y después a modo Duotono. En el modo Duotono podemos usar de 2 a 4 colores específicos:
Utilizamos de 2 a 4 tintas personalizadas, pueden ser Pantones personalizados para darle colores más exactos.  Este modo de color es usado para la impresión de tintas directas y reducir el número de ellas. En este modo nuestra imagen siempre va contar con un sólo canal en nuestro documento. Usos: El modo Duotono es muy útil para distintos tipos de trabajos:
Modo IndexadoPara convertir una imagen a Modo Color indexado primero debemos pasarla a Modo RGB. El modo Color indexado produce archivos de imágenes de 8 bits con un máximo de 256 colores. Al convertir a color indexado, Photoshop crea una tabla de colores de consulta (CLUT) que almacena y genera el índice de los colores de la imagen. Si un color de la imagen original no aparece en la tabla, el programa selecciona el más parecido o emplea el tramado para simular el color utilizando los colores disponibles. Este modo es muy utilizado en el diseño web, ya que se caracteriza por hacer una reducción al tamaño o peso del archivo manteniendo la calidad visual necesaria para presentaciones multimedia, páginas Web y usos similares. Los archivos de color indexado se pueden guardar en los siguientes formatos: Photoshop, BMP, DICOM (Digital Imaging and Communications in Medicine), GIF, EPS de Photoshop, Formato de documento grande (PSB), PCX, PDF de Photoshop, RAW de Photoshop, Photoshop 2.0, PICT, PNG, Targa® o TIFF. Es muy común encontrar estas imágenes en las plantillas de los CMSs Joomla, Wordpress, etc, ya que este modo es uno de los favoritos de los diseñadores web. Cuando pasamos una imagen a este modo, nuestro panel de capas la renombra con el nombre Índice, como podemos ver en la imagen:  Usos: El modo Indexado es muy útil para distintos tipos de trabajos:
Modo RGBJunto al modo CMYK es uno de los más importantes modos. Todo lo que es virtual o lo que vemos en internet, en tu ipod, celular, ipad, etc, etc está en modo RGB. Las siglas RGB significan RED, GREEN y BLUE (Rojo, Verde y Azul) Es el modo por defecto que usa nuestro monitor y las imágenes que vemos en las páginas webs. Este modo utiliza el modelo RGB y asigna un valor de intensidad a cada píxel. En imágenes de 8 bits por canal, los valores de intensidad varían de 0 (negro) a 255 (blanco) para cada uno de los componentes RGB (rojo, verde, azul) de una imagen en color. Por ejemplo, un color rojo fuerte podría tener un valor R de 246, un valor G de 20 y un valor B de 50(R-G-B). Si los valores de los tres componentes son idénticos, se obtiene un tono de gris neutro. Si los valores de todos los componentes dan 255, el resultado es blanco puro, y negro puro si el valor es de 0. Además de ser el modo por defecto en las imágenes nuevas de Photoshop, el modelo RGB lo utilizan los monitores de los ordenadores para mostrar los colores. Esto significa que, si se trabaja en modos de color distintos a RGB, como CMYK, Photoshop convierte la imagen CMYK a RGB para la visualización en pantalla.  Usos: El modo RGB es muy útil para distintos tipos de trabajos:
Modo CMYKLas siglas CMYK significan: Cyan, Magenta, Yellow, Black (Cian, Magenta, Amarillo y Negro). Junto al modo RGB es el modo más importante, pero dentro de la industria de la Gráfica Impresa. A diferencia del modo RGB esta imagen es todo lo que vemos en el mundo impreso, todos los diseños como afiches, cuadernos, revistas, libros, etc, etc. fueron trabajados en modo CMYK. En el modo CMYK, a cada píxel se le asigna un valor de porcentaje para las tintas de cuatricromía. En las imágenes CMYK, el blanco puro se genera si los cuatro colores tienen valores del 0%. El modo CMYK se usa mucho en la preparación de imágenes que se van a imprimir utilizando cuatricromía. También se puede utilizar el modo CMYK para trabajar directamente con imágenes CMYK escaneadas o importadas de sistemas de alta resolución. Aunque CMYK es un modelo de color estándar, puede variar el rango exacto de los colores representados, dependiendo de la imprenta y las condiciones de impresión. El modo Color CMYK de Photoshop varía de acuerdo con el ajuste del espacio de trabajo especificado en el cuadro de diálogo Ajustes de color.  Usos: El modo CMYK es muy útil para distintos tipos de trabajos en físico y real a diferencia del RGB que es algo abstracto o virtual y no lo podemos tocar, en cambio el trabajo en CMYK, ya que va ser impreso si lo vamos a poder tocar:
Para resumir, todo lo que vemos impreso fue trabajado en CMYK. Modo LabLAB significa: Luminosidad A y B. La Particularidad es la de ser independientemente del dispositivo de almacenamiento. Consta de tres canales: Luminosidad, A y B y que aunque suene un poco a chino, es el modelo que más se acerca a la forma que tiene el ojo humano de percibir los colores. Los valores numéricos de Lab describen todos los colores que ve una persona con una capacidad de visión normal. Como Lab describe la apariencia del color en lugar de la cantidad de colorante necesaria para que un dispositivo (como un monitor, una impresora de escritorio o una cámara digital) produzca el color, Lab se considera un modelo de color independiente de dispositivo. Los sistemas de gestión de color utilizan Lab como referencia de color para transformar un color de forma predecible de un espacio de color a otro.  Las imágenes Lab se pueden guardar en distintos formatos: Photoshop, EPS de Photoshop, Formato de documento grande (PSB), PDF de Photoshop, RAW de Photoshop, TIFF, DCS 1.0 de Photoshop o DCS 2.0 de Photoshop. Las imágenes Lab de 48 bits (16 bits por canal) se pueden guardar en estos formatos: Photoshop, Formato de documento grande (PSB), PDF de Photoshop, RAW de Photoshop y TIFF. Nota: los formatos DCS 1.0 y DCS 2.0 convierten el archivo a CMYK al abrirlo. Usos: El modo LAB es muy útil:
Modo MulticanalLas imágenes de este modo contienen 256 niveles de gris en cada canal, por lo que se utilizan en impresión especializada. Las imágenes de modo Multicanal se pueden guardar en formato Photoshop, Formato de documento grande (PSB), Photoshop 2.0, RAW de Photoshop o DCS 2.0 de Photoshop. Al pasar una imagen a modo Multicanal debemos considerar lo siguiente:
Usos: El modo Multicanal es muy útil:
  8 bits, 16 bits o 32 bitsEstas indican la profundidad de una imagen. Las imágenes con más "bits" son "mejores". Y tiene su parte de verdad. No obstante, afirmar que las fotos con menos paleta de color (menos cantidad de "bits por canal") son peores, no es absolutamente cierto. Mientas mas bits, tenga nuestra imagen va tener más información de color. Yo lo tengo puesto a 8 bits. A 8 bits es perder calidad del RAW y a 32 bits los archivos serán más grandes y necesitarás más equipo para trabajarlos. Con 16 no pierdes calidad ya que hace una "interpolación" de 12 o 14 a 16 bits y no tiene que recortar tonos.
|
| Vista 3D en el inspector de Firefox 11 Posted: 20 Mar 2012 04:26 AM PDT La última actualización de Mozilla Firefox, Firefox 11, fue lanzada el 13 de Marzo y entre las nuevas características se incluye la opción de Vista 3D como parte de las herramientas para desarrolladores.  Cuándo utilizar modo 3D?Mozilla dice:
Para inicializarlo, asegúrate de tener la última versión de Firefox, luego dirígete a Firefox > Web Developer > Inspect (o con el atajo Ctrl + Shift + i); en la parte inferior de tu navegador aparecerán las opciones de inspección que funcionan de una forma similar a FireBug y desde ahí puedes activar la función de vista 3D. Más información en el sitio de Mozilla Developer Network.
|
| Audio en HTML5 cross-browser con audio.js Posted: 20 Mar 2012 12:44 AM PDT En esta ocasión les mostraré cómo hacer compatible el audio de HTML5 con varios navegadores utilizando el plugin audio.js Descargamos el plugin con todos sus archivos, agregamos dentro de nuestras etiquetas <head></head> el archivo audio.min.js que viene dentro del archivo que descargamos y creamos nuestra función con su variable (es obligatoria pero siempre la misma). Es sencilla y si no tienes conocimiento de Javascript pues sólo copia lo que está dentro de <head></head>. Código : <head> <script src="js_t_otros/audio.min.js"></script> <script> audiojs.events.ready(function(){ var as = audiojs.createAll(); }); </script> </head>Ya tenemos configurado todo para que corra nuestro audio, entonces insertamos dentro de <body></body> el audio que queremos reproducir. Esta es una versión rare de la Canción de Listen – Collective Soul Código : <audio src="http://cjlight.powweb.com/tmp/Collective%20Soul%20-%20Listen%20(Remix).mp3″ preload="auto"></audio> Listo eso es todo, ahora nuestro audio correrá sin ningún problema en varios exploradores. Acá el listado:
Ver Demo Plugin audio.js en github: aquí hay muchas opciones de este interesante plugin, también encontrarán documentación y muchas cosas interesantes ! [nota:a8ee49348f] Recuerden que sólo deben usar los archivos de la carpeta /audiojs que viene dentro del archivo RAR que bajan de la página del Plugin.[/nota:a8ee49348f] Espero les haya gustado, y ojala que así sea, para seguir subiendo mas tutos =) Cheers !
|
| Crear un panel de opciones para un template de Wordpress Posted: 19 Mar 2012 01:25 AM PDT En este tutorial vamos a aprender a crear un menú de opciones para nuestro Theme de WordPress. Esto va a diferenciar nuestra plantilla de las demás porque estaremos más cerca de tener una plantilla o tema más profesional. Al principio parecerá complicado pero nos facilitará la tarea entender dos cosas; por un lado la utilización de arrays en PHP y por otro lado la utilización de una serie de funciones y variables que utilizaremos para trabajar con las opciones que deseamos incluir en nuestro theme. [nota:d8146111f4]Te puede interesar el tutorial anterior sobre cómo desarrollar un tema desde cero.[/nota:d8146111f4]  ComenzandoSi bien es cierto que puede crearse un archivo de opciones, en este ejemplo el menú lo crearemos sobre el functions.php. Nos topamos entonces con las siguientes líneas: Código : <?php $themename = "Classic Theme"; $shortname = "ct"; Como se puede notar son dos variables. Una almacenará el nombre del Theme y la otra veremos más adelante que función cumple. Continuamos con el código poniendo debajo de las líneas antes citadas lo siguiente: Código : $options = array ( array( "name" => $themename." Options", "type" => "title"), array( "type" => "open"), array( "name" => "Color Scheme", "desc" => "Select the color scheme for the theme", "id" => $shortname."_color_scheme", "type" => "select", "options" => array("blue", "red", "green"), "std" => "blue"), array( "name" => "Logo URL", "desc" => "Enter the link to your logo image", "id" => $shortname."_logo", "type" => "text", "std" => ""), array( "name" => "Homepage header image", "desc" => "Enter the link to an image used for the homepage header.", "id" => $shortname."_header_img", "type" => "text", "std" => ""), array( "name" => "Footer copyright text", "desc" => "Enter text used in the right side of the footer. It can be HTML", "id" => $shortname."_footer_text", "type" => "text", "std" => ""), array( "name" => "Google Analytics Code", "desc" => "Paste your Google Analytics or other tracking code in this box.", "id" => $shortname."_ga_code", "type" => "textarea", "std" => ""), array( "name" => "Feedburner URL", "desc" => "Paste your Feedburner URL here to let readers see it in your website", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo('rss2_url')), array( "type" => "close"));Aquí es donde hace su aparición el array. El mismo tiene cinco valores que debemos tener en cuenta:
En resumidas cuentas, debemos tener en claro que hemos definido un nombre, una descripción, un identificador, un tipo de dato y un valor por defecto que suele dejarse en blanco. Todos estos se guardan en $options. Seguiremos agregando lo siguiente: Código : function mytheme_add_admin() { global $themename, $shortname, $options; if ( $_GET['page'] == basename(__FILE__) ) { if ( 'save' == $_REQUEST['action'] ) { foreach ($options as $value) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } foreach ($options as $value) { if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ] ); } else { delete_option( $value['id'] ); } } header("Location: themes.php?page=functions.php&saved=true"); die; } else if( 'reset' == $_REQUEST['action'] ) { foreach ($options as $value) { delete_option( $value['id'] ); } header("Location: themes.php?page=functions.php&reset=true"); die; } } add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin'); }Aquí lo primero que se hace es definir la función: mytheme_add_admin Contiene dentro las variables antes definidas (de alcance global) $themename, $shortname y $options. Y se le dice que: si todo lo que viene por $GET (de "page") es igual a basename(__FILE__), haga una iteración del array $options punto por punto y lo almacene en $value. El objetivo de esta función es que los valores que se introducen en las opciones puedan actualizarse o guardarse. Estas también pueden resetearse eliminándose todas las opciones. Luego mediante la función add_theme_page se agrega una página en el menú de "Apariencia" con el nombre del Theme. Puede reemplazarse a esta última con add_menu_page para crearla con una caja externa. Código : function mytheme_admin() { global $themename, $shortname, $options; if ( $_REQUEST['saved'] ) echo '<div id="message"><p><strong>'.$themename.' settings saved.</strong></p></div>'; if ( $_REQUEST['reset'] ) echo '<div id="message"><p><strong>'.$themename.' settings reset.</strong></p></div>'; ?>Aquí tenemos algunas condiciones: si la configuración se guarda, WordPress mostrará "settings saved", o en su defecto "Settings Reset". Crear el contenido de la página de opcionesEl código que debe insertarse a continuación es sin duda una de las partes más importantes: Código : <div> <h2><?php echo $themename; ?> Settings</h2> <form method="post"> <?php foreach ($options as $value) { switch ( $value['type'] ) { case "open": ?> <table width="100%" border="0" style="background-color:#cdcdcd; padding:10px;"> <?php break; case "close": ?> </table><br /> <?php break; case "title": ?> <table width="100%" border="0" style="background-color:#868686; padding:5px 10px;"><tr> <td colspan="2"><h3 style="font-family:Georgia,'Times New Roman',Times,serif;"><?php echo $value['name']; ?></h3></td> </tr> <?php break; case 'text': ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><input style="width:400px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" /></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case 'textarea': ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><textarea name="<?php echo $value['id']; ?>" style="width:400px; height:200px;" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?></textarea></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case 'select': ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><select style="width:240px;" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } elseif ($option == $value['std']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select></td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; case "checkbox": ?> <tr> <td width="20%" rowspan="2" valign="middle"><strong><?php echo $value['name']; ?></strong></td> <td width="80%"><?php if(get_option($value['id'])){ $checked = "checked="checked""; }else{ $checked = "";} ?> <input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> /> </td> </tr> <tr> <td><small><?php echo $value['desc']; ?></small></td> </tr><tr><td colspan="2" style="margin-bottom:5px;border-bottom:1px dotted #000000;"> </td></tr><tr><td colspan="2"> </td></tr> <?php break; } } ?> <p> <input name="save" type="submit" value="Save changes" /> <input type="hidden" name="action" value="save" /> </p> </form> <form method="post"> <p> <input name="reset" type="submit" value="Reset" /> <input type="hidden" name="action" value="reset" /> </p> </form> </div>Con este código creamos nuestro contenido de la página de opciones. Se usa case para evaluar qué tipo de dato hemos seteado con anterioridad. Si nosotros pusimos en el array un campo de texto, se pondrá eso. Si pusimos un checkbox, como tipo de dato, también.  Con esto, la página de opciones queda lista. Resta añadir: Código : <?php } add_action('admin_menu', 'mytheme_add_admin'); ?>...que le dice a WordPress que agregue el menu correspondiente. ResumiendoEn rasgos generales vemos que el asunto se divide en tres partes:
El paso final y en mi precario entender de la cosa, el que más dolores de cabeza puede traer es hacer uso de estos datos en nuestro index o en cualquier lugar del blog en donde queramos hacerlo. Primero deberemos introducir el siguiente código para recuperar los valores de $options de manera global. Código : <? global $options; foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } } ?>Y aquí es donde se ve la utilidad la variable $shortname que la utilizamos concatenada con algún id del array. Véase el siguiente ejemplo: Código : array( "name" => "Feedburner URL", "desc" => "Introduzca en este campo su url de Feed Burner", "id" => $shortname."_feedburner", "type" => "text", "std" => get_bloginfo('rss2_url')),Aquí se ve que $shortname."feedburner" es el id para tomar los datos de la dirección RSS del blog. Para hacer uso de ésta en nuestro home deberíamos poner: Código : <?php echo $ct_feedburner; ?> …que no por casualidad es el valor que le asignamos a $shortname. No es algo que a simple vista destaque por su simpleza. Pero lo mejor para entenderlo es familiarizarse con funciones y arrays principalmente. Este panel puede estilizarse de forma simple, pero esto quedará para más adelante. Este tutorial es de mi autoría. Y el mismo fue tomado de mi blog. Pueden pasar por el mismo cuando deseen. O seguirme en Twitter. Saludos.
|
| Hacer hablar a tu personaje con Lip sync en Flash Posted: 18 Mar 2012 04:27 PM PDT Hola amigos de cristalab! esta es mi primer colaboración con un videotutorial de Flash que espero sea de utilidad para alguno de ustedes. Veamos: ¿Qué es Lip sync? El Lip sync es la técnica que se usa para crear la ilusión de que tu personaje está hablando. Hacerlo no es muy difícil, sólo hay que seguir ciertas reglas, de las cuales una de las más importantes es que el diseño de las bocas debe corresponder a la forma en que ésta se hace cuando decimos una palabra Bueno para no aburrirlos aquí les dejo el tuto.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario