Comunidad de diseño web y desarrollo en internet online

La tecnología detrás de los Cursos online de Mejorando.la

En Mejorando.la lanzamos el Curso de diseño y desarrollo web online junto a Cristalab y Maestros del Web. Enseñaremos HTML5, CSS3, Javascript, jQuery, Node.js y Django con Python. El curso tendrá sesiones en vivo, videos en archivo, material interactivo, un sistema de discusión compartido entre maestros y estudiantes y mucho mucho más.

Quiero hablar del "mucho más" y contarles cómo logramos crear la mejor plataforma de educación online, qué tecnologías usamos y qué planeamos hacer con ella a futuro.

El humilde inicio: Clases online en vivo


Llevamos cuatro años en Mejorando.la pensando en dar clases online. Los problemas técnicos aun eran muchos por solucionar ¿Cómo transmitir video? ¿Cómo compartir archivos, código, keynotes? ¿Examenes? ¿Cómo nos comunicamos? Estos fueron nuestros prototipos iniciales:



Con nombre clave "Hanarah" la idea era simplemente clases en vivo. Teniamos video en vivo, un chat y un sistema de preguntas en tiempo real con votos por cada pregunta, votos por respuesta, discusiones anidadas y preguntas organizadas por relevancia.

¿Cómo hariamos la parte del video en vivo para los profesores? Para éstas epocas el streaming era joven y sólo conociamos ustream a fondo.



Pensamos en múltiples sistemas. Tricaster para nuestro centro principal. Sistemas P2P de distribución de video, etc. En el camino encontramos a Mediastream, la mejor empresa de streaming con la que hemos trabajado y con ellos, mientras haciamos Mejorando.la Web (el programa semanal de los jueves) empezamos a implementar experimentos de cursos online.

Con ellos logramos streaming Flash y HTML5 para iPhone, iPad y Androids usando Wowza Server y el Mediastream StreamManager, un desarrollo de ellos.

Empezamos a contratar un equipo completo y detallar más capacidades. Multiples discusiones, más charlas en aviones y más prototipos de cómo sería el futuro. Este por ejemplo es el "mockup" del sistema de examenes y certificación:



Decidimos caracteristicas y con un equipo genial en México, Perú, Washington y Colombia. Era hora de ejecutar.

Los super poderes de Mejorando.la Plataforma


Al entrar a un curso, lo primero que ves, es el timeline del curso con los items de estudio y el sistema de discusión.



Pueden ser videos, lecturas (código, texto, imagenes), sesiones en vivo, archivos compartidos que se pueden ver dentro del navegador, lecturas externas y examenes de certificación.



Los estudiantes pueden ver qué items son los más populares y el sistema organiza los items en orden de importancia de cada estudiante. Cuando ves un item, este se pone gris y se va abajo. Los profesores configuran prioridades y los estudiantes siguen el curso al ritmo que quieran.



Al enviar preguntas, estudiantes y maestros pueden votar por la mejor (o la peor en negativo). Las respuestas también tienen votación y los puntos te dan ranking dentro del curso. Construimos un editor de respuestas que permite insertar código, enlaces e imagenes sin necesidad de usar ningún lenguaje. Ni Markdown, ni HTML, ni BBCode, ni nada. Sólo visual y hermoso.



Dentro de las clases en vivo el sistema de discusión sigue activo, hay un chat para comunicarse en directo con toda la clase que está viendo el curso y tenemos un sistema para compartir archivos. Si un profesor sube un archivo de código, el código puede verse dentro del sistema, sin salir de la interfaz, coloreado y lindo



Si se sube un PSD, un .AI, un JPG o cualquier imagen, también mostrará un preview. Un texto se ve dentro de la plataforma tal cual. O si quieres descargar todos los archivos, lo puede hacer con un click.

En el instante que el profesor sube el archivo, todos los estudiantes reciben la notificación y pueden abrirlo, en tiempo real.



Al final del curso hay un examen de certificación creado por los maestros. El examen puede retomarse cada 24 horas en caso de fallar y al final te muestra en qué preguntas fallaste para que sepas qué estudiar. Si el estudiante logra completar el examen, le llega a su casa, esté donde esté, un diploma de certificación impreso profesional.



Lenguajes, servidores y tecnologías


Cómo construimos Mejorando.la Plataforma:

En backend elegimos Python y Django por su rapidez de desarrollo y en especial por la espectacular capacidad de Django de crear automáticamente el sistema de administración. Tenemos un admin propio también, pero cuando pasan cosas raras, el admin de Django es amor puro.

El chat, el sistema de discusión y el sistema de archivos requieren reacción en tiempo real. Node.js con Socket.io fue la respuesta.

Las bases de datos como MySQL o PostgreSQL siguen siendo muy efectivas y robustas, pero en cosas que se mueven a máxima velocidad de escritura como el chat o la discusión, estos sistemas empiezan a degradarse y no dan la velocidad que esperabamos. Para sistemas de alta escritura en tiempo real, usamos MongoDB, una base de datos no relacional basada en objetos JSON.

En frontend usamos HTML5 y CSS3 con Responsive Design para adaptar el diseño a cualquier dispositivo. Pero no hacemos simplemente CSS3, usamos Stylus para crear el código CSS final. Muchos efectos interactivos usan jQuery.

