Category Archives: Video

#Tools – Controla la velocidad de tus video en #Html5 (Variable Speed Playback)

Hola !

Desde hace muchos años tengo como costumbre invertir 30 minutos o más diariamente para aprender cosas nuevas. No siempre busco un tema en particular, aunque he de reconocer que en usualmente son temas relacionados con la tecnología. Y, la mayoría son basadas en texto o son videos.

Cuando se trata de leer, el texto es fácil y muy flexible. Siempre se puede volver leer una sección atrás o ir hacia adelante, a una sección diferente para tener una vista rápida de los contenidos. Sin embargo, este tipo de interacción no es fácil cuando lo que estamos viendo es un video en línea.

Es por esto, que cuando encontré esta extensión de Chrome, fue el cielo para mí. Esta extensión muestra un indicador de velocidad en la esquina superior izquierda del reproductor de vídeo. Y con este indicador podemos acelerar, desacelerar y rebobinar o avanzar el video. Y, gracias al autor podemos hacer todas estas acciones utilizando nuestro teclado con los siguientes atajos:

  • S – disminuir la velocidad de reproducción.
  • D – aumentar la velocidad de reproducción.
  • R-restablecer la velocidad de reproducción.
  • Z – rebobinado video por 10 segundos.
  • X-avance video por 10 segundos.

Por ejemplo, si estás acostumbrado a ver videos de Channel 9, esto es muy útil. En la siguiente imagen puedes ver mi video “Slap your boss away” en velocidad 2 X. Pero ten cuidado, hablo rápido, con esta extensión en 2 X es probable que termines con algun tipo de trauma.

image.png

Por supuesto, la extensión funciona en Youtube, como podemos ver a 1,5 X.

image.png

Y si usas Office 365 y utilizas el servicio de vídeo, también puede tomar ventaja de esta extensión en sus interiores materiales! Esto es genial.

image.png

Bonus: El autor se ha molestado también en compartir el código fuente de esta extensión en GitHub, así si se te ocurren cambios o mejoras, no dude en agregarlos!

Saludos @ Toronto

El Bruno

References

#Tools – Manage the speed into your #Html5 videos (Variable Speed Playback)

Hi !

I always try to spend 30 minutes or more daily learning new stuff. This usually goes in a different way of topics, however mostly are technology related. And, most of them are text based or video based.

And you know, read text is easy and very flexible, you can always jump back and forward, to different section to have a quick view of the contents. However, this type of interaction is not easy when you are viewing an online video.

That’s why when I found this Chrome extension, it was heaven for me. This extension displays a speed indicator in top left corner of the video player. And with this indicator we can accelerate, slowdown, and quickly rewind or advance the video. And, thanks to the author we can also user our keyboard with the following shortcuts:

  • S – decrease playback speed.
  • D – increase playback speed.
  • R – reset playback speed.
  • Z – rewind video by 10 seconds.
  • X – advance video by 10 seconds.

If you are used to watch Channel 9 videos, this is very useful. In the following picture, you can see my “Slap your boss away” video at 2X speed. But be careful, I speak fast, with this extension at 2X you’ll be probably lost.

image

Of course, the extension works on youtube, as we can see at 1.5X speed.

image

And if you are using Office 365 and you are using the video service, you can also take advantage of this extension in your internal materials! This is really cool.

image

Bonus: The author was kind enough to share the source code of this extension on GitHub, so if any changes or improvements are required, feel free to add them!

Greetings @ Toronto

El Bruno

References

#MSBAND – Update Tiles live data with #VS2015 and #Windows10

Hola!

Today it is time to show how we can update the information displayed in a Tile in real time. To update the information we need to know

  • The Id of the Tile
  • The Id of the Page
  • The Ids of the controls within the Page

The following code example shows a class that these identifiers are stored as properties and constants. And in line 50, the SetTileData() operation updates the information for labels, bar codes and buttons with these Ids.

To see this example in execution, I created a timer to each a second generates random information and update it in the band.

Finally, the following video shows how the App Windows 10, generates random information and sends it to the Band. It shows this information in the corresponding Page

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#MSBAND – Suscribe to User interaction with #MicrosoftBand and #VS2015

Hola!

Today I start from back to forward. First a video where we can see

  • A deployed custom Tile in a Band, with
    • A label
    • A barcode
    • 2 buttons
  • A Windows Universal Application on Windows 10 which
    • Connects to the Band
    • Capture the clicks of a user on the buttons
    • Displays the button pressed in the app

