lunes, 23 de abril de 2012

Cristalab

Cristalab

Adobe CS6 y Adobe Creative Cloud: Resumen de novedades

Posted: 23 Apr 2012 08:56 AM PDT

Adobe hoy anunció Adobe Creative Suite 6 y Adobe Creative Cloud. Adobe CS6 trae mejoras a toda la gama de productos (hasta Fireworks! <3) y Creative Cloud es varias cosas: Una nueva estrategia de precios, un sistema tipo "dropbox" para compartir contenido y una serie de apps que corren en tablets y guardan en la "nube".

Los mensajes principales son: Crear apps nativas para móviles y tablets sin programar. Exportar HTML5 fácil. Hacer todas las apps gráficas más veloces. Cambiar el modelo de pago por software a un modelo de suscripción como servicio.


Puedes ver todos los detalles en tiempo real del cubrimiento si sigues la cuenta de Twitter @cristalab.

Adobe Photoshop CS6



Dos cosas resaltan del nuevo Photoshop: Un aumento gigantesco en rendimiento y velocidad (al fin!) que le permitirá correr incluso en maquinas antiguas y una mejora sobre todos sus algoritmos de recreación de bitmaps.

En Photoshop CS5 vimos los filtros "content aware" y su capacidad de rellenar una fotografía con patrones similares ultrarealistas al querer hacer retoques o borrar detalles. Ahora "content aware" es extendido a cosas como fotos panorámicas o con filtros "ojo de pescado" y otros casos donde las fotografías pierden detalle angular.

Ah y ahora la interfaz se parece a Premiere, gris oscuro. No está mal. Photoshop sigue siendo la joya de la corona, titulo que en un pasado compartió con Flash.

Adobe Photoshop Touch



Un Photoshop para iPad y tablets Android, optimizado para usarlo con dedos o "stylus gordos". Tiene todas las capacidades básicas: Capas, efectos, selección inteligente, filtros, brochas y hasta los algoritmos "edge aware" y "content aware" para no necesitar la precisión de pixel de un desktop. Genera archivos .psd que puede guardar en la "nube" de Creative Cloud o permite compartir los resultados a la cámara del dispositivo, Facebook o por email.

Y cuesta 10 dólares.

Adobe Premiere Pro CS6



Puedo resumirlo en una frase: Premiere CS6 es un editor de video con el poder de Photoshop. La mayoría de los filtros "content aware" ahora son aplicables a videos en movimiento y gracias a "Mercury", el nuevo motor gráfico de Adobe, los cambios se ven casi al instante. Premiere también incluye la detección de profundidad 3D de Photoshop y un "live preview" de efectos y clips que es muy similar al de iMovie o Final Cut Pro.

Adobe Flash CS6



Flash CS6 se siente más como un CS5.5.1, pero es entendible dado el serio recorte de presupuesto que sufrió el equipo de Flash Platform el 2011. Flash CS6 ahora puede exportar animaciones básicas a HTML5 de manera transparente, así como compilar de manera nativa a iPhone, iPad y Android, incluyendo el uso de Stage3D.

La exportación de Flash a HTML5 estará optimizada para CreateJS, un framework de creación de "experiencias interactivas" en HTML5, competencia de ImpactJS o, en cierto modo, jQuery. Especializado en animaciones, audio y video. Creado por Grant Skinner.

Flash quiere ser LA herramienta para crear juegos y experiencias multimedia (como libros interactivos para niños) en móviles y tablets. Sea en el navegador o como app nativa. ¿Lo logrará? Por primera vez hay alternativas, pero Flash seguirá peleando fuerte.

Un -1 para Adobe por hacer el demo de Flash a HTML5 creando un intro, eso sí.

Adobe Dreamweaver CS6



Conozco pocas personas que sigan usando Dreamweaver, pero para los que les gusta, DWCS6 trae un asistente para crear Responsive Design, llamado "Fluid grid layout". También incluye soporte nativo a jQuery Mobile, transiciones CSS3 y la exportación directa de Phonegap.

Dreamweaver aspira a convertirse en el IDE de Phonegap para creación de apps móviles al igual que Flash Builder 4.6 es el IDE de Flash para juegos móviles.

En las cosas pro: Live View de Dreamweaver ahora usa un Webkit actualizado. Ya era hora.

Adobe InDesign CS6



Todo el mundo está migrando del papel a la pantalla y este es un equipo de Adobe que sí supo reaccionar al cambio. InDesign CS6 ahora puede crear revistas y libros interactivos para tablets sin necesidad de escribir una sola linea de código.

Capacidades como Layout Liquido, inserción de contenido externo (videos, Flash, HTML, etc) y forms de PDF se combinan con la habilidad mágica de exportar tu diseño, en un click, como una app nativa para iPhone, iPad o Android gracias a Adobe Digital Publishing.