Github es nuestro sistema de control de versiones, discusión de errores y track de problemas. Tenemos Mejorando.la como un proyecto open source en Github y un repositorio privado para la plataforma. (Clabie también es open source en Github)

Basecamp es nuestro centro de control del proyecto. Ahí guardamos TODOs, avances, discusiones a futuro e imágenes a maquetar. Dropbox es la forma en la que todos compartimos archivos.

Para transmitir las clases en vivo, usamos CamTwist en Mac y XSplit en Windows, ambos canalizados por Flash Media Live Encoder al Wowza Server de Mediastream que lo convierte a rtmp y a streaming HTML5.


Así construimos la plataforma donde daremos el Curso de diseño y desarrollo web online de Mejorando.la.
¿Tienes más preguntas? Las responderé en los comentarios todas. Comparte esto y trae a todos tus amigos, compañeros y conocidos a nuestro mejor curso online.

Cómo funciona Google Search Voice

La nueva versión de Android incluye un sistema de búsqueda por voz más sofisticado que en versiones anteriores. Ahora mismo mediante Google Search Voice puedes preguntarle a tu dispositivo ¿Cuándo es el día del padre o ¿Cuál es la capital de Suecia?. Lo que mucha gente se pregunta ahora mismo, es: ¿cómo funciona esta tecnología?, ¿entienden realmente estos dispositivos lo que preguntamos?.

Los Lenguajes Naturales son las Interfaces de usuario más avanzadas. Imaginen un dispositivo que pueda entender todo lo que decimos, eso sería impresionante! Imaginen no tener que programar en 'lenguajes de programación' si no que se pudiera dar ordenes en un alto nivel a nuestros dispositivos en español. Imaginen a la abuelita programando!





En este artículo explicaré cómo funciona un sistema de preguntas y respuestas.



La diferencia entre Conocimiento e Información.


Vivir en la Era de la información significa que tenemos acceso a gran cantidad de contenidos y que somos capaces de generar contenidos y compartirlos con otros. Compartimos y generamos información cuando tuiteamos comentando acerca de un producto o servicio, cuando publicamos en 4square que estamos en un restaurante y que nos agrada o detestamos lo que ordenamos para comer.

Por otro lado, Conocimiento es usar grandes cantidades de información para establecer, por ejemplo, patrones de comportamiento, tomar decisiones y predecir sucesos. Generamos información cuando escuchamos música y usamos el scrobber de last.fm para almacenar las canciones que hemos escuchado durante el ultimo año, conocimiento es cuando last.fm en base a todas esas canciones nos recomienda una canción nueva que probablemente nos agrade.



Estamos en el boom en cuanto de la generación de conocimiento por que existen las plataformas para generar y compartir información. Naturalmente ello conduce a dos problemas:

  • El primer problema se relaciona con la cantidad de información. ¿Cómo procesar tanta cantidad?. De este problema surge el éxito de la computación en la nube y frameworks como hadoop que facilitan a los desarrolladores trabajar en ambientes distribuidos.

  • El Segundo problema consiste en que la información no es estructurada, es decir, NO es una gran Base de Datos a la cual podemos consultar, todo lo que la gente escribe en blogs, foros, twitter, facebook, reddit es lenguaje natural... el reto está en cómo extraer información y relaciones entre la información descrita en estos lenguajes.



Recuperación de Información


Recuperación de información es lo que ha hecho Google durante todo este tiempo. Formalmente consiste en, dado un conjunto de palabras clave, retornar una lista de documentos que se relacionen con las palabras clave.

Este es el paradigma que hemos usado todo este tiempo, si es el mejor o no, es una discusión. Lo que sí es cierto, es que queremos optimizar nuestro tiempo, no queremos perder nuestro tiempo buscando y leyendo documentos que no nos interesan.

Imagina que quieres comprar un nuevo teléfono, el teléfono X, probablemente antes de comprarlo quieras saber:

  • Qué opina la gente que ya compró ese teléfono.
  • Comparativas entre el teléfono X y sus competidores más cercanos


Lo que tu haces, es generar distintas búsquedas en Google, leer un foro, probablemente alguien hizo una pregunta en Yahoo Answers, una pregunta similar a: "cual teléfono debo comprar el X o el Y?" ..etc.. generas varias búsquedas, lees un poco de los resultados arrojados.. ¿tal vez buscas algo relacionado en twitter?, y finalmente tomas tu decisión.

Imagina un sistema, que no sólo indexe la información de la web, pero que además razone sobre ella, que entienda lo que está escrito. Entonces le podrías decir que te haga un resumen sobre el teléfono X. En vez de una lista de sitios web, como resultado obtendrías quizás una lista sólo con opiniones y comparaciones, que es realmente lo que te interesa para tomar tu decisión.

Para mí, todo lo anterior es la recuperación de información en el futuro. Las búsquedas resultarán mucho más eficientes, los resultados serán tan precisos como lo sea la pregunta ingresada, y si la pregunta no es precisa, los resultados serán un overview a gran escala de muchas fuentes diferentes. Seguramente, muchos de los resultados que se obtengan no sea información, si no, conocimineto, eso es el poder de la información.