In the previous post I wrote on how to create this Custom Tile. In the post, I also wrote about the importance of the identifiers for the Tile and the Tile controls. In this example, these values are a GUID for a Tile and a series of constants for the Tile UI elements.

The simplest events of interaction of a user with the Band that we can capture are

  • Open or close a Tile
  • Press a button

The class [TileManager] is the one who publish events for these scenarios. In the following code example, we can see the subscription to 2 events. Also, when a Tile is Opened the status bar is updated with a custom message.

The capture of the mouse clicks on buttons is similar. Although it is important to note that we perform a “filter” of the captured actions to see if this action is from our tile (line 94). Then as we can identify the button by its identifier and work on it.

In the following code example, I update a message in the UI of the app with the specific button pressed..

And now you can see the video again and you will surely have lot more sense.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno

References

#VS2015 – Some tips to switch to presentation mode in events

Hola!

I was in Malaga yesterday sharing some of our experiences with Windows 10 and Visual Studio 2015. Like always I make a quick pre check before the Presentation, and someone ask for my A-B-C process, so here it is.

Check Audio and Video

– If you choose to use a 16:9 format with a 1920×1080 resolution it will be so cool … for you. In a big room the people in the back will hate you.

– If you need audio Features, please do a check before. A TV with HDMI is good, but you must check if the audio is configured to use the HDMI channel by default

Define PowerPoint Slideshow mode

– I usually Project with Duplicate mode. So I can use apps and do some Programming looking at my laptop and everyone gets the same as myself. If you use the Presenter View mode in PowerPoint, it usually hacks the Presentation Display settings. That´s why I choose

o Monitor: Primary Monitor

o Disable Presenter View

Visual Studio environment

– Source Code size is very important if you are Planning to show some code. I change this using the Zoom in the IDE. Visual Studio 2015 is great, because it keeps the same zoom value for all the open files.

– You won’t probably need some panels like the Error Log, Output, etc. If you are sharing some source code. So let’s use the Window Layout Features, and choose which panels will be displayed and hidden in Presentation mode.

– I really like the code with WordWrap. If you have a “long source code line”, which requires the use of the horizontal scrollbar, your audience will be waiting until you scroll to get the complete idea of the code. Use WordWrap and they will be able to read everything in a single view … optionally enable the glyphs, I like them also😉

So that’s basically it. For sure I’ll update / upgrade this post in the future.

References

– El Bruno, Change the IDE based on your work environment https://elbruno.com/2014/12/09/vs2015-howto-change-the-ide-based-on-your-work-environment/

Saludos @ Madrid

/El Bruno

#VS2015 – Sugerencias para cambiar a modo Presentación en eventos de forma fácil

Hola!

Windows 10 y Visual Studio 2015 ya están aquí de forma oficial. Ayer estuve en Málaga compartiendo mi año de experiencias con Windows 10 y Visual Studio 2015. Como siempre antes de empezar las sesiones, hice el checkpoint usual y como alguien me preguntó al respecto, aquí dejo mi ABC.

Verificar el entorno de proyección y el Audio

– Por ejemplo, una proyección en 16:9 con 1920×1080 queda muy bien en una TV HD pero es imposible de ver en una sala grande

– Si proyectarás videos con audio, una prueba de sonido es muy importante. Una TV con conexión HDMI te garantiza salida de audio aunque debes estar seguro que tu ordenador toma la misma como la salida de audio por defecto

Modificar el modo presentación de PowerPoint

– Por lo general yo duplico mi monitor. Esto lo hago para poder cambiar fácilmente a un modo “source code” y poder programar mirando mi laptop. Cuando activas el modo Presenter View en PowerPoint, te suele desajustar las resoluciones con las que proyectas. Es por esto, que selecciono las opciones

o Monitor: Primary Monitor

o Disable Presenter View

Revisar el aspecto de Visual Studio

– El tamaño de la fuente del Source Code es importante, muy importante en Visual Studio. Mi recomendación es ver el nivel de zoom que es necesario en un panel de código y dejar el mismo. VS2015 por defecto utilizará ese nivel de zoom en todas las ventanas abiertas.

– Si estas mostrando código, lo más probable es que no necesites mostrar paneles como el Error Log, Output, etc. Con VS2015 podemos crear un Window Layout y mostrar / ocultar estos paneles cuando cambiamos a modo presentación.

