Archivos para la categoria jQuery

Curso: Guía practica de Desarrollo Web Frontend

guia-desarrollo-web

Desde “LoqueNecesita” queremos desarrollar una serie de artículos enfocados al desarrollo Web frontend, estos artículos se crearán en un orden especifico a la ves que vamos realizando practicas con determinado proyecto.

La idea es tratar temas acerca de HTML5, CSS3 y Javascript, veremos temas puntuales con relación a la nueva tecnología de HTML5, así como detalles y herramientas de CSS3, que nos ayudarán a lograr cosas muy comunes, como el centrado de texto tanto horizontal como vertical, alineación, sombras, curvas, fuentes, responsive design, etc. Así también queremos profundizar un poco en la programación con Javascript y como contribuye este a las grandes mejoras de la nueva Web, así también echaremos un vistazo a librerías del lenguaje muy comunes que nos pueden ayudar muchísimo.

La idea es ir desarrollando la guía practica entorno a un proyecto frontend, que anunciaremos en la primera parte, pero también están invitados a proponer un proyecto para desarrollar la guía practica. A medida que vamos avanzando, tal vez tengas mejores soluciones a implementaciones que queremos hacer, en tal caso te invitamos a que escribas tus soluciones al igual que tus comentarios y consultas, en los comentarios del articulo o en Facebook o Twitter, así estas también estarán dentro de la guía final que construiremos entre todos, por esto su participación es muy importante.

Al final unificaremos los artículos, los comentarios que contribuyen con soluciones, dudas o aportes, y así tendremos una guía de desarrollo web frontend lista para su descarga, que te servirá de referencia para el desarrollo de tus futuros proyecto, obviamente su código fuente estará disponible.

¿Te animas a aprender y aportar, en esta guía de desarrollo web frontend?

Si tu respuesta es afirmativa, compártelo con tus amigos en las redes sociales, y si quieres propone un proyecto que te gustaría desarrollar a medida que hacemos la guía.

Mostrar y Ocultar contenido con jQuery

Necesitaba crear algo así como “mostrar más” en donde tengo una parte de contenido visible y otra oculta que se muestra cuando hago clic sobre mostrar más, en la Web existen muchas soluciones acá comparto una solución que te puede servir.

Caso especifico: Una lista de categorías que muestra 5 y un enlace “mostrar más” que permite ver las demás, adicional si quieres agregas un enlace ocultar para regresar a mostrar solo 5.

Primero paso

Tenemos el código html con las categorías, consta de un div y dentro una lista desordenada con 10 categorías:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="contenedor">
  <ul class="categorias">
    <li>Categoria 1</li>
    <li>Categoria 2</li>
    <li>Categoria 3</li>
    <li>Categoria 4</li>
    <li>Categoria 5</li>
    <li>Categoria 6</li>
    <li>Categoria 7</li>
    <li>Categoria 8</li>
    <li>Categoria 9</li>
    <li>Categoria 10</li>
  </ul>
</div>

Luego tenemos un par de divs para poner los enlaces mostrar más y menos, hemos agregado el estilo cursor: pointer para que el texto parezca un enlace y uno de ellos esta oculto por defecto con display: none; como vemos a continuación:

1
2
<div class="mas" style="cursor: pointer;">mostrar mas</div>
<div class="menos" style="display: none; cursor: pointer;">mostrar menos</div>

Leer el resto de la entrada »

Implementa una cuenta regresiva para tu página Web con jQuery

cuenta regresivaLas cuentas regresivas, son muy usadas hoy día en diversos sitios Web, sus usos van desde el lanzamiento de un sitio Web, hasta la terminación de una oferta de un producto, en fin existen diversas formas utiles para su implementación. También cabe destacar que existen cientos de plugins y scripts, que podemos usar para lograr este proposito.

