Etiqueta: javascript

La presentación de La Guerra de las Galaxias con HTML, JS y CSS

Publicado el

por Juan Diego Polo

Star Wars

En timpietrusky.com podéis ver los detalles del trabajo de Tim Pietrusky, programador que ha dedicado buena parte de su tiempo en una aplicación que simula la presentación de la pelí­cula de 1977 de La Guerra de las Galaxias.

El resultado, que puede disfrutarse en codepen.io, puede ejecutarse pulsando en el texto inferior de dicha página, así­ como personalizarse alterando tanto el HTML de la columna izquierda, el CSS del medio o el javascript de la derecha.

Esta joya, descubierta en boingboing.net hace pocas horas, incluye la música de la pelí­cula, así­ como el texto original que apareció en el largometraje en su momento.

Un lugar ideal para fans de la pelí­cula, así­ como para profesores y alumnos de diseño web que estén aprendiendo HTML, JS y CSS y quieren verificar cómo cambiando algunas lineas pueden obtenerse resultados fantásticos.

Codepen.io, recurso que os presentamos en el libro Tendencias de Diseño web en 2013, es un editor de código online que nos ayuda a practicar mientras vemos el resultado de forma inmediata, siendo posible navegar por los ejemplos que otros usuarios han publicado en la plataforma.

Allí­ es posible ver otros trabajos del mismo desarrollador, como un homenaje a la serie Breaking Bad que no tiene ningún desperdicio.

Google anuncia el lanzamiento de Chrome Platform Analytics

Publicado el

por Fco. José Hidalgo

A través del perfil de Google Chrome Developers en Google+, Google anuncia el lanzamiento de Chrome Analytics Platform, el cual lo presenta como una biblioteca JavaScript que permite recoger las interacciones realizadas por los usuarios a través de las aplicaciones empaquetadas y extensiones. La misma usa un modelo de «aplicación céntrica» adecuado para las aplicaciones empaquetadas.

Si nos vamos al enlace que nos ofrece en la escueta publicación, nos llevará al wiki de la plataforma, dentro de GitHub, donde nos ofrece más información sobre la misma, desde su visión global hasta ejemplos, incluyendo caracterí­sticas, pre-requisitos, y pequeños tutoriales.

La propia visión global añade algo más de información:

La plataforma de Google Analytics le permite medir las interacciones del usuario con su empresa a través de diferentes dispositivos y entornos. La plataforma proporciona recursos para recopilar, almacenar, procesar e informar sobre las interacciones del usuario. Chrome Platform Analytics (CPA) es una biblioteca cliente que le permite recoger las interacciones del usuario especí­ficamente en Chrome Platform App (también conocidos como aplicaciones empaquetadas) y extensiones, y los enví­a a la plataforma de Google Analytics.

Un detalle importante, incluido en el wiki, hace referencia al soporte de privacidad, llamado opt-out:

Para utilizar Google Analytics (y por lo tanto la biblioteca CPA), debe dar a los usuarios aviso acerca del seguimiento de análisis y darles la opción de salir del seguimiento. Un usuario puede optar por el no seguimiento utilizando el método setTrackingPermitted (booleano) en el objeto analytics.Config. Pasando a falso este método, desactiva el enví­o de información a Google Analytics. Este ajuste se conserva entre sesiones de aplicaciones.

Enlace: Wiki de Chrome Platform Analytics | Ví­a: Google Chrome Developers

Google está probando mostrar información de los canales en YouTube mediante tarjetas

Publicado el

por Fco. José Hidalgo

Cards

Google tiene muy claro que no se puede quedar quieto para evitar que sus servicios queden desfasados en el tiempo, por lo que de vez en cuando realiza pruebas con algunas de sus posibles nuevas funciones con la idea de que si éstas son viables y mejoran la experiencia de usuario, aplicarlas en un futuro. En este sentido, Google Plus Daily publica, ví­a G.O.S., que Google podrí­a estar realizando pruebas con las tarjetas de información en YouTube, algo ya muy común en algunos de sus servicios, de manera que aquellos usuarios que se pongan encima del enlace de cualquier canal, se les aparezca su correspondiente tarjeta de información, mostrando la carátula, el tí­tulo, el botón de suscripción, e incluso el enlace del perfil de creador en Google+.