Aplausos a un equipo dentro de Adobe que ha sabido responder al futuro con buen PR, buenas herramientas y buen contacto con la comunidad.

Adobe Fireworks CS6


Fireworks es el equivalente al hermano gemelo de Bart Simpson. Vive en el ático encerrado, le dan cabezas de pescado y nadie quiere hablar de él, más que para mantenerlo con vida. Nada se dijo de esta herramienta, mi favorita de todas. Fireworks no compite con Photoshop, lo complementa siendo el mejor entorno para combinar bitmaps, vectores y areas sensibles, que luego pueden ser exportadas como prototipos para webs o apps.

Fireworks CS6 ahora puede: Exportar CSS "limpio" analizando el diseño, crear themes para jQuery Mobile, correr más rápido con Mercury. Y ya. Eso es todo. Gracias por las cabezas de pescado.

En sintesis: Not bad


Desde afuera, parecía un lanzamiento aburrido, pero Adobe tuvo anuncios muy interesantes. El más importante de todos, en mi opinión, es la migración a un modelo "Software as a Service" con la suscripción de Creative Cloud.


Extrañé mucho menciones a Fireworks o Illustrator, pero entiendo que querían limitarse a mostrar las apps móviles y los pesos pesados que generan dinero real dentro de Adobe.

La pregunta es para ustedes ¿Vale la pena CS6? ¿Lo comprarán y usarán? ¿Migraron a otra plataforma? ¿O seguirán usando alguna versión vieja de Adobe Creative Suite?

Todas las imágenes de este artículo fueron creadas y optimizadas con Fireworks CS5 </3

Enviar comentario

Métodos del Objeto Date de Javascript

Posted: 23 Apr 2012 05:31 AM PDT

En este tutorial aprenderemos los métodos del objeto Date de javaScript, analizaremos todos y cada uno de ellos, usaremos ejemplos prácticos , e intentaremos comprender de manera fugaz los métodos set y get de los objetos también aprenderemos a trabajar con fechas, mediante la realización de 2 sencillos ejercicios.

La decisión de hacer un tutorial sobre el objeto Date, siendo una cosa tan vista y con tanta información publicada en la red, ha sido, que en Clab no he visto ningún tutorial concreto sobre ello, y veo a gente de vez en cuando preguntar cosas sencillas sobre las fechas y cómo trabajar con ellas. Además, así aprovecho y me vale de introducción al tutorial que estoy desarrollando, para crear un calendario en jQuery desde cero, de modo que los interesados estad atentos.


¿Quién debería leer este tutorial y quién no?


Caso A: Si de vez en cuando vas andando por la calle, y oyes una voz susurrar a tú oído ddddaaaatttteee, y eso te causa escalofríos incontrolables. No te preocupes, es buena señal, tu eres el target perfecto de este tutorial.
Caso B: Si estás buscando información sobre el objeto Date, pero para otro lenguaje, igual no te viene mal, echarle 15 minutillos a este tuto, y debido a las similitudes entre los lenguajes igual le sacas provecho y todo.

1. El objeto Date


Para comenzar vamos a ver cómo almacenar un objeto date con la fecha actual en una variable y también veremos que nos muestra la consola de depuración si imprimimos esa variable.

Código :

//Creamos una variable y almacenamos la fecha de hoy (paréntesis vacío) var fechaHoy = new Date(); //Imprimimos la variable en la consola console.log(fechaHoy);

Si quisiéramos configurar una fecha diferente a la actual, le pasaríamos los parámetros a Date de la siguiente manera:

Código :

var fechaRequerida = new Date(año, mes, día, horas, minutos, segundos, milisegundos)  //O con un total de milisegundos que contarán a partir del 1 de enero de 1970 //Por ejemplo 1334968890477, estaría dentro del 21 de Abril de 2012 var fechaPorMilisegundos = new Date(1334968890477)

¿Cómo funciona el objeto Date?

Aquí hay varias cosas a tener en cuenta:
  1. El mínimo de variables que se le pueden pasar al objeto Date para que funcione correctamente son 2, el año y el mes, introducidos éstos, a todos los que dejemos vacíos javascript los rellenará con la fecha más cercana al primer milisegundo del día 1 del mes del año introducidos
  2. Si sólo se introduce el año, javascript rellenará la fecha con el 1 de enero de 1970, que es la hora universal del objeto Date, pues le estará sumando a esta fecha entre 1 y 9999 milisegundos que serán los años que pongáis
  3. Los meses van de 0 a 11, es decir, 0 = enero, 11 = diciembre
  4. Los días del mes funcionan normal, del 1 al 31
  5. Los segundos y minutos van de 0 a 59
  6. Los milisegundos van de 0 a 999
Bien, vamos también a imprimir, nuestra fecha requerida en la consola:

Código :

console.log(fechaRequerida)