Pensemos que esta tecnología ahora mismo es quizás un poco fantasiosa, o no, tal vez en 5 o 10 años lo podremos ver?....Aterrizando un poco al 2012, Google le apunta a ello, tienen la información y quieren procesarla, de allí apuntarle a los sistemas de preguntas y respuestas.


Sistemas de Pregunta y Respuesta


A un sistema de preguntas y respuestas le haces una pregunta y el sistema, en vez de responderte con una lista de documentos que se relacionen con las palabras de la pregunta, te arroja una respuesta concreta o cercana a la pregunta que fue ingresada.



¿Esto es magia? No. Es procesamiento de lenguaje natural. Probablemente Google en estos momentos está generando una ontología (una representación de conocimiento) donde se especifican conceptos y relaciones entre esos conceptos. Creo que ello es parte de lo que ellos llaman "The Knowledge Graph", si van al sitio web, pueden navegar entre conceptos (ejemplo: Italia) y cómo se relaciona un concepto con otros, por ejemplo: Italia <-> Leonardo da Vinci.

Este proceso se denomina Open Information Extraction, el cual consiste en extraer conceptos y relaciones de texto en lenguaje natural.

Veamoslo de esta manera: a partir de un noticia que diga:

:

La esposa de Barack Obama, Michell, ha participado con la fundación X..."


El sistema de Google extrae un registro:

:

(Michell Obama, participar, fundación X)


Y más relaciones son posibles para el mismo ejemplo.

:

(Michell, esposa de, Obama).. (fundación X, trabaja con, Michell Obama)




A partir de esos registros se crea una ontología como la de 'the knowledge graph' automáticamente. Obviamente esto requiere muchos procesos relacionados con inteligencia artificial, se tienen que entrenar sistemas para que reconozcan cosas más avanzadas, por ejemplo que a partir de una relación como:

:

"X fue asesinado por Y"
se concluye otra relación

:

"X esta muerto"



Parece muy sencillo, pero a nivel computacional es muy difícil, por que involucra lo que llamamos "sentido común".

A partir de esta ontología se puede crear un sistema que permita responder preguntas. Aquí el sistema tiene que 'entender la pregunta'.. y en base a ello calcular la posible respuesta.


¿Cómo entender la pregunta y encontrar la respuesta?


Lamentablemente no existen sistemas avanzados con respecto al entendimiento de lenguajes. En mi humilde opinión, sólo son trucos estadísticos que crean la fantasía que la computadora puede entender lo que decimos.

Supongamos que la pregunta al sistema es, "¿Dónde murio Michael Jackson?", el componete del sistema encargado de procesarla se fija en varios componentes: establecer el tipo de pregunta, establecer el tema de la pregunta y establecer relaciones entre componentes de la pregunta.


Establecer el Tipo de Pregunta

El sistema debe encontrar una partícula que le indique qué tipo de pregunta es y a que categoría pertenece la respuesta que busca. En este caso "Dónde" le indica que lo que está buscando como respuesta es una "locación", lo que sea la respuesta debe de ser en su base de conocimientos una "locación".


Establecer el Tema de la Pregunta

Para encontrar el tema de la pregunta, tiene que descartar las palabras menos relevantes, y encontrar las más predominantes, en este caso el tema es "Michael Jackson".


Establecer relaciones entre componentes de la Pregunta

Usar las palabras del contexto para encontrar posibles relaciones. en este caso podría ser la palabra "morir".

A partir de ello el sistema sabe que va a buscar algo en la ontología que tiene que ver con "Michael Jackson", que lo que va a retornar como respuesta tiene que ser una locación en la ontología, además que la relación entre ese lugar y "Michael Jackson" tiene que ver con: "muerte","morir".

Posibles problemas


¿Cómo saber si todas las relaciones que se extraen son correctas? qué podría pasar si alguien escribe: "Michael Jackson murió en Bogotá, Colombia", entonces la base de conocimientos es errónea y las respuestas serán erradas.

Lo que ocurre en este tipo de casos es que muy probablemente Google descarta las relaciones encontradas en ciertos sitios, o usa por ejemplo el sistema de búsquedas actual lanzando una búsqueda como "Michael Jackson muere en Bogotá" si esta consulta arroja menos de cierta cantidad de resultados entonces la considera como una relación falsa.

Una pregunta con la partícula "Dónde" es fácil de responder, el sistema busca un lugar, pero ¿que pasa con preguntas con las palabras: "Cómo" o "Porqué"?. Estas preguntas requieren un razonamiento más avanzado, y no creo que tengamos pronto un sistema que pueda resolverlas.


Finalmente


El tema de lenguaje natural es algo filosófico al momento :) lo que sí es seguro es que compañías como Google y Apple le apuesten fuertemente a iniciativas en esta dirección. En mi opinión el siguiente gran salto en interfaces de usuario va relacionado con poder entender los lenguajes naturales y poder generar frases en estos lenguajes haciendo que estas frases suenen lo menos robóticas posibles. (alguien ha escuchado a Hatsune Miku♥ ? )

Este es un artículo divertido con varias preguntas que le hacen al sistema "70 things to try with Google's Android 4.1 Voice Search"

Espero este post les de una idea de cómo funcionan ciertos servicios, los cuales probablemente se van a volver muy sofisticados en los próximos años.

@dav009

Qué significa Retina Display en el diseño web