Por si hay alguien interesado en comprobarlo, hay un truco que consiste en poner el siguiente código dentro de la consola de desarrollador del navegador:

document.cookie = «VISITOR_INFO1_LIVE = 0xJL6SMMUyE; path = /;. domain = youtube.com»; window.location.reload ()

De esta manera, tan sólo se tiene que poner encima del enlace de cualquier canal dentro de la relación de ví­deos existentes, y verá como le aparece la tarjeta correspondiente, algo que no ocurre si no se introduce el código indicado.

Ya sólo queda que esta función pueda estar disponible oficialmente para todos los usuarios sin necesidad de incluir códigos, lo que ayudará a los creadores de contenidos a potenciar sus propios canales y recibir más suscriptores, e incluso a tener más seguidores en Google+.

Ví­a: Google Plus Daily

Apple anuncia su nueva versión de Safari, con importantes novedades y mejoras

Publicado el

por Fco. José Hidalgo

SafariUna de las novedades que se acaba de presentar en la conferencia de desarrolladores WWDC de Apple, que se está celebrando en estos momentos, es la nueva versión de Safari, la cual será lanzada con la también nueva versión de OS X, de nombre Mavericks.

Según Apple, la nueva versión de Safari tendrá un rendimiento de JavaScript mejorado de manera significativa, superando incluso al rendimiento que ofrecen los navegadores web Chrome y Firefox, algo que habrá que comprobar en la práctica y en los análisis que se hagan de manera independiente. Aún así­, este pique puede hacer que el resto de navegadores puedan ponerse las pilas de llegar a ser cierto, para mejorar este aspecto.

Además, incluye una nueva función llamada Power Nap, lo que permitirá reducir el consumo de energí­a que necesita la ejecución del propio navegador. En lo que respecta a las funciones que ofrece a los usuarios, ahora incluye una nueva página de marcadores, que además viene acompañada de una nueva barra lateral, la cual da acceso a los marcadores y a las listas de lecturas, donde entre otras caracterí­sticas, está las listas compartidas.

iCloud Keychain también es llevado a Safari, su llavero en la nube por la que gestionará las contraseñas, así­ como tarjetas de crédito y otro tipo de datos. Viene a funcionar en linea similar a aplicaciones como Lastpass.

La posibilidad de añadir marcadores a un click de distancia, y el nuevo aspecto de Reader, conforman las novedades más importantes de la nueva versión de Safari.

Enlace: Sitio oficial de Safari

SquareSend convierte los hiperenlaces de correo en sitios web en formularios de contacto

Publicado el

por Fco. José Hidalgo

Squaresend

A estas alturas, lo más normal es que nos encontremos con un formulario de contacto en sitios web para que nos permitan contactar con sus responsables, aunque puede haber sitios web que aún dispongan de enlaces de correo electrónico, en los que al clicar sobre ellos, se nos abra nuestro gestor de correos electrónicos que tengamos configurado por defecto en nuestro sistema. Para estos casos, SquareSend les ofrece una solución sencilla, en la que con tan sólo introducir un fragmento de código JavaScript, convierta esos enlaces en formularios de contacto directamente.

Los responsables de sitios web que incluyan la solución de Squaresend, podrán personalizar los formularios a través de la inclusión de una serie de parámetros, que podrán encontrar en la opción avanzada de configuración, dentro de la opción de personalización.

Eso sí­, hay que tener en cuenta que SquareSend es un servicio freemium, por lo que las cuentas gratuitas tienen una serie de limitaciones. Precisamente, permite hasta 50 mensajes al mes, el uso de hasta tres cuentas de correo electrónico, así­ como el uso de conexiones SSL.