Y la consola nos imprimirá lo siguiente en ambos casos:
Date

Que no es ni de lejos lo que queremos ver, aun así sabemos que contiene una fecha, pues nos lo está diciendo la consola. Así que vamos a ver los métodos y al final sabremos cómo trabajar con el objeto date.


2. Los métodos del objeto Date


¿Qué son los métodos de un objeto?

Que nadie se asuste, los métodos son simples funciones incluidas dentro de un objeto, que desempeñan diferentes acciones.
Imaginemos que tenemos un robot, este será nuestro objeto Abducted. Abducted tiene programado un método que le hace decir algo, y otro que le dice lo que debe decir, vamos a verlo en pseudo-código:

Código :

Abducted {    private var tipoDeFrase:Frase = 'una parida';        function get decirCosa ():Frase {       return tipoDeFrase    }        function set queDecir (nuevoTipoDeFrase:Frase):void {       tipoDeFrase = nuevoTipoDeFrase    } }

Código :

//Ok, ahora tú me ordenarías: Abducted.decirCosa() //Y yo te respondería cual esclavo: 'van 2 y se cae el de en medio'  //Como ves te estaría diciendo un parida, pues es lo que tendría configurado por defecto.  //Ahora bien, tú podrías ordenarme: Abducted.queDecir('algo inteligente')  //Si después me volvieras a ordenar: Abducted.decirCosa() //A diferencia de la vez anterior, yo te respondería: 'No hay nada de malo en pasar por tonto, si en realidad lo que uno está haciendo es inteligente'

Como veis los métodos o funciones get sirven para pedirle datos a Abducted, sin embargo los set nos valen para cambiar una variable o propiedad de Abducted.
Espero que os haya gustado mi explicación casera breve e incompleta, sobre qué son los métodos get y set de un objeto. Y si he conseguido expresarme con claridad, veremos mucho más rápido los métodos a continuación.

Tipos de métodos del objeto Date

Vamos a intentar dividir los métodos del objeto Date en 4 grupos (esta sub-división no es ninguna convención ni nada parecido, es simplemente que me parece más sencillo explicarlo así, si sí son una convención, pues bueno, entonces he pensado lo mismo que muchos):
  • A. Métodos para obtener o cambiar los valores del objeto Date
  • B. Métodos para obtener fechas lectibles
  • C. Métodos para trabajar con fechas en milisegundos
  • D. Métodos desfasados

A. Métodos para obtener o cambiar valores del objeto Date

Vamos a ver rápidamente los nombres simples de estos métodos (así no se pueden usar).
  • FullYear
  • Month
  • Date
  • Day
  • Hours
  • Minutes
  • Seconds
  • Milliseconds
Todos estos métodos se pueden usar de 4 maneras, 2 formas de get y 2 formas de set, a excepción de Day que sólo se pueden usar los get.

Voy a tomar como ejemplo Date y Day. Los get los podemos usar de 2 maneras:

Código :

getDate() getUTCDate()  getDay() getUTCDay()

Y los set se usan igual, pero como acabo de explicar que los Day son los únicos que no tienen set, nos quedamos sin ellos en este ejemplo ya que no existen como métodos:

Código :

setDate() setUTCDate()

Bien, alguno se preguntará ¿y qué maldita diferencia hay entre poner UTC o no ponerlo?. Como trabajamos con fechas, tenemos que tener en cuenta que ahora mismo no es la misma hora en todo el mundo. Por lo tanto cuando trabajemos con fechas, la diferencia entre ponerlo o no, radica en que si no se pone estarás usando tu franja horaria (que es lo más normal), y si lo pones pedirás esa fecha en la hora universal (UTC - Universal Time Coordinated), que es GTM+0 (La del meridiano 0 o meridiano de Greenwich)
Wikipedia UTC

