Pop

Curso Tensorflow con Anaconda - 4.Conceptos básicos.Reducción de la pérdida

4.Conceptos básicos.Reducción de la pérdida

  • En el vídeo anterior vimos que entrenando a los modelos se producen perdida, por lo tanto necesitamos una buena forma de reducirla.  El enfoque iterativo es un método muy utilizado para reducir la pérdida.En la siguiente esquema podemos verlo:


  • El modelo tomará uno o más atributos como entrada y devuelve una predicción  como resultado. Suponemos un modelo que toma un atributo y devuelve una predicción y'=b+w1x1.
  • La parte de "Cálculo de pérdida" del diagrama es la función de pérdida que usará el modelo. Supongamos que usamos la función de pérdida al cuadrado en la parte de "Actualizar parámetros" del diagrama.Aquí, el sistema de aprendizaje automático examina el valor de la función de pérdida y genera valores nuevos.El aprendizaje continúa iterando hasta que el algoritmo descubre los parámetros del modelo con la pérdida más baja posible.
  •  En general, iteras hasta que la pérdida general deja de cambiar o, al menos, cambia muy lentamente. Cuando eso ocurre, decimos que el modelo ha convergido.

  • Vamos a sustituir el cuadro verde que cuadro verde que "actualiza los parámetros" por algo más concreto. Para el tipo de problemas de regresión que hemos estado examinando, la representación resultante de pérdida siempre será convexa. La representación siempre tendrá forma de tazón, como la que veis en la siguiente imagen donde tendremos que buscar el punto de convergencia.


  • Un mecanismo  útil, muy popular en el aprendizaje automático, es el  descenso de gradientes. La primera etapa en el descenso de gradientes es elegir un valor de inicio (un punto de partida) para w1. Elegimos un punto de partida levemente mayor que 0. Luego, el algoritmo de descenso de gradientes calcula la gradiente de la curva de pérdida en el punto de partida tomando un paso en dirección de la gradiente negativa para reducir la pérdida lo más rápido posible. Vamos repitiendo el proceso hasta alcanzar el mínimo.

  • Os dejo esta explicación en vídeo.En el siguiente capítulo empezamos con el código:


Curso Tensorflow con Anaconda - 3.Regresión lineal y un ejemplo

3.Regresión lineal y un ejemplo

  •  En esta entrada del blog veremos la regresión lineal.En la siguiente gráfica podéis ver una relación lineal que representa la relación entre la temperatura y la frecuencia con que cantan unos grillos. La línea que vemos trazada en la gráfica cumple la fórmula Y=Mx +B donde:
          - Y es la temperatura en grados centígrados, correspondiente al valor que intentamos predecir.
          - M es la pendiente de la línea.
          - x es la cantidad de cantos por minuto, correspondiente al valor de nuestro atributo de entrada.
          - B es la intersección en y.
  • En función de por donde pasa la linea de regresión tendremos una perdida mayor ó menor:


  • Para una definición más formal de lo que es la regresión lineal os dejo el siguiente enlace: https://es.wikipedia.org/wiki/Regresi%C3%B3n_lineal . 
  • En el vídeo os cuento con más detalle lo visto en estas dos imágenes y os muestro un poco de código escrito en python.
.
  • Os dejo el código visto en el vídeo:
import tensorflow as tf
enterosVector = tf.constant([1,2,3])
with tf.Session() as s:
print(s.run(enterosVector))
import tensorflow as tf
matriz = tf.constant([[7,5,4],[1,2,3]])
with tf.Session() as s:
print(s.run(matriz))
import tensorflow as tf
matrizCadenas = tf.constant([ ["Hola ","me ","llamo "],["pepe "," el "," programador"] ],tf.string)
with tf.Session() as s:
print(s.run(matrizCadenas))

Curso Tensorflow con Anaconda - 2.Conceptos básicos aprendizaje automático y ejemplo