jQuery Countdown” es un plugin jQuery, que nos permite integrar una cuenta regresiva, o incluso una cuenta hacia arriba en nuestro sitio Web, el plugin es gratuito y se puede usar en cualquier proyecto, esta bajo licencia GPL y MIT, además es altamente configurable, podemos usar imagenes o fuentes para presentar los datos de la cuenta regresiva, se puede sincronizar con el tiempo alrededor del mundo, es posible cambiar el lenguaje si se esta mostrando las palabras como “días” o “años”, además podremos usar funciones para ejecutar al final de la cuenta regresiva. Sin duda esto es de las mejores funcionalidades y de las más utiles, podremos hacer que nuestro sitio Web aparezca al final de la cuenta, o que el boton de comprar desaparezca porque la oferta ha terminado, etc.

Bueno ya que tenemos una idea del plugin y sus usos veamos como se puede integrar en nuestros sitios Web, siguiendo estos simples 3 pasos:

1. Incluimos la librería de jQuery en el head de nuestra página Web.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

2. Descargamos e incluimos los archivos CSS y Javascript en el head.

<style type="text/css">@import "jquery.countdown.css";</style>
<script type="text/javascript" src="jquery.countdown.js"></script>

También podremos usar la versión min, jquery.countdown.min.js (13.5K vs 31.4K, 4.4K comprimido).

3. Conectamos las funcionalidades de “jQuery Countdown” con nuestros divs.

$(selector).countdown({until: liftoffTime});

También podremos incluir  parámetros de configuración como parte de este proceso.

$(selector).countdown({until: liftoffTime, format: ‘dHM’});

El sitio Web oficial cuenta con una completa documentación, que nos permite integrar funcionalidades completas a la cuenta regresiva.

Sin duda es un excelente plugin y uno de los más completos, para la integración de funcionalidades con cuentas regresivas, si tienes un proyecto de marketing o un lanzamiento de un sitio Web y quieres implementar esta funcionalidad, deberías considerar usar “jQuery Countdown”.

Después del salto puedes ver un ejemplo de su integración.

Leer el resto de la entrada »

Embeber vídeos de YouTube, Vímeo y más con jQuery

Ya hemos visto un plugin jQuery que nos permite incrustar vídeos en nuestras aplicaciones Web, ahora he usado otro plugin para el mismo propósito y muy sencillo de usar.

Su nombre es “jquery-oembed” y este también usa el API de OEmbed para insertar contenido como vídeos y fotos en tu sitio Web.

Su uso es bastante sencillo, solo debemos seguir los siguientes pasos:

  1. Descargar el Plug-in, el cual viene en versión completa y min, deberías seleccionar el que más te conviene para tu aplicativo.
  2. Llamamos a jQuery desde nuestro header:
  3. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  4. Creamos una sencilla función para agregar parámetros a nuestro plugin:
  5. <script type="text/javascript">
            $(document).ready(function() {
                    $("a.oembed").oembed();
            });
    </script>
  6. Por último agregamos el código con la url del vídeo o imagen que queremos mostrar así:
  7. <a href="http://www.youtube.com/watch?v=7ceEiQaGaXY" class="oembed">Vídeo YouTube</a>

Con estos sencillos pasos podrás embeber vídeos, imágenes o productos de otros sitios Web en tus aplicaciones Web.

Este plugin permite embeber contenido de:

5min
Amazon Product Images
Flickr
Google Video
Hulu
Imdb
Metacafe
Myspace Videos
Qik
Revision3
Screenr
Slideshare
Twitpic
Viddler
Vimeo
Wikipedia
WordPress
YouTube

Enlace:
Sitio oficial | jquery-oembed

jQuery Script: Clic en me gusta de Facebook para descargar o ver contenido premium

Es común hoy día ofrecer contenido premium o descargas a cambio de un me gusta. En la Web podemos encontrar varios scripts o plugins que nos permiten este objetivo.

Ver Demo.

Navegando la Web me encuentro con este completo script creado por “easyjquery”, que esta desarrollado en jQuery y el cual nos permite, ofrecer contenido en descarga o premium a cambio de “me gusta” en Facebook, un Tweet o un G+ de Google.