Ahora veamos a qué dato dentro de una fecha corresponde cada uno de los métodos que acabamos de ver, e iremos viendo ejemplos:
(Los links a partir de aquí, son links a ejemplos prácticos en los que podréis usar los métodos a vuestro antojo)

    FullYear

    Usos: getFullYear() | getUTCFullYear() | setFullYear() | setUTCFullYear()

    Código :

    //Obtiene el año en 4 dígitos getFullYear() getUTCFullYear() //Configura la fecha a partir de año setFullYear(año, mes, diaMes) setUTCFullYear(año, mes, diaMes)

    Month

    Usos: getMonth() | getUTCMonth() | setMonth() | setUTCMonth()

    Código :

    //Obtiene el mes (de 0 a 11) getMonth() getUTCMonth() //Configura la fecha a partir del mes setMonth(mes, diaMes) setUTCMonth(mes, diaMes)

    Date

    Usos: getDate() | getUTCDate() | setDate() | setUTCDate()

    Código :

    //Obtienen el día del mes (de 1 a 31) getDate() getUTCDate() //Configuran la fecha con el día setDate(diaMes) setUTCDate(diaMes)

    Day

    Usos: getDay() | getUTCDay()

    Código :

    //Obtienen el día de la semana (de 0 = Domingo a 6 = sábado) getDay() getUTCDay()

    Hours

    Usos: getHours() | getUTCHours() | setHours() | setUTCHours()

    Código :

    //Obtienen las horas (de 0 a 23) getHours() getUTCHours() //Configuran la hora a partir de las horas setHours(horas, minutos, segundos, milisegundos) setUTCHours(horas, minutos, segundos, milisegundos)

    Minutes

    Usos: getMinutes() | getUTCMinutes() | setMinutes() | setUTCMinutes()

    Código :

    //Obtienen los minutos (de 0 a 59) getMinutes() getUTCMinutes() //Configuran la hora a partir de los minutos setMinutes(minutos, segundo, milisegundos) setUTCMinutes(minutos, segundos, milisegundos)

    Seconds

    Usos: getSeconds() | getUTCSeconds() | setSeconds() | setUTCSeconds()

    Código :

    //Obtienen los segundos (de 0 a 59) getSeconds() getUTCSeconds() //Configuran la hora a partir de los segundos setSeconds(segundos, milisegundos) setUTCSeconds(segundos, milisegundos)

    Miliseconds

    Usos: getMiliseconds() | getUTCMiliseconds() | setMiliseconds() | setUTCMiliseconds()

    Código :

    //Obtienen los milisegundos (de 0 a 999) getMiliseconds() getUTCMiliseconds() //Configuran la hora a partir de los milisegundos setMiliseconds(milisegundos) setUTCMiliseconds(milisegundos)

    Dentro de esta categoría también metería este último método

    setTime()

    Usos: setTime()

    Código :

    //setTime nos vale para configurar una fecha sumando o restando x milisegundos al milisegundo 1 del 1 de enero de 1970 //así si un día tiene 86.400.000 milisegundos, haciendo esto var mas1Dia = new Date(); mas1Dia.setTime(86400000); //Si imprimiéramos mas1Dia de una manera lectible, veríamos que mas1Dia = 2 de enero de 1970 console.log(mas1dia.toDateString()); DEVUELVE--> Fri Jan 02 1970

B. Métodos para obtener fechas legibles

Bueno, ya hemos visto como configurar y modificar el objeto date, y obtener datos precisos de él, ahora vamos a ver cómo obtener estos datos de tal manera que casi cualquier humano, pueda leerlos. Los métodos para conseguir esto sin morir en el intento, siempre devuelven un string, son los siguientes:Ahora que hemos visto sus nombres (y alguno hasta habrá trasteado con los ejemplos prácticos), vamos a generar una fecha de hoy y a pasarla por cada uno de los métodos y veremos lo que obtenemos. A partir de ahora la fecha "Hoy" que se usará para los ejemplos y ejercicios será el 21 de Abril de 2012 y me encuentro en Madrid, España, las horas nos dan más o menos igual, aunque ahora mismo es muy, muy tarde :?.

Código :

//Creamos la fecha de hoy var fechaDeHoy = new Date()  //toString() devuelve el objeto completo en nuestra franja horaria console.log(fechaDeHoy.toString()); //SALIDA ---> 'Sat Apr 21 2012 04:50:14 GMT+0200 (Hora de verano romance)'  //toString() devuelve el objeto completo en GMT+0 ó UTC console.log(fechaDeHoy.toUTCString()); //SALIDA ---> 'Sat, 21 Apr 2012 02:50:14' GMT'  //toLocaleString() devuelve el objeto completo, de acuerdo a las convenciones locales console.log(fechaDeHoy.toLocaleString()); //SALIDA ---> 'Sat Apr 21 2012 04:50:14' GMT+0200 (Hora de verano romance)'  //toTimeString() devuelve las horas minutos y segundos y franja horaria console.log(fechaDeHoy.toTimeString()); //SALIDA ---> '04:50:14' GMT+0200 (Hora de verano romance)'  //toDateString() devuelve el día de la semana, día del mes, el mes, y el año console.log(fechaDeHoy.toDateString()); //SALIDA ---> 'Sat Apr 21 2012'  //toLocaleDateString() devuelve el día de la semana, día del mes, el mes, y el año, de acuerdo a las convenciones locales console.log(fechaDeHoy.toLocaleDateString()); //SALIDA ---> 'Saturday, April 21, 2012'  //toLocaleTimeString() devuelve las horas minutos, segundos y franja horaria, de acuerdo a las convenciones locales console.log(fechaDeHoy.toLocaleTimeString()); //SALIDA ---> '04:50:14'  //toISOString devuelve la fecha formateada con el starndard ISO console.log(fechaDeHoy.toISOString()); //SALIDA ---> '2012-04-21T02:50:14.007Z'  //toJSON devuelve la fecha formateada como fecha JSON console.log(fechaDeHoy.toJSON()); //SALIDA ---> '2012-04-21T02:50:14.007Z'