Hay que señalar que los mensajes se enviarán a las direcciones de correo indicadas, así­ como en la propia cuenta de usuario del servicio. Además, cuenta con la documentación y ayuda necesaria para que los responsables de sitios web no tengan dificultad alguna en incorporar el servicio en sus sitios web.

De esta manera, cuando sus visitantes cliquen en el enlace de la dirección de correo electrónico, aparecerá una ventana emergente con los campos de formulario a rellenar para enviar el mensaje deseado.

Enlace: SquareSend | Ví­a: Labnol

Google lanza el botón «Save to Drive» para su integración en sitios web

Publicado el

por Fco. José Hidalgo

Save To Drive

Cuando vamos a iniciar la descarga de un archivo desde la web, los usuarios estamos acostumbrados a indicar el lugar de nuestro sistema local donde queremos guardarlo, aunque si queremos guardarlo directamente en Google Drive, ahora hay una posibilidad, siempre y cuando los sitios web incluyan el código que Google acaba de publicar para que puedan ser integrados.

Precisamente, el código es:

<script src=”https://apis.google.com/js/plusone.js”></script>
<div
data-filename=”My Statement.pdf”
data-sitename=”My Company Name”
data-src=”/path/to/myfile.pdf”>
</div>

En Google Developers Blog además publican la imagen de la integración llevada a cabo por el sitio web de O’Reilly a la hora de guardar un libro electrónico, y además ofrece una muestra para que podamos guardar la imagen de un gatito en nuestra unidad de Google Drive. También nos informa de que contamos con la posibilidad de usar la API en JavaScript del propio botón, el cual nos ofrece más flexibilidad.

Los interesados cuenta con la documentación técnica necesaria, y en caso de duda, pueden consultar en su apartado de Stack Overflow.

Más información: Google Developers Blog

Searchpath – mejorando las búsquedas en blogs y sitios web

Publicado el

por Fco. José Hidalgo

Searchpath

Un elemento que siempre debe estar presente en cualquier sitio web dinámico es el formulario de búsquedas que nos permitan introducir los términos acerca de los contenidos que nos gustarí­a acceder. Normalmente, suele ser un elemento al cual se le presta poca importancia, no mejorándose su experiencia de usuario salvo que se usen herramientas de terceros.

Y una herramienta de terceros es precisamente Searchpath, una forma dinámica de realizar búsquedas, ofreciéndonos los resultados de una manera más visual y rápida a través de una superposición de resultados en un área que aparecerá en primer plano, sin necesidad de generar una página entera de resultados, o lo que es lo mismo, sin abandonar la página que estamos visitando actualmente.

Para ello tan sólo hay que añadir una lí­nea JavaScript y comenzar a probarlo desde nuestra caja de búsquedas. Por el momento, apenas hay elementos personalizables, obteniendo el estilo de la hoja de estilos de nuestra propia página. Tan sólo se pueden modificar las clases searchpath_link y searchpath_summary.

La versión demo ofrece dos resultados y un enlace hacia Searchpath, y la versión de pago, de 8 dólares al mes, ofrece todos los resultados encontrados. Searchpath todaví­a está en su etapa inicial, pero ya hay planes para añadir más opciones de personalización.

Enlace: Searchpath | Ví­a: TNW

Automattic ha adquirido Simperium, reforzando así­ sus servicios para desarrolladores

Publicado el

por Fco. José Hidalgo

Simplenote

Simplenote es una sencilla aplicación web y para terminales iOS que permite la realización de todo tipo de anotaciones según las necesidades, que en caso de la aplicación para iOS, se irá sincronizando con el servidor cualquier cambio que se vaya realizando. Y así­ lo seguirá siendo a partir de ahora, ya que la compañí­a que está detrás, Simperium, acaba de ser adquirida por completo, tanto a los trabajadores como la aplicación en sí­, por Automattic, la empresa que está detrás de WordPress.com. Simplenote ya ha actualizado su pertenencia a Automattic en su página principal.