Laptops, teléfonos y tablets están cambiando las reglas respecto a los pixeles, las imagenes y las interfaces. El iPhone 4 fue el primer en ponerle nombre: "Retina Display". Pantallas con el doble de densidad de pixeles de la generación tradicional en la que por años hemos estado acostumbrados a diseñar.

Ese fue solo el inicio. Vivimos en un mundo dominado por 3 tipos de pantalla:
  • El teléfono, de uso normal vertical.
  • Los tablets. iPad a 4:3 y Android tradicionalmente a 16:9.
  • Los laptops y desktops, que van desde el netbook de 1024x600 hasta la estación de combate dual de 3840x1080.

¿Para qué pantallas diseñamos?


Asumiendo la pantalla 13"~15" como el estandar de los laptops y el iPad y iPhone como el estandar de los móviles, este es el mundo al que nos enfrentamos:


Dos soluciones surgieron. Crear un diseño aparte para móviles, otro especializado para tablets (puagh!) y uno tradicional para laptops. Otra idea, más sensata ha sido el Diseño Adaptable o Responsive Design. Requiere más esfuerzo, pero sólo tiene ventajas, entre ellas un mejor posicionamiento en buscadores para sitios móviles y un diseño uniforme y unificado.

Pero ninguna de estas soluciones es eficiente para Retina Display.

De Responsive Design a Retina Display, la diferencia es abismal


¿Recuerdan el gráfico de arriba? Este es el gráfico del cambio de resolución entre los dispositivos normales y los dispositivos con pantalla tipo retina.


¿Crees que aún son pocos? Apple tiene 3 teléfonos retina, la tablet más vendida del mercado, su laptop más poderoso en 15" y este mes saldrá el Macbook Pro Retina de 13" que seguro venderá mucho. En un año, todos los Macbooks serán Retina.

En el mundo Android, desde el Galaxy S2 la densidad aumentó mucho y con el S3 llegó al nivel de Retina Display. HTC, LG y Motorola tienen planes o teléfonos ya con alta densidad de pixeles. En tablets aún están quedados, pero el Nexus 7, la tablet Andriod más vendida, tiene una densidad cercana a Retina.

En el mundo Windows, tanto Samsung, como Lenovo y ASUS lanzarán laptops con pantallas tipo "Retina" y Windows 8 al final de este año. A partir de ahora todos los laptops de gama media y alta tendrán este tipo de pantallas.

Es una realidad y hay que actuar ahora

¿Qué se ve bien y qué se ve mal en Retina Display?


Todo lo que sea texto se ve perfecto e impecable en Retina Display. El texto es vectorial y las buenas fuentes son adaptables a cualquier pantalla y resolución. Esto ha hecho renacer el font-face de CSS3 y las librerías de fuentes abiertas como Google Fonts. También existen fuentes de iconos que reemplazan los .png (nadie decente usa .gif en el 2012 al diseñar).

¿Pero las imágenes? Las imágenes son la mala noticia. Una imágen normal de 300x300 se ve así en pantallas normales (izquierda) y así en Retina (derecha):


No exajero. Cambiar de mi viejo macbook al Macbook Pepito Retina 15" fue como ver un canal de TV antiguo en un TV LCD HD 1080p de 60". ¿Por qué antes se veía bien y ahora todo se ve mal? Todo es cuestión de perspectiva y comparación. Cuando tienes un Macbook Retina y uno normal lado a lado, no puedes evitar pensar que el normal se ve borroso, aunque lo hayas usado toda la vida.

La solución es fácil: Pública tus imagenes al doble de resolución. Si quieres que un logo se vea bien a 100x100 en Retina, crea una imagen de 200x200 y ponla de 100x100 usando CSS. Lo mismo con HTML para las imagenes de tu contenido. No hay mejores soluciones.

¿Es más peso? Sí, pero encontré un truco curioso. Si exportas un JPG al doble de resolución, con el 40% de la calidad y por HTML o CSS lo redimensionas a la mitad de su tamaño, se ve impecable en pantallas normales y en pantallas retina. ¡Y pesa menos que un JPG normal a 85%!

¿Y si usas Flash? ¿Flash es vectorial, verdad?


Sí. No. Flash es vectorial pero representa en pantalla visualmente bitmaps rasterizados y rendereados del contenido. Adobe no ha dado soporte en el Flash Player para Retina Display hasta ahora y todos los SWF se verán tan mal como un JPG. Esto es una realidad tanto para el contenido vectorial, texto o incluso bitmaps como imagenes o videos. Una lástima, pero una realidad.

UPDATE: El honorable @elecash me ha hecho hacer más experimentos con el Flash Player. Se ve muy bien en vectorial el SWF si lo insertas de la manera correcta y si todos tus assets son no vectoriales. El problema sigue siendo que Flash recomprime los JPG, pero es cuestión de configurarlo pesado. En video, no hay solución, pero esto es una realidad incluso con HTML5.


Las pantallas de alta densidad son una realidad inmediata que mucha gente está usando y para las que deberías adaptar tus sitios y apps ya. ¿Ya lo hiciste?

Evento "Create the Web" en Londres

El pasado dia 2 de octubre tuvo ocasión el evento "Create The Web" en Londres. Dicho evento forma parte del Tour que Adobe está dando al rededor del mundo para mostrar su compromiso hacia la web adaptando su estrategia a los estándares web y permitiendo a los desarrolladores crear contenidos de calidad con unas nuevas aplicaciones realmente interesantes.




