Sleep() en JavaScript

PHP dispone de la función sleep(), pero en JavaScript no existe. De todas formas, esta es la forma de programar nosotros mismos nestra propia función sleep() en JavaScript. El código es muy sencillo, así que no será necesaria un explicación.

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
            break;
        }
    }
}

Validación de formularios con jQuery y validate()

Cuando tenemos que validar los datos de un formulario podemos recurrir a Javascript y crear nuestra función de validación, pero también podemos recurrir a jQuery para validar el formulario de forma rápida y sencilla.

1. Descargar jQuery y el plugin validate.
2. Incluir los ficheros en la cabecera de nuestro código fuente:
   

       <script src="js/jquery.js" type="text/JavaScript"></script>
       <script src="js/jquery.validate.js" type="text/JavaScript"></script>
       <script type="text/JavaScript">
           $(document).ready(function() {
               $('#formV').validate();
           });
       </script>
   

   Como podemos observar, también hemos añadido el código jQuery para que el formulario cuyo id=”formV” sea validado.

3. Escribir nuestro formulario y asignarle un identificador único, en este caso le asignaremos el id=”formV” mencinado en el paso anterior:
   

       <form id="formV" name="form" action="#" method="post">
           <label for="Name" class="italicFont">Name</label><input name="name" type="text" size="50"/>
           <label for="Email" class="italicFont">Email</label><input name="email" type="text" size="50"/>
           <label for="Subject" class="italicFont">Subject</label><input name="subject" type="text" size="50"/>
           <label for="Text" class="italicFont">Text</label><textarea rows="10" cols="10"></textarea>
           <input class="submit" name="submit" type="submit" value="Send" />
       </form>
   

4. Llegados a este punto, deberemos indicar qué campos requieren validación para que, en este caso el plugin validate, pueda llevarla a cabo. Tenemos dos formas de hacerlo:
   1. Asignando una clase required a cada elemento que requiera validación, de forma que si ese campo no cumple las condiciones adecuadas o no es rellenado, será mostrado un aviso de error que nos lo indicará.
      

          <form id="formV" name="form" action="#" method="post">
              <label for="Name" class="italicFont">Name</label><input name="name" type="text" class="required" size="50"/>
              <label for="Email" class="italicFont">Email</label><input name="email" type="text" class="required" size="50"/>
              <label for="Subject" class="italicFont">Subject</label><input name="subject" type="text" class="required" size="50"/>
              <label for="Text" class="italicFont">Text</label><textarea rows="10" cols="10"></textarea>
              <input class="submit" name="submit" type="submit" value="Send" />
          </form>
      

   2. Definiendo un id único para cada campo que requiera validación y, en la cabecera del código fuente, el tipo de validación. Es decir, la cabecera de nuestro código fuente pasará a ser:
      

      <script src="js/jquery.js" type="text/JavaScript"></script>
          <script src="js/jquery.validate.js" type="text/JavaScript"></script>
          <script type="text/JavaScript">
              $(document).ready(function() {
                  $('#formV').validate({
                      rules: {
                          name: {required: true},
                          email: {required: true},
                          subject: {required: true}
                      },
                      messages: {
                          name: {required: "Introduzca su nombre"},
                          email: {required: "Introduzca su email"},
                          subject: {required: "Introduzca el asunto del mensaje"}
                      }
                  });
              });
          </script>
      

      Y el código fuente quedaría de la siguiente forma:

      <form id="formV" action="#" method="post"> <label class="italicFont" for="Name">Name</label><input id="name" name="name" size="50" type="text" />
          <label class="italicFont" for="Email">Email</label><input id="email" name="email" size="50" type="text" />
          <label class="italicFont" for="Subject">Subject</label><input id="subject" name="subject" size="50" type="text" />
          <label class="italicFont" for="Text">Text</label><textarea cols="10" rows="10"></textarea>
          <input class="submit" name="submit" type="submit" value="Send" />
      </form>
      

Podemos emplear muchas más opciones en los campos del formulario, así que si es necesario, en el siguiente enlace podremos encontrar un listado de ellas.

Transiciones/Desplazamientos dentro de una misma página (jQuery)

En muchas páginas es común tener enlaces que nos llevan a distintas partes dentro de ésta, como por ejemplo hacer clic en el enlace de un índice para llevarlos a la posición de la página en donde comienza la sección o estar en la parte inferior y encontrar un enlace que nos desplaza (lleva) hacia arriba. Con Smooth Anchors podemos hacer esto mismo pero con un desplazamiento suave del texto y de una forma cómoda, sencilla y estéticamente agradable.