– Como se puede ver en la imagen anterior, soy muy amigo del WordWrap. Eso de tener una línea de código muy larga que no se puede leer, salvo que se use el scroll horizontal, es bueno para trabajar en casa aunque no tanto en modo presentación. La solución está en las opciones de Visual Studio, en “Text Editor // All Languages” habilitando el WordWrap y opcionalmente la posibilidad de mostrar los glyphs

Por ahora, dejo estos quick tips y seguramente los actualizaré / completaré en el futuro.

References

– El Bruno, Cambiar el IDE de acuerdo al equipo donde trabajes; https://elbruno.com/2014/12/09/vs2015-howto-cambiar-el-ide-de-acuerdo-al-equipo-donde-trabajes/

Saludos @ Madrid

/El Bruno

#VS2015 – Debug #lambda expressions

Hola!

In yesterday’s post I wrote about the debugging Features for LINQ available in Visual Studio 2013 and 2015. In Visual Studio 2015 there is also a new feature for debug Lambda expressions which is very useful. This feature was requested by the community with almost 10K votes (link) and is finally included in Visual Studio 2015 RTM

Important: If you plan to listen to your users, this is how it must be done. Thanks Product Team !!!

So, if we pick up yesterday sample; after the creation of a name string array, we can pause the debugger and analize the content of the array in a declarative way in the Watch panel. We also have access to Intellisense and other online features

And, the really cool stuff is to write and run our own Lambda expressions in the Watch Window. Let’s find names with Length bigger than 5 chars.

Cool !!! now we can have some more fun in our debugging sessions😉

References

– MSDN LINQ, https://msdn.microsoft.com/es-es/library/bb397926.aspx

– MSDN Lambda Expressions, https://msdn.microsoft.com/en-us/library/bb397687.aspx

– User Voice, Debugging Lambda Expressions, http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/2049821-debug-lambda-expressions-planned

Saludos @ Airplace

/El Bruno

#VS2015 – Depurar sentencias #lambda

Hola!

En el post de ayer comentaba lo útil que es la capacidad de depurar sentencias LINQ con Visual Studio 2015 y 2013. Una de las novedades que incluye Visual Studio 2015 es la capacidad de depurar sentencias Lambda. Esta petición de la comunidad (link) casi alcanza los 10000 votos y se ha incorporado en Visual Studio 2015.

Importante: Esto es un ejemplo clarísimo de escuchar a la comunidad.

Siguiendo con el ejemplo de ayer, luego de declarar un array de elementos, podemos detener el depurador y analizar el contenido del array de una forma muy declarativa en la ventana de Watch. Es intersante ver que también tenemos Intellisense y otras ayudas online

Ahora bien, lo realmente interesante es aplicar una expresión lambda en modo depuración. En este ejemplo, filtremos los nombres que tengan más de 5 caracteres.

Cool !!! nuestras sesiones de depuración ahora pueden ser mucho más divertidas😉

References

– MSDN LINQ, https://msdn.microsoft.com/es-es/library/bb397926.aspx

– MSDN Lambda Expressions, https://msdn.microsoft.com/en-us/library/bb397687.aspx

– User Voice, Debugging Lambda Expressions, http://visualstudio.uservoice.com/forums/121579-visual-studio/suggestions/2049821-debug-lambda-expressions-planned

Saludos @ Airplace

/El Bruno

#VS2015 – Debugging #LINQ sentences

Hola!

If you use ReSharper, you probably note the suggestion you get to convert your ForEach() sentences into LINQ ones. I’m not going to get into details about performance into this options, the focus of this post is on the “clean code”. I mean, how easy is to read this code. Most of the time, LINQ sentences are a very good idea, and they are very straight forward to read and understand, however there are some evil in this world, and some people creates LINQ sentences who are as complicated as a complicated Regular Expression.

So let’s start with a simple simple, (with a very ugly piece of code)

When we translate this ForEach into LINQ, we can get something similar to this one

And, this are very simple lines to understand. But when you get to a point where you don’t understand a developer LINQ sentence, you can debug the LINQ sentence. This feature is available in Visual Studio 2015 (and in VS2013 also), and you can see line by line the execution of the LINQ sentence. In the following sample, we can see the step by step debugging and also the inline values of the debugged sentences in each step.

CAUTION: if you get to a point where you need to debug some code for sure YOU NEED MORE AUTOMATED TESTS in this code.

References

– MSDN for each, https://msdn.microsoft.com/es-es/library/ttw7t8t6.aspx?f=255&MSPPError=-2147217396

– MSDN LINQ, https://msdn.microsoft.com/es-es/library/bb397926.aspx

Saludos @ AVE to Málaga

/El Bruno