A dicho evento tuve el privilegio de asistir en nombre de Cristalab invitado por Adobe, con lo que tengo que agradecer tanto la invitación como el fantastico trato recibido por la organización.

Las conferencias empezaron con una Keynote de Mike Chambers quien junto a Paul Trani mostraron las nuevas herramientas para crear la web actual. Seguidos de conferencias más teóricas como las de Divya Manian que mostró la evolución de la web a nivel gráfico, y el showcase de Sally Jenkinson mostrando gran parte de las nuevas capacidades creativas de la web. Quedando claro desde un principio el enfoque total y absoluto de Adobe hacia HTML5 para la creación de contenido en la Web.



A nivel de las nuevas aplicaciones presentadas en el evento, Freddie escribió anteriormente un articulo a raiz del mismo evento presentado en San Francisco: Edge Animate, Edge Reflow, Edge Code, Edge Inspect, Edge Webfont son herramientas muy interesantes y una gran noticia para todos los desarrolladores que quieran crear contenidos de calidad adaptándose a los nuevos estándares de la Web actual.

A continuación iré escribiendo diferentes artículos para ir mostrando de forma individual las nuevas aplicaciones y características presentadas. Ya que como digo, vale la pena probarlas y profundizar en ellas.

Analizamos Adobe Edge, el compromiso de Adobe por HTML5

Adobe tuvo hoy el evento Create the Web, donde anunció un compromiso total por HTML5, CSS3 y el nuevo Javascript. Adobe está trabajando en CSS Shaders (animaciones complejas 2D/3D en CSS) y en una suite de herramientas llamada Adobe Edge Tools & Services.

Editores de código, sistemas visuales para generar Responsive Design, fuentes abiertas para la web, suites de animación CSS3/JS y compiladores de código web a apps nativas para móviles. Esta es la respuesta de Adobe y está muy interesante.


Edge Animate


Adobe Edge Animate es un sistema de animación con el nivel de complejidad y detalle de Flash y exportación directa a CSS3. La interfaz está completamente basada en Webkit y hecha en HTML5 (como casi todo de Adobe). Las herramientas vectoriales no son tan poderosas como en Flash, pero la idea es usar Adobe Illustrator u otras herramientas externas para crear los assets que dentro de Edge Animate serán animados.


Adobe Edge Animate precarga jQuery 1.7 además de múltiples librerías de animación de jQuery. Aunque la mayoría de animaciones se hacen a través de propiedades de CSS3, asumo que se usa jQuery como fallback para que sea compatible con navegadores viejos. Esto es un ejemplo del CSS3 que genera Animate:

Código :

-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(318.44999999999993px, 200px) translateZ(0px) rotate(0deg) skewY(0deg) scale(1, 1);


Edge Reflow


Esta fue una sorpresa. Adobe Edge Reflow es una herramienta visual para crear sitios web basados en grillas que se autoadapten a cualquier resolución. Sí, una app para hacer Responsive Design o Diseño Adaptable. Una idea interesante, aunque no he podido ver qué tan limpio es el código que genera.



La idea de Edge Reflow no es ser el centro de trabajo de un diseño web, sino el lugar donde testeamos la adaptabilidad de los diseños antes de pasarlo a Dreamweaver, Edge Code, Sublime Text o a lo que sea.

Edge Code y Brackets


Adobe, creo, entendió la caída fuerte de popularidad en Dreamweaver y decidió crear una herramienta con el poder y versatilidad del lider de mercado: Sublime Text 2. Adobe Edge Code está basado en el proyecto open source Brackets y es un muy interesante editor de código. 100% hecho en HTML5/JS, permite editar código en tu disco duro o en "la nube", correr desde un laptop o un iPad y soporta todas las tecnologías web.



Aún le falta mucho para competir contra Sublime (Python, Ruby, Java, plugins...) pero tiene ideas muy interesantes. Si, por ejemplo, estás en un .html que hace una llamada a una función en JS, Edge Code es capaz de encontrar esa función en el .js y mostrartela ahí mismo, en el contexto, editable inmediatamente. Lo mismo aplica a CSS y otros momentos de código distribuido entre archivos. Además tiene una función para conectarse con Chrome y editar en tiempo real, pero por lo menos usando la beta de Chrome en Mac no pude hacerlo correr.

Edge Inspect


Edge Inspect es simple: Es el mismo conocido, amado y poderodo Web Inspector de Chrome, pero con la capacidad de ser multiplataforma y revisar cambios a los elementos de diseño y CSS de un HTML en tablets, teléfonos y desktops. Muy útil y derivado del proyecto Adobe Shadow.



Es en mi experiencia, un poco lento al inicio, pero una herramienta que vale mucho la pena para evitar el F5, CTRL+R y click a refresh típico del desarrollo multiplataforma.

Edge Webfonts y el nuevo Typekit


Otra sorpresa es Adobe entrando al mundo de las fuentes Open Source. Adobe historicamente ha recibido muucho dinero por sus fuentes (Myriad Pro, Helvetica Neue, etc), pero ahora ha decidido crear fuentes gratuitas y abiertas para usarlas con font-face de CSS3. Compitiendo contra proyectos como Google Web Fonts.