C. Métodos para trabajar con fechas en milisegundos

Los siguientes métodos nos devolverán milisegundos y todos ellos estarán basados en torno a la fecha universal del objeto Date de la que ya hemos hablado con anterioridad.
(No os asustéis, al final del tuto en los ejercicios crearemos una sencilla función que nos ayudarán mucho en nuestros cálculos con milisegundos)
Estos métodos son:
Vale, vamos a ver de rápidamente cómo usarlos y que obtenemos de cada uno, en la última parte del tuto ya trabajaremos con las fechas

Código :

//Primero creamos una fecha con el día de "Hoy". var fechaHoy = new Date();  //1º - getTime() - sin parámetros console.log(fechaHoy.getTime()); //SALIDA -->  1334968890477  //2º - UTC(año, dia, mes) - 3 parámetros console.log(Date.UTC(2012, 21, 3)); //SALIDA -->  1380758400000  //3º - valueOf() - sin parámetros console.log(fechaHoy.valueOf()); //SALIDA -->  1334968890477  //4º - parse('fecha en string') - 1 parámetro console.log(Date.parse('april 21,  2012')); //SALIDA -->  1334959200000  //Hasta aquí todas las salidas que hemos recibido, son la cantidad de milisegundos desde el 1 de enero de 1970, hasta la fecha sobre la que estemos aplicando el método.  //5º - getTimeZoneOffset() - sin parámetros console.log(fechaHoy.getTimezoneOffset()); //SALIDA -->  -120 //Este es el único de los métodos que estamos viendo que no devuelve milisegundos, devuelve la diferencia en minutos entre nuestra franja horaria y la hora UTC, en mi caso, como estoy en GMT+2, -120 minutos

D. Métodos desfasados

No nos hace falta saber que hacen, lo único que necesitamos es que nos chirríen los ojos si lo vemos escrito por algún sitio, porque seguro que nosotros no lo ponemos.
  • getYear()
  • setYear()
  • toGMTString()
Bueno, bueno, bueno, pues con esto hemos terminado nuestro aprendizaje teórico del objeto Date, ahora sólo nos queda un poquito de práctica. Vamos a hacer algún ejercicio.


3. Ejercicios


Ejercicio1 - Ejercicios sencillos

Empezaremos con unos ejercicios sencillos que no precisen de cálculos
  1. Crear variable "fechaHoy" con fecha de hoy
  2. Crear variable "fecha85" que sume 85 días a la variable "fechaHoy"
  3. Crear variable "fecha187" que reste 187 días variable "fechaHoy"
  4. Sumar 2 años a la variable "fecha85"
  5. Restar 24 horas a la variable "fecha187"
  6. Crear variable "fechaResto" que sea la resta de fecha85 - fecha187 y observa lo que obtienes
  7. imprimir en la consola cada paso
Resultados:

Código :

//a) var fechaHoy = new Date(); console.log(fechaHoy.toString()); console.log('');  //b) var fecha85 = new Date(fechaHoy); fecha85.setDate(85); console.log(fecha85.toString()); console.log('');  //c) var fecha187 = new Date(fechaHoy); fecha187.setDate(-187); console.log(fecha187.toString()); console.log('');  //d) fecha85.setFullYear(fecha85.getFullYear()+2); console.log(fecha85.toString()); console.log('');  //e) fecha187.setHours(fecha187.getHours()-25); console.log(fecha187.toString()); console.log('');  //f) var fechaResto = new Date(fecha85-fecha187); console.log(fechaResto.toString());

Ejercicio - Ejercicio medio

si alguna vez tenemos la necesidad de trabajar con milisegundos, ya sabemos cómo obtenerlos y como configurarlos en una fecha, ahora voy a plantear una función que facilite el trabajo con esos milisegundos.
Lo primero, vamos a ver que son milisegundos y que significan en tiempo.
  • 1.000 milisegundos = 1 segundo = 1000x1
  • 60.000 milisegundos = 1 minuto = 1000x60
  • 3.600.000 milisegundos = 1 hora: = 1000x60x60
  • 86.400.000 milisegundos = 1 día = 1000x60x60x24
  • 31.536.000.000 milisegundos = 1 año = 1000x60x60x24x365
Vale pues vamos a crear una función que nos convierta los milisegundos a todas esas unidades y viceversa

Código :