Su implementación es sencilla solo debes seguir estos pasos:

1. Creas un archivo html y entre las etiquetas <head> … </head> pegas lo siguiente:

<script language="Javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="Javascript" type="text/javascript" src="http://api.easyjquery.com/easyjquery.js"></script>
<!-- facebook like by easyjquery.com --->
<script language="Javascript" src="http://api.easyjquery.com/easyjquery.facebook.js"></script>
<link rel="stylesheet" type="text/css" href="http://api.easyjquery.com/facebook_like.css">
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<!-- end facebook like --->

En la primera línea del código hemos incluido la libraría jQuery, en la segunda línea el plugin “easyjquery.js” desarrollado por easyjquery, en las siguientes se incluyen los archivos necesarios para crear el botón “me gusta” y dar estilo a la ventana emerjente, así como archivos para acceder a determinadas funcionalidades de facebook y twitter.

Después del salto los demás sencillos pasos, y el enlace para descargar el código de ejemplo.

Leer el resto de la entrada »

Programr: Programa tu lenguaje favorito Online, añade soporte para Android

programr

Si no lo conoces de paso te presento “Programr” y su nueva noticia.

Cuando estamos aprendiendo un lenguaje de programación los más importante es su practica, y para ello debemos lidiar con crear los entornos adecuados donde correr, ejecutar y en ocasiones compilar nuestro código. Aquí es donde nos ayuda Programr, ya que nos permite elaborar el código, ejecutarlo, compilarlo e incluso compartirlo con colaboradores en nuestro proyecto, y todo desde nuestro navegador, sin necesidad de instalar compiladores, servidores Web, etc.

Programr nos permite desarrollar en lenguajes como PHP, C++, Java, C#, VB, Ruby, Python, Javascript (jQuery), FLEX, J2EE, AJAX, SQl y ahora ha anunciado la buena nueva de soporte para aplicaciones Android, permitiendo su compilación Online, es decir todo a través de nuestros navegador, así mismo podremos obtener el APK que podrá ser difundido por el medio que deseemos e incluso lo podremos llevar directamente a Google Play.

Además pronto brindara soporte para el desarrollo de aplicaciones iOS, y aplicativos para la red social Facebook.

Enlace:
Sitio oficial | Programr
Vía techcrunch

Embeber vídeo con jQuery

Varias personas me han preguntado ¿Cómo embeber un vídeo de YouTube con su URL únicamente?

Desde “workup.com” crear un interesante plug-in desarrollado en jQuery, él cual nos permite incrustar contenido de varios servicios en nuestras aplicaciones Web, tan solo agregando su url.

El plug-in esta basado en oohembed que a su ves se basa en el formato oembed, que nos permite incrustar contenido de sitios Web de terceros. Gracias a este formato es muy sencillo mostrar vídeos, fotos, etc. en nuestros sitios Web tan solo referenciando su URL, como de seguro habrás visto en servicios como Facebook.

El uso del plug-in es bastante sencillo solo debes:

  1. Descargar el Plug-in, el cual viene en versión completa y min, deberías seleccionar el que más te conviene para tu aplicativo.
  2. En tu header haces un llamado a jQuery:
    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
  3. Después llamas el plug-in:
    <script type=”text/javascript” src=”jquery.oembed.js”></script>
  4. Agregas una función como esta:
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(“#olink”).blur(function (){
    olink = $(“#olink”).val();
    $(“#oembedcont”).fadeOut(1000);
    $(“#oembed”).oembed(olink);
    })
    });
    </script>
  5. Por último agregas estos div para agregar el contenido:
    <div id=”oembedcont”><input type=”text” id=”olink”/></div>
    <div id=”oembed”></div>En el div con id=”oembedcont” aquí agregamos la URL del contenido a mostrar, y en div id=”oembed se desplegará el contenido.