También anunciaron las fuentes "Source Sans Pro" para ver texto en pantallas y "Source Code Pro" para editar código. +1 para Adobe

Phonegap Build


Mi anuncio favorito. Adobe Cordova pasa a ser oficialmente Adobe Phonegap Build. Un proyecto que nos permite convertir apps HTML5 en apps nativas para iPhone, iPad, Android y casi cualquier plataforma tanto móvil como desktop. Con Adobe Phonegap están construídas muchas de las apps presentadas hoy. Phonegap Build además es un servicio en la nube para compilar en un sólo click tus apps HTML5 a todas las plataformas. Te generará los .ipa, .apk y .app necesarios para enviarlo a las App Stores. También te enviará screenshots y permitirá probar remotamente en multiples dispositivos




¿Qué tal todos estos anuncios? Adobe ha decidido dar todo por HTML5 y no puedo estar más contento. Tal como dijo @cristalab


Y encima, Adobe Edge & Tools en su versión 1.0 será perpetuamente gratis. Sólo necesitas una cuenta gratis de Adobe Creative Cloud.

Felicidades Adobe, de nuevo por el mejor camino para la web.

Cómo agregar una imagen de header a tu perfil de Twitter

Al igual que Facebook y Google+, Twitter anunció esta semana la capacidad de agregar una imagen de header a tu perfil. Es una copia, sin duda, pero igual se puede ver más lindo tu perfil con un header bien elegido.

Sin embargo el cambio no es automático y tienes que editar tu perfil a mano y tener varias cosas en mente antes de cambiar el header, aquí te decimos cómo. Iniciando con el perfil aburrido de @cristalab.


Edita tu perfil en Twitter


El screenshot de arriba es la típica, aburrida imagen de perfil de una cuenta en Twitter. Vas a tu cuenta y buscas el "Edit profile" o "Editar perfil". En él, van a la opción "Design":


Cambia la cabecera de tu cuenta en Twitter


Dentro del editar perfil, abajo, tras hacer scroll, encontrarás esta opción de cambiar la cabecera o header:


Al darle click, eliges una imagen en tu disco. El editor de Twitter te permitirá redimensionarla y ajustarla, pero lo recomendado es que la prepares. La dimensión recomendada es 1200 x 600 pixeles.
Nota: Intenta que la mitad inferior de la imagen sea oscura, porque el texto encima es blanco y no se leerá fácil si es un area clara. FAIL de los diseñadores de Twitter. Quizás lo arreglen a futuro.


Tras elegir tu header, ya estás, un perfil lindo :)

Ejemplos de perfil








¿Lo lograron con sus cuentas?

Cómo funciona la geolocalización por WiFi

La geolocalización es muy útil en aplicaciones web y móviles. Pero GPS no siempre está disponible. Gracias a un esfuerzo de empresas como Google, Apple, Microsoft y Skyhook, es posible obtener latitud y longitud muy acertada con sólo usar antenas wifi. Aquí te explicamos cómo funciona.


El demo


Entra a Geolocation de HTML5 Demos y si estás desde un laptop o un computador con antena wifi prendida dale "Aceptar" cuando el navegador te pida permiso. Verás que te ubica MUY cerca a donde estás, si no es que es exacto.

Geolocation de antenas wifi


La geolocalización funciona con HTML5 o con apps nativas móviles. La técnica es muy simple:

1. Capturar datos de routers y geolocalizarlos


Si tienes un teléfono Android o iPhone, al instalarlo te preguntó si querías "ayudar anonimamente" y al mismo tiempo hacer que la localización sea más veloz. Todos dicen que sí.


El teléfono prende la antena wifi y captura todas las redes inalambricas cercanas. NO importa que esté protegida, que sea WPA2 o que la clave tenga mil caracteres porque no usa el nombre de la red, ni los paquetes, sino la MAC Address del router. Este es un número único del router que nunca cambia, incluso si el router es formateado o la red cambia de nombre. Y siempre va en texto claro entre las ondas.

Tras capturar una lista de MAC de los routers cercanos, el teléfono prende el GPS tradicional, obtiene una latitud y longitud acertada y manda a los servers (Google Geolocation, Skyhook, Microsoft Bing Geocode, etc) esos datos. Los routers rara vez se mueven, así que la base de datos tiende a ser buena.

Los carros de fotos de Google Street View también hace lo mismo con GPS profesional y antenas wifi de alto poder.

2. Comparar routers cercanos con la DB pública


Cuando una aplicación pide geolocalizar por wifi, sea en un teléfono, tablet o laptop, la app se conecta a Google Geolocation, Skyhook o la empresa que use (los navegadores lo hacen automático), le envía al API una lista completa de las MAC Address de todos los routers que tu antena ve. El API compara esas direcciones con latitudes y longitudes, triangula y envía una latitud y longitud muy cercana a la realidad.


3. Hacer algo con la latitud y longitud


¿Quieres probarlo? Crea un archivo HTML y en etiquetas script, inserta este código:

Código :

navigator.geoLocation.getCurrentPosition(exito, fallo);
function exito(datos)
{
   alert(datos.coords.latitude + "," + datos.coords.longitude);
}
function fallo(errorsh)
{
   alert("Tarde o temprano ¬ ¬");
}