Lo primero que haremos será incluir las librerías JavaScript necesarias para ello; jQuery y Smooth Anchors.

...
    <script language="JavaScript" src="js/jquery.js"></script>
    <script language="JavaScript" src="js/jquery.smoothanchors.js"></script>
...

El siguiente paso será inicializar el plugin añadiendo a la cabecera de nuestro código fuente las siguientes líneas:

...
    <script language="JavaScript">
        $(document).ready(function() {
            // $.smoothAnchors(velocidad [, tipoDeEfecto [, redirección]])
            // -> velocidad = "slow" | "normal" | "fast"
            // -> tipoDeEfecto = "linear" | "swing"
            // -> redirección = true | false
            $.smoothAnchors("normal", "swing", false);
        });
    </script>
...

Mediante el código anterior estamos indicando que cualquier tipo de enlace que nos dirija a una sección de la misma página deberá realizar el scrolling utilizando el plugin Smooth Anchors. Además, la velocidad la inicializaremos a normal.

Finalmente, el último paso será, evidentemente, crear los enlaces pertinentes dentro de nuestra página web. Por ejemplo, de la siguiente forma:

...
    <a href="#seccion01">Secci&oacute;n 01</a>
    <a href="#seccion02">Secci&oacute;n 02</a>
    ...
    <a name="seccion01">Secci&oacute;n 01</a><p>Texto de la primera secci&oacute;n</p>
    <a name="seccion02">Secci&oacute;n 02</a><p>Texto de la segunda secci&oacute;n</p>
...

Mostrar nuestros tweets mediante Twit (jQuery)

Si disponemos de un blog o solamente queremos que en nuestro portal web puedan visualizarse nuestros tweets y no sabemos cómo hacerlo, podemos hechar mano de este fantástico plugin llamado Twit, que nos facilitará muchísimo trabajo de la siguiente forma:

1. Descargar e incluir el fichero JavaScript del plugin Twit en nuestro código fuente:

...
<script type="text/JavaScript" src="jquery.twit.js"></script>
...

2. Lo siguiente que deberemos hacer será crear en nuestro código fuente una sección en la que mostrar nuestros tweets. Para ello crearemos un div vacío cuyo identificador sea, por ejemplo, ‘misTweets‘:

...
<div id="misTweets"></div>
...

3. Indicar los datos de la cuenta de la que se extraerá la información. Es decir, deberemos indicar los datos de la cuenta cuyos twwets queremos que sean mostrados en nuestro portal web. esto lo haremos de la sigueinte forma:

...
<script type="text/JavaScript">
    $('misTweets').twit(username);
</script>
...

o también podemos hacer uso de las diferentes opciones que nos proporciona el plugin, como por ejemplo:

...
<script type="text/JavaScript">
    $('misTweets').twit(username, {
        limit:5,
        label: 'twitter',
        title: 'Mis tweets'
    });
</script>
...

El conjunto total de parámetros que nos ofrece este plugin los podemos encontrar en el siguiente enlace.

Fuentes personalizadas en CSS. Propiedad @font-face

Hay veces en las que los diseñadores web y los programadores no se ponen de acuerdo. Cuando se abre un .psd y se ve la plantilla desarrollada por los diseñadores siempre existe el problema de cómo utilizar las fuentes de las que se han hecho uso en el propio diseño.

Para ello existe la propiedad @font-face de CSS, en la que indicamos la fuente que deseamos utilizar a través de la URL de descarga de ésta o la URL local (en el propio servidor) en la que se puede encontrar la fuente. Ésto lo hacemos de la siguiente forma:

@font-face {
    font-family: Calibri;
    src: local("Calibri"), url("fonts/calibri.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
body { font-family: Calibri, sans-serif; }

Como vemos, indicamos el nombre de la familia de la fuente y la dirección desde la que descargarla:

• 1º Se buscará la fuente en la dirección local de nuestro servidor proporcionada.
• 2º Si ésta no se encuentra, se descargará de la URL indicada.

También indicamos el formato de fuente que será utilizada, en este caso truetype (.ttf), aunque también hay otros tipos como opentype (otf), … Una vez llevado a cabo este paso, sólo deberemos emplearla indicando el nombre de la familia de la fuente indicada en la propiedad @font-face de nuestro CSS.