translated watchfaces tutorial

codeanticode · codeanticode · commit 9feec61ddcb9 · 2019-02-11T05:16:53.000-08:00
diff --git a/es/tutorials/index.html b/es/tutorials/index.html
@@ -76,7 +76,7 @@ <h3><a href="wallpapers/index.html">Fondos de Pantalla</a></h3>
                 <p>Utiliza el modo Android para crear fondos de pantalla interactivos y animados.</p>
                 <br>
 
-                <h3><a href="watchfaces/index.html">Caras de Reloj Faces</a></h3>
+                <h3><a href="watchfaces/index.html">Caras de Reloj</a></h3>
                 <p>por Andrés Colubri</p>
                 <p>Usa el modo Android para desarrollar caras de reloj interactivas.</p>
                 <br>
diff --git a/es/tutorials/wallpapers/index.html b/es/tutorials/wallpapers/index.html
@@ -58,7 +58,7 @@ <h2>Fondos de Pantalla</h2>
 
                 <h3>¿Qué es un fondo de pantalla animado?</h3>
                 <p>
-                Los fondos de pantalla animado son un tipo especial de apps de Android que generan fondos animados e interactivos en la pantallas de inicio y bloqueo del dispositivo. Técnicamente, son un <a href="https://developer.android.com/reference/android/service/wallpaper/WallpaperService.html">Servicio de Android</a>, diseñado para ejecutarse sin interrupción en segundo plano. Gracias al modo Android en Processing, no ncesitamos preocuparnos por los detalles técnicos de como se crean y configuran estos servicios y, en cambio, podmeos concentrarnos en el código de dibujo. Virtualmente cualquier bosquejo 2D o 3D se puede ejecutar como un fondo de pantalla animado. Todo lo que necesitas hacer es seleccionar la opción de "wallscreen" en el menú de Android:
+                Los fondos de pantalla animado son un tipo especial de apps de Android que generan fondos animados e interactivos en la pantallas de inicio y bloqueo del dispositivo. Técnicamente, son un <a href="https://developer.android.com/reference/android/service/wallpaper/WallpaperService.html" target="_black">Servicio de Android</a>, diseñado para ejecutarse sin interrupción en segundo plano. Gracias al modo Android en Processing, no ncesitamos preocuparnos por los detalles técnicos de como se crean y configuran estos servicios y, en cambio, podmeos concentrarnos en el código de dibujo. Virtualmente cualquier bosquejo 2D o 3D se puede ejecutar como un fondo de pantalla animado. Todo lo que necesitas hacer es seleccionar la opción de "wallscreen" en el menú de Android:
                 </p>
 
                 <p><img class="body-image" src="imgs/wallpaper_selection.png" alt="Seleccionando wallpapers"></p>
@@ -213,14 +213,14 @@ <h3>Uso de los datos de los sensores en el fondo de pantalla</h3>
 
                 <li>El mismo detector de eventos se usa para obtener la aceleración y el campo geomagnético, y usamos el valor devuelto por <code>event.sensor.getType()</code> para determinar de qué sensor estamos recibiendo los valores en <code >onSensorChanged()</code>. </li>
 
-                <li> La velocidad para leer los datos del sensor se establece en <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#SENSOR_DELAY_NORMAL"> SENSOR_DELAY_NORMAL </a>, que es la más lenta de todas las velocidades pre-definidas. Es muy importante mantener al mínimo el uso de la batería en fondos de pantalla, ya que se ejecutan en segundo plano constantemente. Por lo tanto, cuando se utilizan sensores en un fondo de pantalla es una buena idea mantener una tasa de actualización lo más baja posible para el propósito de generar el fondo. De hecho, podemos establecer una velocidad específica haciendo:
+                <li> La velocidad para leer los datos del sensor se establece con el argumento <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#SENSOR_DELAY_NORMAL" target="_ black">SENSOR_DELAY_NORMAL</a>, que es la más lenta de todas las velocidades pre-definidas. Es muy importante mantener al mínimo el uso de la batería en fondos de pantalla, ya que se ejecutan en segundo plano constantemente. Por lo tanto, cuando se utilizan sensores en un fondo de pantalla es una buena idea mantener una tasa de actualización lo más baja posible para el propósito de generar el fondo. De hecho, podemos establecer una velocidad específica haciendo:
 <pre><code>
 int READING_RATE = 100000; // time in us
 sensorManager.registerListener(listener, compass, READING_RATE);
 </code></pre>
                 </li>
 