Atención: Lo tienes que probar en un server, aunque sea local, no te sirve si lo abres desde el disco.

Al probarlo, te pedirá permiso para buscarte, usará geolocalización por wifi y te mostrará en pantalla tu latitud y longitud separado por una coma. Necesitas usar un navegador de verdad, eso sí. IE9 o superior.

Luego, puedes poner esos números en Google Maps y verás que, quizás, es tu casa. Si quieres usar esos datos para mostrar el mapa en un sitio web, puedes usar Gmaps.js o el API de Google Maps nativo.

La geolocalización wifi es increíble y funciona incluso en lugares muy remotos. Pública en los comentarios de donde eres y si te funcionó. O cuentale en un tweet a @cristalab.

La historia y muerte del Flash Player en iPhone y Android

Todo empezó hace cinco años. Cuando el iPhone salió y Apple, famosamente, prohibió la existencia de Flash en el teléfono. De ahí se desprende una saga gigantesca:


2007, salida del iPhone


El 2007 sacudió al planeta entero. La salida del primer dispositivo multitouch, teléfono, navegador completo, computador real de bolsillo, a un precio semi-sensato, fue una sorpresa para la que nadie estaba preparado. Lo mejor de la época era el N95 de Nokia y el Blackberry Bold. El iPhone cambiaría para siempre la computación.

Muchas preguntas circularon a Apple, la principal ¿Habrá Flash Player para Safari Mobile? La respuesta:
“There will be no Flash support at the moment on the iPhone.”



2008, la bipolaridad de Apple y Adobe


El iPhone es un éxito absoluto. Pero nadie sabe aun si quiera si habrán apps para la cosa. En la época recibí información bajo NDA de varios empleados de Adobe con Flash Player en sus iPhone y obvio, la reporté como rumor. Pero era muy real. El Flash Player corría standalone en iPhones con jailbreak e ingeniería inversa.

Luego, Apple libera el SDK de apps y dice que no está convencida que Flash Player sea buena idea. Aun no se pronuncia Adobe al respecto.

Para finales del 2008, Adobe confirma estar trabajando en un Flash Player. La razón de la confirmación es presionar a Apple de dejarles instalar el player en Safari. Apple se sigue negando tras el escenario.



2009, Adobe se cansa. Android brilla. Adobe mete el player al iPhone por detrás


La gran noticia del 2009 es que, tras dos años, la competencia estaba lista para pelear. La Palm Pre y Android presentan sus versiones más maduras. Google y Palm confirman lo mucho que quieren a Flash de su lado

Sale el HTC Hero, el primer teléfono Android con Flash Player. Inicialmente es el horrible Flash Lite, pero eventualmente será el Flash Player 10.

Adobe crea el Flash Player Compiler for iPhone y muestra que, a escondidas, a metido multiples juegos a la App Store de iPhone que fueron croscompilados a Objective-C usando Actionscript 3 y el core del Flash Player. A Apple no le gusta la noticia. El año termina con Flash Player 10 en Windows Mobile, WebOS (Palm Pre), Symbian y Android.



2010: La hecatombe de Steve Jobs


Sale el iPhone OS 4 (Aun no se llama iOS) y Apple anuncia muchas cosas lindas, entre ellas que queda prohibido desarrollar apps para iPhone con cualquier cosa que no sea Objective-C y XCode, matando el esfuerzo de Adobe y el punto de venta #1 de Flash CS5. Adobe peleará esta decisión en tribunales y comisiones anti monopolio.


Ese mismo mes, Adobe asume la realidad y abandona para siempre la idea de un Flash Player para iPhone. Declarando que se dedicará a apoyar las plataformas "abiertas" y declarando su compromiso con Android.

Apple recibe UNA LLUVIA DE IRA como nunca y Steve Jobs decide usar un arma nuclear. El CEO de Apple publica una carta donde explica la historia de Apple y Adobe, como ellos intentaron ayudar a Adobe y como Adobe, en opinión de Apple, nunca fue capaz de entregarles un Flash Player decente para móviles.

La cosa se pone peor cuando la industria del porno abandona Flash y declara su soporte por video en HTML5. HTML5 no estaba listo para prime-time, pero Apple y el porno estaban decididos a empujarlo. Google y hasta Microsoft se montan en la misma tarea.


La presión legal de Adobe logra que Apple acepte apps nativas croscompiladas desde AS3 y Flash hacia el iPhone. Esta es la misma época en la que Android empieza a ganarle terreno al iPhone y la FTC de USA empieza a investigar a Apple por monopolio abusivo.


2011: El Fin del Flash Player


El uso del Flash Player en Android estaba en su punto más bajo y nadie realmente lo usaba. El empuje de Chrome, Firefox, Safari, IE9 y los webkit móviles convirtió al 2011 en el año de HTML5. Adobe seguía viendo crecimiento en el desarrollo de juegos con Flash y apps con Flex que eran croscompiladas a apps nativas en Android y iPhone, pero no veía tal cosa en el player embebido en el navegador.


En el 2011, Adobe perdió su último aliado. Microsoft anuncia que Windows 8 no correrá el Flash Player en Internet Explorer 10 en la interfaz Metro por defecto. Habrá que desactivar Metro, algo que rara vez hace un usuario normal. El Flash Player obtiene su golpe más fuerte.