Los archivos que puedes descargar vienen con un código de ejemplo, que te mostrará lo sencillo que es el uso de este plug-in, con el cual podrás incluir facilmente contenidos de fivemin, amazon, flickr, googlevideo, hulu, imdb, metacafe, qik, revision3, slideshare, twitpic, vimeo, youtube, entre otros.

Si estas interesado en incluir contenido de terceros en tus aplicativos Web, te recomiendo que des una leída al formato oembed, cabe destacar que oohembed fue adquirida por embed.ly, que nos brinda una excelente API para embeber contenido, así que te recomiendo 100% que visites su sitio y te familiarices con esta API.

Espero que esto sea de su ayuda, gracias.

Enlace:
Descargar | Plug-in

HTML KickStart: Recursos de HTML5, CSS3 y Javascript

HTML KickStart

“HTML KickStart” es un conjunto bastante liviano de archivos, patrones y elementos en HTML5, CSS y jQuery (Javascript), diseñado para ayudarnos ahorrándonos tiempo, gracias a las etiquetas, menús, tipografías, galerías de imágenes, botones, formularios, listas, iconos, entre otros, que pueden ser descargado gratuitamente para basar nuestros desarrollos en su código, además son compatibles con tus navegadores favoritos.

Así que si diseñas o desarrollas sitios o aplicativos Web, te invitamos a que le heches un vistazo a HTML KickStart, sin duda te ayudará.

Enlace:
99Lime

FeedEk: Plugin jQuery para mostrar RSS/Atom

FeedEk es un plugin jQuery que nos permite mostrar contenido RSS y Atom en nuestra Web, de forma bastante sencilla, permitiéndonos configurar la url desde donde queremos traer el contenido, cantidad de artículos a mostrar, fecha, entre otros.

Uso:

1. Incluye la librería jQuery y FeedEk en la etuiqueta <head> de tu sitio.

<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="FeedEk.js"></script>

</head>

2. Agrega un div en el lugar donde mostraras el widget

<body>
    ...
    <div id="divRss">
    </div>
    ...
</body>

3. Agrega el código Javascript que traerá la información del sitio externo.

$('#divRss').FeedEk({
   FeedUrl : 'http://rss.cnn.com/rss/edition.rss',
   MaxCount : 5,
   ShowDesc : true,
   ShowPubDate:true
  });

Cambias en FeedUrl por la url de donde quieres traer el contenido.

Opciones:

FeedUrl: Url desde donde traes el contenido (Requerido).
MaxCount: Número de items (Por defecto 5).
ShowDesc: Si quieres mostrar la descripción (Por defecto true) .
ShowPubDate: Si quieres mostrar fecha de publicación (Por defecto true).

Ideal si quieres agregar un widget con contenido interesante de terceros en tu Web.

Enlaces:
Sitio | FeedEk
Descarga | FeedEk plugin
Demo | FeedkEk
Vía | web resources depot

Marketing: Seguir abandonos en formularios con jQuery y Google Analytics

En este vídeo veremos como hacer seguimiento a los abandonos en los formularios de nuestros sitios Web, usando jQuery y Google Analytics. De esta forma podremos optimizar nuestros sitios Web y evitar abandonos de usuarios o clientes, tal ves por información innecesaria solicitada en uno de nuestros formularios, que los hace extensos y engorrosos a la hora de llenarlos.

Veremos como por medio de jQuery, el código de seguimiento ga.js, un plugin para jQuery llamado jQuery URL parser y los seguimientos de eventos de Google, podremos lograr algo que sin duda será útil si estas en el área de marketing Web o si eres desarrollador.

Necesitarás estar usando Google Analytics en tus sitios Web para emplear esta técnica, ya que no se profundiza en el uso de Google Analytics y el seguimiento de eventos.

El vídeo cuenta con poco más de 13 minutos y desde el enlace podrás descargar el código usado en el ejemplo.

Enlaces:

Código de ejemplo incluye plugin jQuey URL parser y jQuery
Uso de Google Anaytics
Guía de seguimiento de eventos
Plugin URL parser
jQuery (Sitio oficial)