-                <p> Los vectores de gravedad y geomagnéticos codifican toda la información requerida para determinar la orientación del dispositivo en relación con la superficie de la Tierra. El <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#getRotationMatrix (float [], float [], float [], float [])" target="_ black"> <code>getRotationMatrix()</code> </a> calcula las matrices de inclinación y rotación, a partir de las cuales podemos obtener la orientación del dispositivo en relación con la dirección del campo geomagnético con <a href = "https://developer.android.com/reference/android/hardware/SensorManager.html#getOrientation(float[], float[])" target ="_black ">getOrientation()</a>. La implementación completa de <code>onSensorChanged()</code> diría:</p>
+                <p> Los vectores de gravedad y geomagnéticos codifican toda la información requerida para determinar la orientación del dispositivo en relación con la superficie de la Tierra. El <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#getRotationMatrix (float [], float [], float [], float [])" target="_ black"><code>getRotationMatrix()</code></a> calcula las matrices de inclinación y rotación, a partir de las cuales podemos obtener la orientación del dispositivo en relación con la dirección del campo geomagnético con <a href = "https://developer.android.com/reference/android/hardware/SensorManager.html#getOrientation(float[], float[])" target ="_black ">getOrientation()</a>. La implementación completa de <code>onSensorChanged()</code> diría:</p>
 
 <pre><code>
 &nbsp;&nbsp;<span style="color: #33997E;">public</span> <span style="color: #33997E;">void</span> onSensorChanged(SensorEvent event) {
diff --git a/tutorials/wallpapers/index.html b/tutorials/wallpapers/index.html
@@ -58,7 +58,7 @@ <h2>Wallpapers</h2>
 
                 <h3>What is a live wallpaper?</h3>
                 <p>
-                Live wallpapers are a special type of applications that generate animated and interactive backgrounds in the home screen of the device. Technically, they are an <a href="https://developer.android.com/reference/android/service/wallpaper/WallpaperService.html">Android Service</a>, designed to run for a long time in the background. With the Android mode in Processing, you don't need to worry about these low-level details, and instead focus on the drawing code. Virtually any 2D or 3D sketch can be built as a live wallpaper. All you need to do is to select the Wallpaper option under the Android menu:
+                Live wallpapers are a special type of applications that generate animated and interactive backgrounds in the home screen of the device. Technically, they are an <a href="https://developer.android.com/reference/android/service/wallpaper/WallpaperService.html" target="_black">Android Service</a>, designed to run for a long time in the background. With the Android mode in Processing, you don't need to worry about these low-level details, and instead focus on the drawing code. Virtually any 2D or 3D sketch can be built as a live wallpaper. All you need to do is to select the Wallpaper option under the Android menu:
                 </p>
 
                 <p><img class="body-image" src="imgs/wallpaper_selection.png" alt="Wallpaper selection"></p>
@@ -213,7 +213,7 @@ <h3>Using sensor data in the wallpaper</h3>
 
                 <li>The same event listener is used to get acceleration and the geomagnetic field, and we use the value returned by <code>event.sensor.getType()</code> to determine which sensor we are receiving values from in <code>onSensorChanged()</code>.</li>
 
-                <li>The rate to read the sensor data is set to <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#SENSOR_DELAY_NORMAL">SENSOR_DELAY_NORMAL</a>, which is the slowest from all the default rates. It is important to keep battery use in wallpapers at a minimum, as they run in the background constantly. So, when using sensors is a good idea to keep a low update rate that it is still ok for the purpose of generating the background. In fact, you can set a custom rate by doing:
+                <li>The rate to read the sensor data is set to <a href="https://developer.android.com/reference/android/hardware/SensorManager.html#SENSOR_DELAY_NORMAL" target="_ black">SENSOR_DELAY_NORMAL</a>, which is the slowest from all the default rates. It is important to keep battery use in wallpapers at a minimum, as they run in the background constantly. So, when using sensors is a good idea to keep a low update rate that it is still ok for the purpose of generating the background. In fact, you can set a custom rate by doing:
 <pre><code>
 int READING_RATE = 100000; // time in us
 sensorManager.registerListener(listener, compass, READING_RATE);
diff --git a/tutorials/watchfaces/index.html b/tutorials/watchfaces/index.html
@@ -44,28 +44,30 @@ <h1 class="title">Processing for Android</h1>
             </nav>
       
             <section class="container main-text">
+                
+                <div class="lang">
+                  <a id="selected" href="index.html">EN</a>
+                  <a href="../../es/tutorials/watchfaces/index.html">ES</a>
+                </div>
+                <hr style="clear:both;">
+
             	<h2>Watch Faces</h2>
                 <p>
                 Use the Android Mode to develop interactive watch faces.
                 </p>
        
                 <h3>Smartwatches</h3>
                 <p>
-                <a href="https://www.android.com/wear/">Android Wear</a> allows you to create custom smartwatch faces that can represent time in original ways by taking advantage of the display and interaction capabilities of these devices. You can also obtain body sensors data (steps, hearth rate) to visualize the physical activity of the user. Developing watch faces require some special consideration though, due to the limitations of these devices in terms of screen size and battery life. Google has published some guidelines for <a href="https://developer.android.com/training/wearables/watch-faces/index.html">watch face design</a>.
+                <a href="https://www.android.com/wear/" target="_black">Android Wear</a> allows you to create custom smartwatch faces that can represent time in original ways by taking advantage of the display and interaction capabilities of these devices. You can also obtain body sensors data (steps, hearth rate) to visualize the physical activity of the user. Developing watch faces require some special consideration though, due to the limitations of these devices in terms of screen size and battery life. Google has published some guidelines for <a href="https://developer.android.com/training/wearables/watch-faces/index.html" target="_black">watch face design</a>.
                 </p>
 
                 <h3>Getting ready</h3>
                 <p>
-                First of all, developing for a smartwatch requires to pair the watch with a phone that will function as a bridge between the computer you are runnig Processing on, and the watch itself. To do so, you have to setup the devices for debugging over Bluetooth, which is explained <a href="https://developer.android.com/training/wearables/apps/bt-debugging.html">here</a>. Once you have done it, you can select the Watch Face option in the Android menu:
+                First of all, developing for a smartwatch requires to pair the watch with a phone that will function as a bridge between the computer you are runnig Processing on, and the watch itself. To do so, you have to setup the devices for debugging over Bluetooth, which is explained <a href="https://developer.android.com/training/wearables/apps/bt-debugging.html" target="_black">here</a>. Once you have done it, you can select the Watch Face option in the Android menu:
                 </p>
 
                 <p><img class="body-image" src="imgs/watchface_selection.png" alt="Watch face selection"></p>
 
-                <p>
-                After setting up BT debugging and selecting the Watch Face option in Processing, you will not see the watch in the list of connected devices. This is ok, because the watch faces are not installed directly on the watch, but first on the phone paired to it and then get copied automatically over BT into the watch.
-                </p>
-
-
                 <h3>A very simple watch face</h3>
                 <p>
                 As a very simple first attempt at creating a watch face, let's just display the time using text. The structure of the sketch is very straightfoward: 
@@ -91,7 +93,7 @@ <h3>A very simple watch face</h3>
 </code></pre>
 
                 <p>
-                A couple of things to observe in this code is the use of a frame rate of 1 because the text only changes once every second, so it there is no need to update the screen any faster (which consumes more battery). Also, the watch face is drawn only if the built-in function <code>wearAmbient()</code> returns false. The reason for this is that, in the contrary, it returns true, then it means that the person wearing the watch is not looking at it, so it switches to ambient (or always-on) mode in order to save battery. In ambient mode, the display is updated only once every minute, and <a href="https://www.google.com/design/spec-wear/patterns/interactive-watch-faces.html#interactive-watch-faces-square-round-devices">it is recommended</a> to keep most of the screen black and render only a simplified version of the watch face.</p> 
+                A couple of things to observe in this code is the use of a frame rate of 1 because the text only changes once every second, so it there is no need to update the screen any faster (which consumes more battery). Also, the watch face is drawn only if the built-in function <code>wearAmbient()</code> returns false. The reason for this is that, in the contrary, it returns true, then it means that the person wearing the watch is not looking at it, so it switches to ambient (or always-on) mode in order to save battery. In ambient mode, the display is updated only once every minute, and <a href="https://www.google.com/design/spec-wear/patterns/interactive-watch-faces.html#interactive-watch-faces-square-round-devices" target="_black">it is recommended</a> to keep most of the screen black and render only a simplified version of the watch face.</p> 
 
                 <p>Also, we use the <code>wearInsets()</code> function to get the insets of the screen. In particular, the bottom inset helps to properly center the sketch's output in watches that have a "chin" in the bottom of the screen, like the Moto 360, so the entire frame is shifted downwards by half of that value in order to be properly centered. Another important built-in variable that we are not using in this case is <code>isRound</code>, which tells you whether the shape of the watch is round or square. For a complete list of all the built-in variables available for watch faces, please take a look at the <a href="../../reference/index.html" target="_black">reference page</a>.
                 </p>
@@ -169,9 +171,9 @@ <h3>Representing time</h3>
 &nbsp;&nbsp;Context&nbsp;context&nbsp;=&nbsp;getContext();
 &nbsp;&nbsp;vibrator&nbsp;=&nbsp;(Vibrator)&nbsp;context.getSystemService(Context.VIBRATOR_SERVICE);
 }
-</code></pre>                
+</code></pre>       
 
-                <p>The vibrator() method allows us to set a vibration for a period of time expressed in milliseconds, so for half second vibration:</p>
+                <p>The <code>vibrador()</code> method allows us to set a vibration for a period of time expressed in milliseconds, so for half second vibration:</p>
 
 <pre><code>                
 &nbsp;&nbsp;<span style="color: #669900;">for</span> (<span style="color: #E2661A;">int</span> i = dots.<span style="color: #006699;">size</span>()-1; i &gt;= 0; i--) {
@@ -247,7 +249,7 @@ <h3>Counting steps</h3>
 }
 </code></pre>    
 
-                <p>And finally, we can add some font initialization in setup(), and use the step count values in the draw function, for example here simply to print them as text:</p>
+                <p>And finally, we can add some font initialization in <code>setup()</code>, and use the step count values in the draw function, for example here simply to print them as text:</p>
   
 <pre><code>
 <span style="color: #33997E;">void</span> <span style="color: #006699;"><b>setup</b></span>() {