2.Conceptos básicos  aprendizaje automático y ejemplo

  •  Antes de meternos de lleno con la programación vamos a ver un poco de terminología básica referente al aprendizaje automático. Una posible definición es: Los sistemas de machine-learning aprenden cómo combinar entradas para producir predicciones útiles sobre datos nunca  antes vistos.
  • Os pongo algunos conceptos de terminología de machine learning
            - Etiquetas:Una etiqueta es el valor que estamos prediciendo, es decir, la variable.Por ejemplo:La etiqueta podría ser el precio futuro del trigo
      - Atributos: Un atributo es una variable de entrada, es decir, la variable x en la regresión lineal simple. Un proyecto de aprendizaje automático simple podría  usar un solo atributo, mientras que otro más sofisticado podría usar millones de atributos, especificados como: {x1,x2,....xn}. Por ejemplo en un un detector de spam, los atributos podrían incluir los siguientes:

                              - palabras en el texto del correo electrónico
        - dirección del remitente
          - hora del día a la que se envió
            - presencia de la frase "un truco increíble" en el correo electrónico
              -Ejemplos: Un ejemplo es una instancia de datos en particular. Los ejemplos puede ser ejemplos etiquetados o ejemplos sin etiqueta.Los ejemplos etiquetados se usan para entrenar el modelo. En nuestro ejemplo del detector de spam,  los ejemplos etiquetados serían los correos electrónicos individuales que los usuarios marcaron explícitamente como "es spam" o "no es spam".Un ejemplo sin etiqueta contiene atributos, pero no la etiqueta.En el detector de spam, los ejemplos sin etiqueta son correos electrónicos nuevos que las personas todavía no han etiquetado.
                - Modelos: Un modelo define la relación entre los atributos y la etiqueta.Dos fases:
                  A)Entrenamiento significa crear o aprender el modelo. Es decir, le muestras ejemplos etiquetados al modelo y permites que este aprenda  gradualmente las relaciones entre los atributos y la etiqueta.

                                  B) Inferencia significa aplicar el modelo entrenado a ejemplos sin etiqueta.
                    Por ejemplo, un modelo de detección de spam podría asociar de manera muy definida determinados atributos con "es spam"
                                   - Regresión o clasificación: Un modelo de regresión predice valores continuos, por ejemplo cuál es la probabilidad de que un usuario haga clic en un  anuncio. Un modelo de clasificación predice valores discretos por ejemplo distinguir si una imagen es de un perro, un gato o un hámster.
                      • En el vídeo os cuento toda esta teoría y ademas vemos otro ejemplo de código:
                      E
                      • Os dejo el código visto en el vídeo:
                      import tensorflow as tf

                              #escalar
                      entero = tf.Variable(5,tf.int32)
                      puntoflotante = tf.Variable(4.989787328,tf.float32)

                      #vector
                      cadena = tf.string_join(["Me ", " llamo " , " Bartolo"])
                      vectorEnteros = tf.Variable([1,2,3,4,5],tf.int16);
                      puntoflotante = tf.Variable([4.989787328,3.14,2.9833],tf.float32)

                      #Matrices al menos 2 dimensiones
                      matrizEnteros = tf.Variable([ [7,5,4],[1,2,3] ],tf.int32) 
                      matrizfloat = tf.Variable([ [1.1,1.2,1.3],[1.1,1.2,1.3] ],tf.float32) 
                      matrizString = tf.Variable([ ["Hola ","me ","llamo "],["pepe "," el "," programador"] ],tf.string) 

                      Curso Tensorflow con Anaconda - 1.Introducción e instalación del entorno

                      1.Introducción e instalación del entorno

                      • En el curso haremos uso de TensorFlow que es una biblioteca de código abierto para aprendizaje automático desarrollado por Google para satisfacer necesidades en sus sistemas. Con  TensorFlow , los chicos de google, son capaces de construir y entrenar redes neuronales para detectar y descifrar patrones análogos al aprendizaje y razonamiento usados por los humano.
                      • En este primer capítulo vamos a preparar nuestro entorno de trabajo.Para ello utilizaremos Anaconda donde programaremos en Phyton (va de serpientes la cosa jeje) .Desde el siguiente enlace podéis descargar el instalador que más se adecue a vuestro sistema: https://www.anaconda.com/download/
                      • En el vídeo podéis ver paso a paso la instalación y configuración del entrono de trabajo para hacer nuestro primer programa:

                      • Después de realizar correctamente la instalación y configuración,como hemos visto en el vídeo, os dejo el código que he utilizado para comprobar que efectivamente ya tenemos nuestro nuevo entrono de trabajo listo:
                      import tensorflow as tf
                      vector =tf.constant([1,45,78])
                      with tf.Session() as s:
                      print(s.run(vector))

                      Curso HTML5. Novedades - 11 Geolocalización

                      11. Curso HTML5. Novedades.  Geolocalización

                      • Vamos a finalizar con nuestro curso de html . Después de ver en la entrada anterior las etiquetas vídeo y canvas. En este capítulo cerraremos nuestro curso hablando sobre la geolocalización.
                      • Con esta nueva API podemos obtener la posición y los cambios producidos en tiempo real, de los visitantes de nuestra página. Sin embargo dado que ésto puede comprometer la privacidad del usuario, éste debe de dar siempre su permiso para poder obtenerla.
                      • Aquí os dejo un vídeo con ejemplos de uso de esta API:
                      • Os dejo también el código html visto en el vídeo:

                      <!DOCTYPE html>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Pruebas</title>
                          <link href="StyleSheet1.css" rel="stylesheet" />
                          <script type="text/javascript">
                              function dibuja() {
                                  var c = document.getElementById('myCanvas');
                                  var cxt = c.getContext("2d");
                                  /*cxt.fillStyle = "#FF0000";
                                  cxt.beginPath();
                                  cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
                                  cxt.closePath();
                                  cxt.fill();

                                  cxt.moveTo(10, 10);
                                  cxt.lineTo(150, 150);
                                  cxt.lineTo(10, 50);
                                  cxt.stroke();*/

                                  var grd = cxt.createLinearGradient(0, 0, 175, 50);
                                  grd.addColorStop(0,'#FF0000');
                                  grd.addColorStop(1,'#00FF00');
                                  cxt.fillStyle = grd;
                                  cxt.fillRect(0,0,175,50);

                              }

                          
                      function getLocation() {
                        if (navigator.geolocation) {
                          navigator.geolocation.getCurrentPosition(showPosition);
                        } else {
                          x.innerHTML = "Geolocation is not supported by this browser.";
                        }
                      }

                      function showPosition(position) {
                      alert( "Latitud: " + position.coords.latitude + 
                        " Longitud: " + position.coords.longitude); 
                      }

                           

                                  
                          </script>
                      </head>
                      <body>
                          <form >
                              <article>
                                  <header>
                                      <h1>Mi primera página html</h1>
                                  </header>
                              </article>
                              <nav>
                                  <ul>
                                      <li><a href="#">Uno</a></li>
                                      <li><a href="#">Dos</a></li>
                                      <li><a href="#">Tres</a></li>
                                      <li><a href="#">Cuatro</a></li>
                                  </ul>
                              </nav>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
                                      <figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
                                  </section>
                                  <aside>
                                    
                                          <input type="search" placeholder="Busqueda" />
                                          <input type="email" placeholder="email" />
                                          <input type="url" placeholder="url"  />
                                          <input type="tel" placeholder="telefono" /><br />
                                          <input type="number" placeholder="numero" min="0" max="10" />
                                          <input type="range" name="nunmero" id="numero"  min="0" max="100" step="25" /> <br />
                                          <input type="date" name="fecha" id="fecha"   />
                                          <input type="week" name="semana" id="semana"  />
                                          <input type="month" name="mes" id="mes" /> <br /><br />
                                          <input type="time" name="hora" id="hora" checked />
                                          <input type="datetime" name="fechahora" id="fechahora"  />
                                          <input type="color" name="micolor" id="micolor"  /><br /><br />
                                          <progress value="20" max="100" >60%</progress>
                                          <meter min="0" max="100" value="75" ></meter>
                                          <audio controls="controls" class="audio">
                                              <source src="Rock_Intro_4.mp3" type="audiompeg"  />
                                          </audio><br /><br />
                                          <video controls="controls" height="300" width="300"  muted>
                                              <source src="Suscribete.mp4" type="video/mp4" />
                                          </video><br />
                                          <canvas id="myCanvas" >

                                          </canvas>
                                          <input type="submit" value="Enviar" onclick="getLocation();" />
                                     
                                  </aside>
                              </article>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                  </section>
                                  <aside>
                                      <p>YYYYYYYYYYYYYYYy</p>
                                  </aside>
                              </article>
                              <article>
                                  <footer>
                                      <ul>
                                          <li><a href="#">Derechos de uso</a></li>
                                          <li><a href="#">Copyright</a></li>
                                      </ul>
                                  </footer>
                              </article>
                          </form>
                      </body>
                      </html>

                      Curso HTML5. Novedades - 10 Tags:Canvas(2)

                      10. Curso HTML5. Novedades.  Tags: Canvas(2)

                      • Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior las etiquetas video y canvas. En este capítulo profundizaremos en el uso de la etiqueta canvas.
                      • Como ya avanzamos en la entrada anterior  la etiqueta canvas consiste en una región definida en el código HTML con atributos de altura y ancho. Utilizando JavaScript se puede acceder a la zona a través de un conjunto completo de funciones, permitiendo así que los gráficos sean generados dinámicamente. 
                      • Canvas se apoya en las versiones actuales de Mozilla Firefox, Google Chrome, Internet Explorer, Safari y Opera. Las versiones anteriores de Internet Explorer, como la versión 8 y anteriores no son compatibles.
                      • Aquí os dejo un vídeo con ejemplos de uso de estos controles:
                      • Os dejo también el código html visto en el vídeo:
                      <!DOCTYPE html>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Pruebas</title>
                          <link href="StyleSheet1.css" rel="stylesheet" />
                          <script type="text/javascript">
                              function dibuja() {
                                  var c = document.getElementById('myCanvas');
                                  var cxt = c.getContext("2d");
                                  /*cxt.fillStyle = "#FF0000";
                                  cxt.beginPath();
                                  cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
                                  cxt.closePath();
                                  cxt.fill();

                                  cxt.moveTo(10, 10);
                                  cxt.lineTo(150, 150);
                                  cxt.lineTo(10, 50);
                                  cxt.stroke();*/

                                  var grd = cxt.createLinearGradient(0, 0, 175, 50);
                                  grd.addColorStop(0,'#FF0000');
                                  grd.addColorStop(1,'#00FF00');
                                  cxt.fillStyle = grd;
                                  cxt.fillRect(0,0,175,50);

                              }

                                  
                          </script>
                      </head>
                      <body>
                          <form >
                              <article>
                                  <header>
                                      <h1>Mi primera página html</h1>
                                  </header>
                              </article>
                              <nav>
                                  <ul>
                                      <li><a href="#">Uno</a></li>
                                      <li><a href="#">Dos</a></li>
                                      <li><a href="#">Tres</a></li>
                                      <li><a href="#">Cuatro</a></li>
                                  </ul>
                              </nav>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
                                      <figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
                                  </section>
                                  <aside>
                                    
                                          <input type="search" placeholder="Busqueda" />
                                          <input type="email" placeholder="email" />
                                          <input type="url" placeholder="url"  />
                                          <input type="tel" placeholder="telefono" /><br />
                                          <input type="number" placeholder="numero" min="0" max="10" />
                                          <input type="range" name="nunmero" id="numero"  min="0" max="100" step="25" /> <br />
                                          <input type="date" name="fecha" id="fecha"   />
                                          <input type="week" name="semana" id="semana"  />
                                          <input type="month" name="mes" id="mes" /> <br /><br />
                                          <input type="time" name="hora" id="hora" checked />
                                          <input type="datetime" name="fechahora" id="fechahora"  />
                                          <input type="color" name="micolor" id="micolor"  /><br /><br />
                                          <progress value="20" max="100" >60%</progress>
                                          <meter min="0" max="100" value="75" ></meter>
                                          <audio controls="controls" class="audio">
                                              <source src="Rock_Intro_4.mp3" type="audiompeg"  />
                                          </audio><br /><br />
                                          <video controls="controls" height="300" width="300"  muted>
                                              <source src="Suscribete.mp4" type="video/mp4" />
                                          </video><br />
                                          <canvas id="myCanvas" >

                                          </canvas>
                                          <input type="submit" value="Enviar" onclick="dibuja();" />
                                     
                                  </aside>
                              </article>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                  </section>
                                  <aside>
                                      <p>YYYYYYYYYYYYYYYy</p>
                                  </aside>
                              </article>
                              <article>
                                  <footer>
                                      <ul>
                                          <li><a href="#">Derechos de uso</a></li>
                                          <li><a href="#">Copyright</a></li>
                                      </ul>
                                  </footer>
                              </article>
                          </form>
                      </body>
                      </html>

                      Curso HTML5. Novedades - 9 Tags: Video y canvas(1)

                      9. Curso HTML5. Novedades.  Tags: video y canvas(1)

                      • Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas etiquetas que trajo html5. En este capítulo veremos las etiquetas de video y canvas.
                      • Os cuento un poco para que se usan las nuevas etiquetas antes de ver el vídeo: 
                      1. Etiqueta videoNuevo elemento HTML5 que permite incluir un fichero de vídeo dentro de una página Web sin la necesidad de recurrir a un plugin. Únicamente en el caso de que el navegador no acepte HTML5 se utilizará el plugin.
                      2. Etiqueta canvas:  Con HTML5 podemos  dibujar, manipular bits de imágenes e incluso de video. Para ello primero creamos e identificamos un canvas. Después vía javascript ( https://es.wikipedia.org/wiki/JavaScript)  dibujamos lo que nos apetezca.
                      • Aquí os dejo un vídeo con ejemplos de uso de estos controles:
                      • Os dejo también el código html visto en el vídeo:
                      <!DOCTYPE html>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Pruebas</title>
                          <link href="StyleSheet1.css" rel="stylesheet" />
                          <script type="text/javascript">
                              function dibuja() {
                                  var c = document.getElementById('myCanvas');
                                  var cxt = c.getContext("2d");
                                  cxt.fillStyle = "#FF0000";
                                  cxt.beginPath();
                                  cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
                                  cxt.closePath();
                                  cxt.fill();
                              }
                          </script>
                      </head>
                      <body>
                          <form >
                              <article>
                                  <header>
                                      <h1>Mi primera página html</h1>
                                  </header>
                              </article>
                              <nav>
                                  <ul>
                                      <li><a href="#">Uno</a></li>
                                      <li><a href="#">Dos</a></li>
                                      <li><a href="#">Tres</a></li>
                                      <li><a href="#">Cuatro</a></li>
                                  </ul>
                              </nav>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
                                      <figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
                                  </section>
                                  <aside>
                                    
                                          <input type="search" placeholder="Busqueda" />
                                          <input type="email" placeholder="email" />
                                          <input type="url" placeholder="url"  />
                                          <input type="tel" placeholder="telefono" /><br />
                                          <input type="number" placeholder="numero" min="0" max="10" />
                                          <input type="range" name="nunmero" id="numero"  min="0" max="100" step="25" /> <br />
                                          <input type="date" name="fecha" id="fecha"   />
                                          <input type="week" name="semana" id="semana"  />
                                          <input type="month" name="mes" id="mes" /> <br /><br />
                                          <input type="time" name="hora" id="hora" checked />
                                          <input type="datetime" name="fechahora" id="fechahora"  />
                                          <input type="color" name="micolor" id="micolor"  /><br /><br />
                                          <progress value="20" max="100" >60%</progress>
                                          <meter min="0" max="100" value="75" ></meter>
                                          <audio controls="controls" class="audio">
                                              <source src="Rock_Intro_4.mp3" type="audiompeg"  />
                                          </audio><br /><br />
                                          <video controls="controls" height="300" width="300"  muted>
                                              <source src="Suscribete.mp4" type="video/mp4" />
                                          </video><br />
                                          <canvas id="myCanvas" >

                                          </canvas>
                                          <input type="submit" value="Enviar" onclick="dibuja();" />
                                     
                                  </aside>
                              </article>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                  </section>
                                  <aside>
                                      <p>YYYYYYYYYYYYYYYy</p>
                                  </aside>
                              </article>
                              <article>
                                  <footer>
                                      <ul>
                                          <li><a href="#">Derechos de uso</a></li>
                                          <li><a href="#">Copyright</a></li>
                                      </ul>
                                  </footer>
                              </article>
                          </form>
                      </body>
                      </html>

                      Curso HTML5. Novedades - 8 Tags: progess, meter y audio

                      8. Curso HTML5. Novedades.  Tags: progess, meter y audio

                      • Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas campos de formulario que traía html5. En este capítulo veremos las etiquetas progress, meter y audio.
                      • Os cuento un poco para que se usan las nuevas etiquetas antes de ver el vídeo: 
                      1. Etiqueta progressSe utiliza para indicar el progreso de una tarea. Un ejemplo de su representación en html es:  <progress value="25" max="100">25%</progress>
                      2. Etiqueta meter: Representa el valor conocido de un rango, entre un mínimo y un máximo.
                      3. Etiqueta audioEs un nuevo elemento HTML5 que permite incluir un fichero de audio dentro de una página Web sin la necesidad de recurrir a un plugin. Únicamente en el caso de que el navegador no acepte HTML5 se utilizará el plugin.
                      • Aquí os dejo un vídeo con ejemplos de uso de estos controles:

                      • Os dejo también el código html visto en el vídeo:
                      <!DOCTYPE html>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Pruebas</title>
                          <link href="StyleSheet1.css" rel="stylesheet" />
                      </head>
                      <body>
                          <form>
                              <article>
                                  <header>
                                      <h1>Mi primera página html</h1>
                                  </header>
                              </article>
                              <nav>
                                  <ul>
                                      <li><a href="#">Uno</a></li>
                                      <li><a href="#">Dos</a></li>
                                      <li><a href="#">Tres</a></li>
                                      <li><a href="#">Cuatro</a></li>
                                  </ul>
                              </nav>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
                                      <figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
                                  </section>
                                  <aside>
                                    
                                          <input type="search" placeholder="Busqueda" />
                                          <input type="email" placeholder="email" />
                                          <input type="url" placeholder="url"  />
                                          <input type="tel" placeholder="telefono" /><br />
                                          <input type="number" placeholder="numero" min="0" max="10" />
                                          <input type="range" name="nunmero" id="numero"  min="0" max="100" step="25" /> <br />
                                          <input type="date" name="fecha" id="fecha"   />
                                          <input type="week" name="semana" id="semana"  />
                                          <input type="month" name="mes" id="mes" /> <br /><br />
                                          <input type="time" name="hora" id="hora" checked />
                                          <input type="datetime" name="fechahora" id="fechahora"  />
                                          <input type="color" name="micolor" id="micolor"  /><br /><br />
                                          <progress value="20" max="100" >60%</progress>
                                          <meter min="0" max="100" value="75" ></meter>
                                          <audio controls="controls" class="audio">
                                              <source src="Rock_Intro_4.mp3" type="audiompeg"  />
                                          </audio><br /><br />
                                          <input type="submit" value="Enviar" />
                                     
                                  </aside>
                              </article>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                  </section>
                                  <aside>
                                      <p>YYYYYYYYYYYYYYYy</p>
                                  </aside>
                              </article>
                              <article>
                                  <footer>
                                      <ul>
                                          <li><a href="#">Derechos de uso</a></li>
                                          <li><a href="#">Copyright</a></li>
                                      </ul>
                                  </footer>
                              </article>
                          </form>
                      </body>
                      </html>

                      Curso HTML5. Novedades - 7. Más tipos de input: time, datetime y color

                      7. Curso HTML5. Novedades. Más tipos de input: time, datetime y color 

                      • Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior algunas de las nuevas campos de formulario que traía html5. En este capítulo continuamos con nuevos tipos de input time,datetime y color.
                      • Vamos con los nuevos campos de formulario que veremos en este capítulo: 
                      1. Campo timeEl tipo de campo time es similar a date, pero solo para la hora. Toma el formato de horas y minutos, pero su comportamiento depende de cada navegador . Normalmente el valor esperado tiene la sintaxis hora:minutos:segundos, pero también puede ser solo hora:minutos.
                      2. Campo datetime: Este tipo de campo ofrecía una interface similar a date, pero solo para seleccionar una semana completa. Actualmente los navegadores no lo utilizan. (https://stackoverflow.com/questions/21263515/why-is-html5-input-type-datetime-removed-from-browsers-already-supporting-it)
                      3. Campo color: Además de los tipos de campo para fecha y hora existe otro tipo que provee una interface predefinida similar para seleccionar colores
                      • Aquí os dejo un vídeo con ejemplos de uso de estos controles:
                      • Os dejo también el código html visto en el vídeo:
                      <!DOCTYPE html>
                      <html>
                      <head>
                          <meta charset="utf-8" />
                          <title>Pruebas</title>
                          <link href="StyleSheet1.css" rel="stylesheet" />
                      </head>
                      <body>
                          <form>
                              <article>
                                  <header>
                                      <h1>Mi primera página html</h1>
                                  </header>
                              </article>
                              <nav>
                                  <ul>
                                      <li><a href="#">Uno</a></li>
                                      <li><a href="#">Dos</a></li>
                                      <li><a href="#">Tres</a></li>
                                      <li><a href="#">Cuatro</a></li>
                                  </ul>
                              </nav>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
                                      <figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
                                  </section>
                                  <aside>
                                    
                                          <input type="search" placeholder="Busqueda" />
                                          <input type="email" placeholder="email" />
                                          <input type="url" placeholder="url"  />
                                          <input type="tel" placeholder="telefono" /><br />
                                          <input type="number" placeholder="numero" min="0" max="10" />
                                          <input type="range" name="nunmero" id="numero"  min="0" max="100" step="25" /> <br />
                                          <input type="date" name="fecha" id="fecha"   />
                                          <input type="week" name="semana" id="semana"  />
                                          <input type="month" name="mes" id="mes" /> <br /><br />
                                          <input type="time" name="hora" id="hora" checked />
                                          <input type="datetime" name="fechahora" id="fechahora"  />
                                          <input type="color" name="micolor" id="micolor"  /><br /><br />
                                           <input type="submit" value="Enviar" />
                                     
                                  </aside>
                              </article>
                              <article class="pagina">
                                  <section class="contenedor">
                                      <br />
                                      <mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                      ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
                                  </section>
                                  <aside>
                                      <p>YYYYYYYYYYYYYYYy</p>
                                  </aside>
                              </article>
                              <article>
                                  <footer>
                                      <ul>
                                          <li><a href="#">Derechos de uso</a></li>
                                          <li><a href="#">Copyright</a></li>
                                      </ul>
                                  </footer>
                              </article>
                          </form>
                      </body>
                      </html>

                      Curso .NET Core en C# - 34.Creamos nuestro propio log

                      34.Creamos nuestro propio log Hola a todos. En este curso, analizaremos todos los conceptos básicos, intermedios y avanzados de  ASP.NET...