Adobe declara, en noviembre del 2011, que abandona el Flash Player móvil y que se enfocará en HTML5.

Incidentalmente, es por este artículo que gran parte de la fanaticada flashera hispana se volca en contra del fundador de Cristalab (miren los comments), lo que lleva a "Una explicación honesta del clusterfuck de Adobe, Flash y Flex" que resulta peor.


2012: Wake up and smell the ashes


Adobe, tal como lo prometió, desactivará mañana 15 de agosto toda instalación de Flash Player en Android, acabando oficialmente su desarrollo.

El Adobe del 2012 está enfocado en crear herramientas que exporten a HTML5 y en convertir a Flash y Flex en una plataforma de desarrollo de juegos y apps empresariales para teléfonos y tablets. El uso e interés de Flash decae, obviamente, debido a su final como herramienta de multiple proposito, pero el nicho por el que están peleando puede convenirle a Adobe a largo plazo.




Este es el adiós a la época donde CSS era opcional, donde los diseños pixel perfect eran fáciles y donde animar para la web era dibujar en vectores, entender la linea de tiempo e insertar un SWF.

Hola al responsive design, a CSS3, a HTML5, a Objective-C, a Dalvik Java, a Coffescript, Less y Stylus, a Node.js, al futuro del web.

jQuery 1.8 publicado: Mejor CSS3, modularidad y velocidad

Ha salido una nueva versión de jQuery, la 1.8. Antes de arrancar, puedes descargarla e implementarla en tus sitios:

Los cambios son muchos, pero la mayoría son de estabilidad y bugs. jQuery ha llegado a un nivel de maduración donde ya no hay tanta magia por release, pero sí una plataforma mucho más robusta. Entre los cambios más importantes, resaltamos:


Prefijos CSS3 automáticos


No hay nada más horrible que agregar todos estos prefijos para poder trabajar con CSS3:

Código :

-webkit-
-moz-
-o-
-ms-

Para el CSS normal tenemos una solución usando prefix-free, pero si agregabas código CSS3 con jQuery usando la función .css(), estos no se incluían automáticamente ni con esa función, por lo que había que agregarlos a mano.

Ahora con jQuery 1.8, los prefijos son automáticamente detectados y agregados.

Mejora de velocidad en el motor de selectores


jQuery es famoso por su capacidad de llegar a cualquier parte del DOM usando selectores CSS. Esa habilidad requiere código pesado que en jQuery 1.8 ha sido ampliamente optimizado, especialmente para IDs.

Las animaciones ahora tienen un evento de progreso


El core de animaciones se ha reescrito bastante para ser más veloz, aun no es 100% CS3 (Eso es una promesa de jQuery 2.0) pero, entre lo nuevo, destaca un nuevo callback para saber el progreso de la animación.

Modularidad


Ahora puedes bajar y usar solo ciertos pedazos de jQuery. Si nunca usas animation, si jamás te metes con AJAX, entre otros modulos, construye tu propio jQuery compacto usando grunt.

Recordatorio del nuevo modelo de eventos de jQuery


Desde jQuery 1.6 hay un nuevo modelo de eventos recomendado, pero aun muchas personas siguen usando el viejo (e incorrecto) modelo de:

Código :

$(document).ready( function ()
{
    //NO no no no.
});

El nuevo y correcto modelo de eventos de jQuery, recomendado para todos los casos, es este:

Código :

$(document).on("ready", evento);
function evento (ev)
{
    // Clever girl. 
}

Nada de usar los eventos como función del objeto, nada de usar live o bind. "on" y "off" suplen todas las necesidades y funcionan para todos los casos.

Google Fiber, Motorola y 1Gbps de internet a US$70

Google anunció hoy Google Fiber, entrando oficialmente al mercado de vender internet para hogar. Y con un arma nuclear:

1Gbps de bajada y subida por US$70. Y por US$50 mas incluye TV digital en HD. Ambos planes además traen:


¿Pero qué carajo pasó?


Google con ésta movida no sólo está apuntando a desbancar a gente como Verizon o Comcast, está generando una disrupción total mundial. Ni siquiera en Asia he tenido conexiones de hogar tan veloces a ese precio, con tales beneficios.

Las cajas de Google TV explican claramente otra razón para, el año pasado, haber comprado a Motorola Mobility. Uno de sus principales negocios después de los teléfonos eran los set top box para operadoras de TV.

¿En qué país? ¿En qué ciudad?


La mala noticia es que por ahora, es sólo Estados Unidos. Y allá, solamente en Kansas. Es un programa beta, pero arranca con una explosión increible de opciones. De tener éxito, Google Fiber puede ser el ejemplo que revolucionará la conectividad en el continente americano.

Gran parte de la falta de conectividad y velocidad en latam no se debe a limites de fibra, sino a burocracia de las operadoras y oligopolios de las telcos. Europa y en especial España, a patadas, han ido saliendo de este escenario, aunque aun no es ideal.

Hoy Google me hizo sentir mal de tener 10Mbps en mi casa. Y eso es algo muy bueno. Esperemos pronto 1Gbps para toda la humanidad.

« Ver más nuevos 1 ... 8 9 10 11 12 13 14 ... 113 Ver más viejos »