Según cree Matt Mullenweg, la adquisición de Simperium les puede ayudar a renovar por completo sus aplicaciones móviles, ya que en la actualidad, las aplicaciones descargan los contenidos completos de los blogs a gestionar, mientras que Simperium solo enví­a el diff, siendo éste la diferencia entre dos archivos, lo que ayudarí­a a ser más eficientes en el ahorro de ancho de banda, creciendo las oportunidades de trabajar con y sin conexión a Internet.

Pero además, Automattic también plantea para Simplenote respaldarlo con sus sistemas e infraestructura. La lí­nea que va a seguir a partir de ahora Simperium es convertirse en otro servicio para desarrolladores, como Akismet o Gravatar. Por ahora, Simperium ha liberado sus librerí­as para iOS y clientes Javascript.

Ví­a: blog.simperium.com y AllThingsD

crunchzilla, enseñando a programar animaciones Javascript a los niños

Publicado el

por Juan Diego Polo

javascript

Mientras que codecademy.com se concentra en enseñar Javascript a adolescentes y adultos, www.crunchzilla.com se concentra en un público más joven.

Se trata de una web en la que, divididos en dos niveles, encontramos lecciones de Javascript para programar animaciones, existiendo dos paneles, el de programación y el de resultados, en la misma página. A medida que pulsamos en el texto verde, aparecen las nuevas lecciones, algunas de las cuales son interactivas, permitiendo probar si hemos aprendido lo que comunican.

Nada más acceder tenemos la posibilidad de entrar en el nivel Code Maven o en el Code Monster, siendo éste último más adecuado para los más pequeños.

Una forma entretenida de aprender las bases de la programación paso a paso, sin abusar de la densidad de información que suelen tener sitios web semejantes.

Link: www.crunchzilla.com | Ví­a freetech4teachers.com

Firefox 18 trae mejoras de rendimiento con elementos JavaScript, visor PDF, y soporte para pantallas Retina Display

Publicado el

por Fco. José Hidalgo

Firefox 18

Aunque no seamos conscientes, los usuarios nos sentimos más a gusto con un navegador web que con otro, entre otros aspectos, por el rendimiento del mismo a la hora de navegar por sitios web, sobre todo, por aquellos que contienen determinados elementos que podí­an ralentizar la navegación, haciendo de ello una experiencia de usuario negativa. Por suerte, los principales desarrolladores de navegadores web se están poniendo las pilas para ponerlos al dí­a, incorporando elementos de última generación tecnológica con un mejor desempeño del rendimiento.

Entre los principales desarrolladores tenemos a Firefox, el cual acaba de lanzar oficialmente su versión número 18, a pesar de que desde ayer ya estaba los instaladores disponibles desde el servicio FTP de la propia organización. Entre los cambios más importantes cabe destacar la inclusión de su nuevo compilador JavaScript IonMonkey, que viene a sustituir a la arquitectura Jí¤gerMonkey, el cual espera ofrecer un mejor rendimiento en aquellas páginas con elementos JavaScript pesados.

Otro de los cambios que llega, con cierto retraso, es la inclusión de su propio visor de archivos PDF nativo, con el que los usuarios podemos ver dichos archivos dentro del propio navegador sin necesidad de salir del mismo para acudir a aplicaciones externas. Además, los usuarios de la plataforma Mac estarán encantados de que al fin soporte las pantallas Retina Display. En este sentido, también se ha tenido que eliminar los temas animados tanto para ofrecer el soporte para Retina Display como para mostrar un mejor rendimiento.

Mejor calidad de imagen con su nuevo algoritmo de escalado en HTML, mejoras en el tiempo de arranque, soporte para el W3C touch events, la posibilidad de desactivar contenidos no seguros bajo conexiones HTTPS, y otras mejoras, son las novedades que tenemos los usuarios si optamos por usar Firefox 18 en Windows, Linux y Mac.

Enlace: Firefox 18 | Ví­a: TNW