Crear animaciones en la web no es sencillo. Desde hace años se ha usado flash para ese objetivo, tecnología que, por su falta de actualizaciones a una web moderna, sus archivos extremadamente pesados y su falta de compatibilidad con el mundo móvil, dejará de existir dentro de muy poco tiempo, tal y como os hemos comentado en varias ocasiones.
Es cierto que HTML5 permite la programación de animaciones sofisticadas, pero no es algo que esté al alcance de todo el mundo, necesita formación y mucha experiencia para poder realizar animaciones de buena calidad.
Hace poco más de un mes, Microsoft prometió la liberación del código fuente de los componentes principales de Chakra, el motor JavaScript empleado tanto en Internet Explorer como en Microsoft Edge, estando también disponible en otras plataformas de Microsoft como Cortana, Outlook.com, Azure DocumentDB, entre otras.
Dicho y hecho, desde hoy, el código fuente de los componentes principales de Chakra ya se encuentran disponibles dentro del repositorio ChakraCore a través de la plataforma GitHub bajo licencia MIT, según ha anunciado la compañía.
Microsoft señala que el repositorio ChakraCore ofrece un motor de JavaScript independiente y de código abierto, que cuenta con total soporte y las mismas características que el motor Chakra disponible Microsoft Edge, encontrándose a disposición para su integración en proyectos de todo tipo, incluyendo servicios basados en la nube y proyectos dentro del segmento del Internet de las Cosas, así como para recibir las suficientes contribuciones por parte de la comunidad JavaScript, cuyas mejoras serán examinadas y encaminadas para que formen parte del motor JavaScript disponible en Microsoft Edge y en la Plataforma Universal de Windows en Windows 10.
Dicho repositorio cuenta desde ya con su propia hoja de ruta la cual la compañía se compromete a mantener siempre actualizada.
Los interesados en aportar sus contribuciones ya pueden hacerlo mediante Visual Studio 2013 o 2015, con C++ instalado, partiendo de Windows 7 SP1 o superior. La compañía espera poder recibir contribuciones a través de otras plataformas comenzando con Linux.
En la actualidad existen multitud de plataformas para aprender a programar en distintos lenguajes, y en WWWhatsnew os hemos ofrecido numerosas muestras de ello en los últimos años. En esta ocasión ampliamos la lista con Lrn, una app para dispositivos iOS con la que aprender los fundamentos de la programación en Javascript desde tu iPhone o iPad.
En primer lugar, es importante tener en cuenta que a pesar de que estamos ante una aplicación gratuita, es necesario pagar para poder acceder a las distintas lecciones. El curso completo consta de siete lecciones y Lrn nos ofrece la posibilidad de adquirir cada lección por 0,99€ o el curso completo por 2,99€, por lo que resulta bastante asequible. Aun así, la aplicación permite completar una serie de tutoriales gratuitos que nos permitirán averiguar si el curso puede resultar de nuestro interés. En general, el planteamiento de la Lrn resulta bastante interesante, y es que al estar basada en pequeños cuestionarios interactivos, el proceso de aprendizaje resulta mucho más ameno. A lo largo del curso podremos adquirir una base interesante en Javascript (variables, funciones, condicionales, bucles, etc.), por lo que estamos ante una aplicación realmente interesante para todos aquellos que quieren aprender a programar. Además, otra característica a destacar es la posibilidad de acceder al curso en cualquier momento y lugar, ya que todo el contenido es accesible sin conexión a Internet.
Podéis descargar Lrn a través de la App Store. En cuanto a los usuarios de Android, los responsables de la app están trabajando en una versión para el sistema operativo para dispositivos móviles de Google.
En pathgather tenemos una librearía en JS que puede ayudar a los desarrolladores a presentar una página de «cargando» de forma rápida y original.
En el enlace tenéis acceso a una demostración de lo que puede hacerse, con un menú de opciones en la parte inferior derecha que permite cambiar el color de fondo y el tipo de icono animado que se usará para indicar que hay algo cargando, tal y como veis en la captura animada que aquí os dejamos.
Es posible también incluir una frase bajo vuestro logo, o un formulario, en lugar de un icono animado. Las opciones son muchas, todas ellas con posibilidad de ser configuradas usando la librearía que aparece al pulsar el «close demo», botón azul en la parte inferior izquierda.
El código está disponible en github, aunque las instrucciones de instalación se entienden mejor en la página antes mencionada.
Quienes disponemos de sitios web en Internet, uno de los aspectos en los que hemos prestado más atención es en el ofrecimiento de una estética visual atractiva y dinámica, algo que lo habremos logrado mediante el uso de JavaScript y CSS. Quizás no seamos lo suficientemente conscientes de las dificultades que tienen los rastreadores de contenidos a la hora de procesar nuestros sitios web debido al uso de JavaScript, de manera que no procesarán igualmente nuestros sitios web dichos rastreadores a cómo lo procesan los navegadores web modernos que usamos los usuarios.
En este sentido, desde el blog para Webmasters de Google nos dan una serie de pautas que deberemos tener en cuenta para que tanto Googlebot como para el resto de rastreadores de contenidos puedan indexar los contenidos de nuestros espacios web, indicándonos además de que en los últimos meses, el sistema de indexado de Google ha estado procesando un número sustancial de página web de la forma más parecida a cómo lo haría el navegador web de cualquier usuario que lo tenga con JavaScript activado.
Entre las pautas tenemos la recomendación de que permitamos a Googlebot obtener datos en JavaScript y CSS, facilitando mejor el indexado de nuestros contenidos. También tenemos la recomendación de revisar el servidor web de nuestro sitio para que pueda gestionar las solicitudes de rastreo de recursos. La degradación elegante es otro elemento que nos ponen en consideración para que los usuarios puedan disfrutar de nuestros contenidos, aunque sus navegadores no dispongan de implementaciones de JavaScript compatibles, o incluso si lo tienen inhabilitado o desactivado. También es ideal para los rastreadores de contenidos que no pueden ejecutar JavaScript.
También nos señalan que la ejecución de JavaScript puede ser un proceso opaco o complejo para los sistemas, en cuyo caso no podrán procesar nuestros sitios web por completo ni de la forma adecuada. Además, algunos recursos JavaScript eliminan contenido en los sitios web en lugar de añadirlo, imposibilitando su indexado.
En definitiva, que aunque nosotros veamos páginas web elegantes y dinámicas, a los ojos de los rastreadores de contenidos, como Googlebot, no lo serán, suponiendo dificultades para indexar todos sus contenidos. En este sentido, desde la propia publicación señalan que están trabajando en una herramienta que ayudará a los responsables de sitios web a comprender mejor como procesa Google sus propios sitios web, teniendo la intención de ponerla a disposición dentro de unos días dentro de las Herramientas para webmasters.
En langpop.corger.nl podemos ver un gráfico bastante interesante obtenido a partir de los datos que genera la API de GitHub y el proyecto de preguntas y respuestas de Stackoverflow.
Cada vez que se detecta una nueva alteración en alguna de las lineas de los proyectos de Github, se almacena y se cuenta para que se sepa qué lenguaje de programación es el más alterado, el más popular dentro del gigante del código. Los resultados del eje Y (vertical) se basan en el número de veces que se aplica una etiqueta para un lenguaje determinado en Stackoverflow, siempre con datos que se actualizan cada cuatro horas con el fin de mantenerlo actualizado.
El porcentaje que se muestra al pulsar en un lenguaje del cuadro derecho es la media de la relación de GitHub y stackoverflow, las dos fuentes de información del proyecto.
Y aquí tenemos la información de Github ordenada según el número de lineas alteradas, con Javascript a la cabeza, gracias a un diagrama realizado con Wikibrains:
¿Esperabais datos diferentes?, ¿os sorprende ver a Java, C#, Javascript y PHP a la cabeza?.
Uno de los aspectos que más podemos apreciar de Google Chrome es su rapidez, y en este sentido, Google ha publicado a través del blog de Chromium una modificación introducida en la última versión beta de Chrome para aumentar su rendimiento. Esta modificación ha consistido en la activación de la compilación concurrente en segundo plano para las grandes piezas de código JavaScript que puedan afectar al rendimiento de la aplicación, liberando al hilo principal de su compilación.
Google indica que para que Chrome sea lo más rápido posible, su motor JavaScript, el V8, ayuda con este objetivo mediante la compilación de JavaScript a código máquina nativo para la ejecución de scripts de forma más rápida, compilando históricamente JavaScript en el hilo principal, donde podría interferir con el rendimiento de la aplicación en JavaScript. Mediante la activación de las compilaciones concurrentes, descarga una gran parte de la fase de compilación optimizada a un hilo en segundo plano. De esta manera, las aplicaciones JavaScript siguen funcionando y su rendimiento es mejorado.
El anuncio sigue profundizando en el funcionamiento de esta modificación en el motor JavaScript V8, donde indica que para reducir el tiempo total de compilación, V8 aplaza la compilación de funciones hasta justo antes de se ejecuten por primera vez. Esta fase de compilación es rápida pero no se centra en la compilación, sólo en que se haga rápidamente. Aquellas piezas de código que se ejecutan muy a menudo son compiladas por una segunda vez por un compilador optimizado especializado, usando técnicas avanzadas de optimización, aunque lleve algo más de tiempo que la primera fase, ofreciendo así el código mucho más rápido.
Además ofrece gráficas donde muestran el rendimiento del motor V8 tanto sin las compilaciones concurrentes como con ellas en la ejecución de Mandreel, perteneciente al conjunto de herramientas de prueba de Octane, de Google. El anuncio finaliza en el que la compilación concurrente de código es un paso más hacia la reducción de latencia en Chrome y forma parte de los esfuerzos constantes para ofrecer aplicaciones web más fluidas y suaves.
Una página web con diseño responsivo (horrible traducción del inglés responsive design) es aquélla que se adapta a cualquier pantalla alterando su estructura en función del tamaño del dispositivo que la esté visualizando. En español se está usando mucho el término «web responsiva», aunque es más correcto hablar de diseño web adaptable o adaptativo.
Para crear una web con estas características tenemos que tener bastantes conocimientos de las últimas tendencias en CSS, javascript y HTML, aunque proyectos como layoutit.com nos pueden ayudar a comenzar a crear este tipo de sitios sin necesidad de tener excesivos conocimientos de programación.
Se trata de una plataforma en la que podemos definir la estructura de nuestra página incluyendo áreas con diferentes columnas y elementos (menús, textos, paginación, etc.) obteniendo como resultado el código en HTML5 y CSS3 para que podamos editarlo posteriormente (añadiendo php en la parte del contenido para hacerlo dinámico, por ejemplo).
Es un constructor de plantillas creado para Bootstrap (colección de herramientas opensource para crear sitios y aplicaciones web), no es un constructor de sitios web y sí una herramienta que nos ayuda a no empezar desde cero, creada para ahorrar tiempo a los programadores, no para terminar con una web 100% lista para ser divulgada.
En hongkiat.com tenemos un ejemplo de como se ha usado esta plataforma para crear su propia página de inicio, ejemplo que demuestra lo realmente sencillo que es su uso.
Ya os hemos comentado en algunas ocasiones varios sitios en los que podéis realizar clases para aprender HTML5, os dejamos ahora con una recopilación de dichos enlaces, esperando que nos ayudéis a ampliar la lista en los comentarios.
– Cursos de HTML5 en Udemy: 3 cursos que imparten en Udemy, sin necesidad de conocimientos previos, incluyendo uno en español para entender las bases.
– Curso en Codeavengers: Ideal para aprender tanto HTML5 como CSS3 y Javascript. Existen varios juegos que nos ayudan a mantenernos motivados, subiendo de nivel y ganando premios.
– Edutin: Lista de vídeos en español para aprender las bases de HTML5.
– mozilla.org: Documentación extensa en el sitio web de Mozilla.
Podéis ver algunas demostraciones de lo que se puede hacer usando HTML5 en chromeexperiments.com o en esta recopilación de experimentos que publicaron en spyrestudios.com
Microsoft ha desarrollado, junto con appendTo y Sauce Labs, BrowserSwarm, la nueva herramienta de código abierto con la que ayudará a los desarrolladores a realizar pruebas sobre frameworks y otras librerías en JavaScript de manera sencilla, debiendo para ello disponer de sus propios proyectos alojados en el repositorio GitHub, a los cuales deberán apuntar. De esta manera, los resultados les ofrecerán el grado de compatibilidad de sus proyectos con diferentes dispositivos y navegadores web, con la idea de que, mediante las mejoras necesarias, los mismos puedan ser lo más interoperables posible.
Para ello, BrowserSwarm hace uso de la unidad de pruebas de frameworks QUnit a través de la nube usando la automatización de navegadores de SauceLabs, de manera que cuando se produzca algunos cambios en los códigos del proyecto, BrowserSwarm vuelva a realizar nuevas pruebas, ofreciendo nuevos resultados.
Además de ello, BrowserSwarm también permite visualizar las pruebas realizadas a muchas otras librerías conocidas, como jQuery, Dojo, Prototype o BackBone.js, entre otros, de manera que los desarrolladores podrán conocer que dichas librerías podrán corren sin problemas en una gran variedad de navegadores web.
AL ser un proyecto de código abierto, Microsoft pide a la comunidad ayuda para realizar mejoras en los resultados mediante la subida de sus propios proyectos. Además, también solicitan la colaboración para conectar con otros repositorios de códigos además de GitHub.
El uso de BrowserSwarm es completamente gratuito, y el registro de usuario, mediante procedimiento tradicional, apenas tarda unos segundos.