//La preparamos para que pueda funcionar en los 2 sentidos, convertir milisegundos a unidades y unidades a milisegundos, por lo que además de la cantidad de unidades y el tipo de unidades le pasaremos un modo function convertirMilisegundos (cantidad, unidad, modo) {    //Configuramos la función para que si no la pasamos exactamente 3 parámetros, nos dé una alerta    if (arguments.length != 3) {       //Preparamos la alerta       alert('La función convertirMilisegundos requiere exactamente 3 parámetros\ncantidad, unidad, modo');       //Salimos de la función sin hacer nada más       return false    }    //Declaramos una variable vacia donde almacenaremos el valor por el que multiplicaremos o dividiremos nuestra cantidad    var valor;    //Detectamos la unidad a usar e inicializamos valor    switch (unidad) {       case 'se': valor = 1000; break;       case 'mi': valor = 60000; break;       case 'ho': valor = 3600000; break;       case 'di': valor = 86400000; break;       case 'an': valor = 31536000000; break;    }    //Detectamos el modo, y devolvemos la operación    switch (modo) {       case 'mu': return catidad/valor; break;       case 'um': return catidad*valor; break;    }     }

Y la usaríamos así, imaginad que vuestra empresa tiene 2 objetos Date con una hora de salida y una hora de entrada de un día cualquiera y el jefe os pide la diferencia en minutos y días, después os dice que multipliquéis esas horas por 5 días que tiene la semana y se lo devolváis en milisegundos para saber cuánto habéis vagueado en el trabajo esta semana. Nosotros obedecemos como un perrito faldero.

Código :

//Primero tenemos los 2 objetos Date que la maldita máquina de fichar del curro no perdona a la hora de comer var horaA = new Date(2012, 3, 21, 14, 00, 00); var horaB = new Date(2012, 3, 21, 18, 26, 35); //Como veréis nos hemos retrasado un poco con la siesta  //Bien, almacenamos las 2 fechas como milisegundos en nuevas variables var milisecsA = horaA.getTime(); var milisecsB = horaB.getTime();  //Y ahora a la fecha mayor le restamos la menor, para obtener el intervalo de milisegundos que hay entre las 2 var milisecInter = horaB-horaA;  //Ahora nos ha pedido la diferencia en minutos y días //Muy bien, pues nosotros que somos más eficientes y más chulos que nadie, escribimos: var enMinutos = convertirMilisegundos(milisecInter, 'mi', 'mu'); console.log(enMinutos); //SALIDA --> 266.5833333333333  var enDias = convertirMilisegundos(milisecInter, 'di', 'mu'); console.log(enDias); //SALIDA --> 0.18512731481481481  //Y ahora nos ha pedido que lo multipliquemos por 5 y se lo devolvamos en milisegundos var por5 = convertirMilisegundos(enDias*5, 'di', 'um'); console.log(por5); //SALIDA --> 79975000

Y debido a nuestra eficiencia, el jefe nos perdona las siestas.
Como veréis todo es bastante sencillo, espero que os haya gustado y que le saquéis provecho.

Un saludo.

Enviar comentario

Detectar el navegador con Browser.js

Posted: 30 Mar 2012 05:39 AM PDT

Browser.js es un javascript que sirve para detectar las propiedades del navegador que el cliente utiliza al visitar una página, basta con importar el archivo en el código fuente, y todos los datos del navegador se guardarán en una variable objeto.

Obtiene datos del navegador, la versión, el sistema operativo, la resolución de pantalla, si es dispositivo móvil, y soporta google Chrome, Firefox, Internet Explorer, Safari, Opera, entre otros.

Código :

function Browser() {        // ---- public properties -----     this.fullName = 'unknow'; // getName(false);     this.name = 'unknow'; // getName(true);     this.code = 'unknow'; // getCodeName(this.name);     this.fullVersion = 'unknow'; // getVersion(this.name);     this.version = 'unknow'; // getBasicVersion(this.fullVersion);     this.mobile = false; // isMobile(navigator.userAgent);     this.width = screen.width;     this.height = screen.height;     this.platform =  'unknow'; //getPlatform(navigator.userAgent);          // ------- init -------         this.init = function() { //operative system, is an auxiliary var, for special-cases         //the first var is the string that will be found in userAgent. the Second var is the common name         // IMPORTANT NOTE: define new navigators BEFORE firefox, chrome and safari         var navs = [             { name:'Opera Mobi', fullName:'Opera Mobile', pre:'Version/' },             { name:'Opera Mini', fullName:'Opera Mini', pre:'Version/' },             { name:'Opera', fullName:'Opera', pre:'Version/' },             { name:'MSIE', fullName:'Microsoft Internet Explorer', pre:'MSIE ' },               { name:'BlackBerry', fullName:'BlackBerry Navigator', pre:'/' },              { name:'BrowserNG', fullName:'Nokia Navigator', pre:'BrowserNG/' },              { name:'Midori', fullName:'Midori', pre:'Midori/' },              { name:'Kazehakase', fullName:'Kazehakase', pre:'Kazehakase/' },              { name:'Chromium', fullName:'Chromium', pre:'Chromium/' },              { name:'Flock', fullName:'Flock', pre:'Flock/' },              { name:'Galeon', fullName:'Galeon', pre:'Galeon/' },              { name:'RockMelt', fullName:'RockMelt', pre:'RockMelt/' },              { name:'Fennec', fullName:'Fennec', pre:'Fennec/' },              { name:'Konqueror', fullName:'Konqueror', pre:'Konqueror/' },              { name:'Arora', fullName:'Arora', pre:'Arora/' },              { name:'Swiftfox', fullName:'Swiftfox', pre:'Firefox/' },              { name:'Maxthon', fullName:'Maxthon', pre:'Maxthon/' },             // { name:'', fullName:'', pre:'' } //add new broswers             // { name:'', fullName:'', pre:'' }             { name:'Firefox',fullName:'Mozilla Firefox', pre:'Firefox/' },             { name:'Chrome', fullName:'Google Chrome', pre:'Chrome/' },             { name:'Safari', fullName:'Apple Safari', pre:'Version/' }         ];              var agent = navigator.userAgent, pre;         //set names         for (i in navs) {            if (agent.indexOf(navs[i].name)>-1) {                pre = navs[i].pre;                this.name = navs[i].name.toLowerCase(); //the code name is always lowercase                this.fullName = navs[i].fullName;                  if (this.name=='msie') this.name = 'iexplorer';                 if (this.name=='opera mobi') this.name = 'opera';                 if (this.name=='opera mini') this.name = 'opera';                 break; //when found it, stops reading             }         }//for                //set version         if ((idx=agent.indexOf(pre))>-1) {             this.fullVersion = '';             this.version = '';             var nDots = 0;             var len = agent.length;             var indexVersion = idx + pre.length;             for (j=indexVersion; j<len; j++) {                 var n = agent.charCodeAt(j);                  if ((n>=48 && n<=57) || n==46) { //looking for numbers and dots                     if (n==46) nDots++;                     if (nDots<2) this.version += agent.charAt(j);                     this.fullVersion += agent.charAt(j);                 }else j=len; //finish sub-cycle             }//for             this.version = parseInt(this.version);         }                  // set Mobile         var mobiles = ['mobi', 'mobile', 'mini', 'iphone', 'ipod', 'ipad', 'android', 'blackberry'];         for (var i in mobiles) {             if (agent.indexOf(mobiles[i])>-1) this.mobile = true;         }         if (this.width<700 || this.height<600) this.mobile = true;                  // set Platform                 var plat = navigator.platform;         if (plat=='Win32' || plat=='Win64') this.platform = 'Windows';         if (agent.indexOf('NT 5.1') !=-1) this.platform = 'Windows XP';                 if (agent.indexOf('NT 6') !=-1)  this.platform = 'Windows Vista';         if (agent.indexOf('NT 6.1') !=-1) this.platform = 'Windows 7';         if (agent.indexOf('Mac') !=-1) this.platform = 'Macintosh';         if (agent.indexOf('Linux') !=-1) this.platform = 'Linux';         if (agent.indexOf('iPhone') !=-1) this.platform = 'iOS iPhone';         if (agent.indexOf('iPod') !=-1) this.platform = 'iOS iPod';         if (agent.indexOf('iPad') !=-1) this.platform = 'iOS iPad';         if (agent.indexOf('Android') !=-1) this.platform = 'Android';                  if (this.name!='unknow') {             this.code = this.name+'';             if (this.name=='opera') this.code = 'op';             if (this.name=='firefox') this.code = 'ff';             if (this.name=='chrome') this.code = 'ch';             if (this.name=='safari') this.code = 'sf';             if (this.name=='iexplorer') this.code = 'ie';             if (this.name=='maxthon') this.code = 'mx';         }                  //manual filter, when is so hard to define the navigator type         if (this.name=='safari' && this.platform=='Linux') {             this.name = 'unknow';             this.fullName = 'unknow';             this.code = 'unknow';         }              };//function          this.init();  }//Browser class


Implementación del script HTML

Código :

 <html>   <head>     <script type='text/javascript' src='Browser.js'></script>     <script type='text/javascript'>       var brw = new Browser();       alert('fullName: ' + brw.fullName + '\n' + 'name: ' + brw.name + '\n' + 'fullVersion: ' + brw.fullVersion + '\n' + 'version: ' + brw.version + '\n' + 'platform: ' + brw.platform+ '\n' + 'mobile: ' + brw.mobile+ '\n' + 'resolution: ' + brw.width + 'x' + brw.height);     </script>   </head> </html>


y aquí un ejemplo de tu navegador: Demo

Enviar comentario

Por qué el iPad ganó y por qué NO debes ignorarlo

Posted: 29 Mar 2012 10:28 PM PDT

Al final del 2011, se vendieron casi 60 millones de iPads. Las tablet con Android: 6 millones.

Para el final del 2012, habrán cientos de millones de tablets. Una demografía más grande que países enteros. Un mercado gigantesco imposible de ignorar y una experiencia nueva en apps y en web.

Excepto que ninguna otra tablet importa excepto el iPad. Y sospecho que así se mantendrá por lo menos por dos años más.

El objetivo de este artículo no es evaluar el iPad y las tablets Android como productos de consumo sino entender por qué el iPad define la experiencia de tablets. Como creadores de Internet, debemos probar nuestros sitios en todas las pantallas. Pero también reconocer, como con IE6 en el 2004, a la plataforma dominante.


La calidad del iPad y sus apps es simplemente superior


Android no tuvo una guía de diseño seria hasta Ice Cream Sandwich. Apple obviamente ha tenido su HIG desde el día 1 de la App Store. Por eso vemos engendros famosos en Android como el primer reproductor de mp3 comparado con el iPod app de Apple.

ICS (Android 4) puede ser la respuesta para Google. Pero a la fecha, las tablets Android tienen 13.200 apps (4% de las apps totales de Google Play están hechas para Honeycomb o Ice Cream Sandwich), mientras el iPad tiene 140mil.

El navegador de Android 4 es superior en usabilidad a Safari Mobile, pero apps como Paper, GarageBand, iMovie, Keynote o iPhoto no tienen comparación con nada en el mundo Android. Mi principal queja con el iPad 1 es que se convertía en una tableta de consumo pasivo, en vez de creación de contenido. El iPad 2 y el iPad Pepito (iPad 3) solucionaron eso por completo con apps como estas.



Android no tiene apps de creación de contenido equivalente a Apple en ninguna de sus tablets.

De hecho, al día de hoy, Google Play no tiene una sección de apps para tablets, lo máximo es "Staff picks for tablets", pero ¿Y las top paid, las top free?. El iPad la ha tenido desde el día uno.


Safari Mobile vs. ¿Chrome Mobile?


Mencioné arriba que la usabilidad del navegador de Google es superior a Safari Mobile y es verdad. Ice Cream Sandwich maneja mejor la memoria, mantiene vivos los tabs y hasta tiene Flash (excepto que Adobe ya no hará más Flash Player móvil) ¿Pero y en rendimiento?

Javascript tiene mejor rendimiento en iPad 2 y iPad 3 que en el más veloz Android tablet (Asus Transformer Prime). El iPad 3 con su Core A5X es 5 veces más veloz en gráficos 3D que el más veloz core de Android (Tegra 3). Y todo esto mientras el iPad Pepito (new iPad 3) mueve monstruosos 2048x1536 pixeles, contra los 1280x800 del Transformer Prime con ICS.

Esto sumado a 9~10 horas de batería vs. ¿8~7 del Galaxy Tab y del Transformer Prime?


En el mundo HTML5, Safari Mobile supera en multiples campos al navegador por defecto de Android, pero es superado por Chrome Mobile.

Pero entonces... ¿Por qué carajo Chrome Mobile no es el navegador por defecto de Android?. Google tiene el, quizás, mejor browser de la época y decidió crear "otro" para Android, dejando a Chrome móvil en "beta".

En serio ¿Qué están pensando en Google?

La oportunidad de Android está en el precio


Apple está por lo menos dos años adelante de Android en calidad de apps, usabilidad, cantidad de apps que crean contenido y calidad de hardware

¿Entonces qué hago? ¿Me compro un iPad, mato mi Android? ¿Qué hago?

Yo tengo un Samsung Galaxy Nexus corriendo Ice Cream Sandwich. Lo amo. Es la mejor experiencia móvil que he vivido y no lo cambiaría por nada. ¿Mi Galaxy Tab 10.1? Lo cambiaría sin pensar por un iPad Pepito. Por alguna razón, Google no ha podido competir en tablets al nivel que ha competido en teléfonos.

El Amazon Kindle ha vendido bien, a pesar de ser una experiencia completamente desconectada de Android. Hay rumores que Google planea vender tablets por su propia cuenta con ICS por precios menores a 200 dólares.

Con precio y volumen, Google puede ser capaz de retomar dominio sobre las tablets como lo tiene sobre los teléfonos.

Sin embargo, en el futuro, las condiciones para crear webs para tablets a futuro seguirán siendo la "Retina" 1024x768, el render de Safari Mobile y los specs del iPad. No hay que ignorar a Android, pero es una muy mala idea no tener un iPad si haces desarrollo web.

Es en el iPad donde debemos inspirarnos para crear nuevas experiencias. Es al iPad al que hay que apuntar primero al construir sitios para tablets. Y es un iPad la herramienta que necesitamos, por encima de cualquier otra tablet, para testear nuestros desarrollos en la nueva forma de usar la web.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)