feed twitter facebook LinkedIn facebook

jQuery » Implementando un Twitter Follow Box

septiembre 14, 2012 por Emmanuel Sio Sin Comentarios Imprimir Imprimir

Twitter Follow Box es un plugin realizado en JQuery que nos permite agregar al mejor estilo Facebook, nuestros seguidores de Twitter. No requiere grandes conocimientos para incorporarlo a nuestra web y nos llevará muy poco tiempo realizarlo. Para llevar a cabo la implementación de este plugin debemos realizar los siguientes pasos:

  1. Descargar el plugin de la web del autor.
  2. Incorporar en el header los links a la librería de JQuery, al arhivo de CSS y a la librería del plugin.
  3. Escribir el div donde vamos a alojar el contenido del twitter follow box.
  4. Escribir el script de llamada al código del plugin.

Descarga del plugin

Primero debemos descargar el fichero zip desde la página de sus creadores haciendo click aquí. Una vez que lo descargamos debemos acomodar los archivos que encontramos:

  • JS: jquery.followbox.min.js es la versión que podemos usar en producción y jquery.followbox.js es la versión que podemos utilizar para debbuguear. Estos archivos son el core del plugin.
  • CSS: followbox.css. Es el archivo de CSS. En este archivo hay dos themes: el principal y el dark. Lo pueden modificar a su manera.
  • Imagen: icon_twitter.png. Este archivo es un loguito de Twitter que se encuentra al lado del link que apunta a la página del desarrollador. Tengan en cuenta que esta imagen está enlazada a una ruta específica dentro de los archivos JS antes mencionados. Para cambiar la ruta de donde lo alojen tienen que editar el archivo y buscar: var d="followbox/icon_twitter.png"

Código dentro del head

  1. <!— incorporamos el link al css -->
  2. <link href="css/followbox.css" rel="stylesheet" type="text/css"/>
  3.  
  4. <!— incorporamos el script de JQuery -->
  5. <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>
  6.  
  7. <!— incorporamos el script del plugin -->
  8. <script src="js/jquery.followbox.min.js" type="text/javascript"></script>

Código del div

Escribimos un div vacio donde queremos que aparezca el box

  1. <div id="twitterBox">
  2. </div>

Código de llamada del script

Escribimos el código para llamar al constructor del plugin

  1. $('# twitterBox).followbox({
  2. 'user' : 'nuestro nombre de usuario en twitter sin @',
  3. 'width' : '1240',
  4. 'theme' : 'dark'});

Dentro de las variables que podemos inicializar opcionalmente para acomodar el box de acuerdo a nuestras necesidades encontramos las siguientes. La variable user es obligatoria.

  • user: nombre del usuario de twitter sin @
  • width: ancho en pixeles
  • height: alto en pixeles
  • border_color: color del borde
  • bg_color: color del fondo
  • bg_image: imagen de fondo optativa
  • title_color: color del texto del título
  • total_count_color: color indicando la cantidad de seguidores
  • follower_name_color: color de los enlaces a los seguidores
  • theme: permite seleccionar un estilo global; puede ser light, dark o custom

Como síntesis de nuestro artículo podemos concluir que tenemos una implementación realmente sencilla, ultra customizable que nos va a permitir mostrar nuestros seguidores de twitter en nuestro sitio Web.

HTML5 » Insertar texto en un Canvas de HTML5

julio 11, 2012 por Víctor Cuervo 1 Comentario Imprimir Imprimir

En varios ejemplos del uso del Canvas en HTML5 hemos ido viendo como insertar diferentes elementos gráficos: líneas, rectángulos,... Pero a la hora de utilizar el Canvas en HTML5 no nos vamos a limitar a realizar dibujos, si no que también podemos insertar texto. Así que vamos a ver qué código necesitamos para insertar texto en un Canvas de HTML5.

La creación y acceso al Canvas seguro que ya os la sabéis, pero por si acaso la volvemos a poner. Creamos el elemento Canvas y mediante Javascript accedemos a su contexto.

  1. <canvas height="300px" width="300px" id="micanvas">
  2. Su navegador no soporta en elemento CANVAS</canvas>
  3.  
  4. var canvas = document.getElementById("micanvas");
  5. var ctx = canvas.getContext("2d");
  6. </script>

Ahora que tenemos el contexto del canvas vamos a insertar el texto. Para insertar texto tenemos que conocer dos cosas. La primera es saber cómo podemos seleccionar la fuente, tamaño, efectos sobre el texto. Y es que aquí no podemos pensar en propiedades CSS, si no que será un atributo del Canvas con el que modifiquemos el tipo del texto. El atributo del canvas que nos permite dar formato al texto es .font. Eso sí, los valores de la propiedad son similares a los valores de CSS.

Si queremos utilizar una letra sans-serif de 22px y que esté en negrita pondremos lo siguiente:

  1. ctx.font = "bold 22px sans-serif";

Ahora ya solo hay que conocer la segunda cosa. Cómo ponemos el texto. Esto lo hacemos con el método .fillText. Este método recibe tres parámetros: el primero será el texto que queremos insertar y los dos siguientes será la coordenada a partir de la cual queremos insertar el texto.

  1. ctx.fillText("Texto en el Canvas",50,50);

Ya tenemos insertado nuestro texto en un Canvas con HTML5.
¿Cómo aplicarías efectos sobre este texto?

Conversación » Conversaciones sobre Programación. Build 2012.04

junio 14, 2012 por Víctor Cuervo 6 Comentarios Imprimir Imprimir

Sigue la actividad de nuestrso grupos de conversación de Facebook sobre lenguajes de programación en español. Cada día más contento de la gente que comparte, que contesta, que ayuda, que conversa,... cada día más contento de ver como la gente colabora entre ellos.

Sin duda alguna, el grupo de Java, el más activo.

Pero echemos un vistazo a las últimas conversaciones de los grupos sobre programación en español... y "tostamos" nuestra Build 2012.04.

HTML5 en Español
https://www.facebook.com/groups/html5.es/
153 miembros (+21)

Además se están manteniendo varios documentos:

Java en Español
https://www.facebook.com/groups/java.es/
280 miembros (+53)

Sigue abierta la encuesta sobre qué IDE utilizarías para empezar a aprender el lenguaje de Java. No dejes de contestar y añadir tus comentarios. Los recopilaremos todos en un futuro.

Javascript en Español
https://www.facebook.com/groups/javascript.es/
121 miembros (+23)

jQuery en Español
https://www.facebook.com/groups/jquery.es/
167 miembros (+36)

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
137 miembros (+22)

Se ha creado una encuesta para que votes por cual consideras mejor framework de programación con PHP y cuales son tus razones.

Bases de Datos en Español
https://www.facebook.com/groups/basesdedatos.es/
156 miembros (+17)

CSS en Español
https://www.facebook.com/groups/css.es/
96 miembros (+11)

XML en Español
https://www.facebook.com/groups/xml.es/
51 miembros (+8)

SVG en Español
https://www.facebook.com/groups/svg.es/
26 miembros (+5)

 

jQuery » Aplicar opacidad con jQuery

abril 2, 2012 por Víctor Cuervo 4 Comentarios Imprimir Imprimir

jQuery nos permite modificar la opacidad de los elementos con una gran facilidad. Ya lo vimos haciendo un efecto de Fade.

Pero ahora vamos a algo más sencillo, simplemente vamos a aplicar un cambio de opacidad de una imagen con jQuery. La idea será partir de una imagen y un enlace que nos permita aplicar la opacidad.

  1. <img src="contenido.png" alt="logo" id="logo"/><br/>
  2. <a href="#" id="opacidad">Opacidad</a>

Lo siguiente será capturar el evento click sobre ese enlace:

  1. $(document).ready(function(){
  2. $("#opacidad").click(function(e){
  3. //Código de cambio de opacidad
  4. });
  5. });

Y es que será en el evento click dónde aplicaremos el cambio de opacidad. El cambio de opacidad se consigue modificando la propiedad opacity de CSS. Para ello vamos a utilizar el método .css de jQuery.

  1. $("#logo").css("opacity", 0.2);

Es importante saber que los valores de la opacidad varian entre 0.0 y 1.0.

Ahora cuando pulsemos sobre el enlace aplicaremos la opacidad sobre la imagen habiendo utilizado jQuery.

Conversación » Grupos de Conversación sobre Programación en Facebook

marzo 30, 2012 por Víctor Cuervo 17 Comentarios Imprimir Imprimir

Suelo utilizar los grupos de Facebook sobre tecnologías y programación de forma habitual (así como los de LinkedIn) para compartir experiencias, publicar ejemplos y encontrar ejemplos nuevos, coger ideas,... creo que la conversación que se crea en ellos es bastante útil.

Si bien, hace un mes o algo más un grupo de personas (evitaré dar nombres) indicaron en algunos de los grupos que o bien solo se podía hablar en ingles (yo ya lo hacía) o bien los enlaces solo podían estar en inglés (yo compartía enlaces en español).

Después de una serie de conversaciones con ciertos administradores parte accedieron a que los artículos estuviesen en español y otros no. Ese fue el momento en el que me dí cuenta que no existía una comunidad de grupos de conversación sobre programación en Facebook que fuesen en español.

Es por ello que me decidí a crearlos. Sus reglas son fáciles y sencillas. Se recomienda que la conversación sea en español (da igual la nacionalidad de la que seas) y los enlaces que compartas pueden estar en cualquier idioma. Si están en español mejor que mejor, si no, pues tenemos muchos traductores en la web para traducirlos.

Hay que asumir que la lengua casi materna de Internet es el inglés. Aunque desde Línea de Código y todas las webs de Aulambra siempre hemos intentado crear una comunidad hispanoparlante alrededor de la tecnología y la programación. Por eso, seguimos buscando colaboradores que se quieran embarcar en esta aventura.

Los grupos que hemos creado son:

Si se te ocurre alguno más solo tienes que ponerlo en estos comentarios y lo crearemos.

En el paso de las semanas iremos asignando administradores a las personas que más activas se muestren (no es nuestra intención el coartarlos, queremos que crezcan libres) y en Línea de Código intentaremos ir haciendo un resumen de la actividad que la conversación de los grupos de Facebook sobre programación en español genere.

Sin más, animaros a participar en ellos. Están teniendo muy buena aceptación.

CSS » Definir el ancho de una capa con CSS

septiembre 11, 2010 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

Una de las mejores formas de maquetar nuestras web es utilizando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra hay que tener en consideración.

Las estructura de nuestro documento HTML podría ser la siguiente:

  1.  
  2. <!-- Capa 1 -->
  3. <div id="equipos">
  4. <h2>Equipos</h2>
  5. Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis.
  6. </div>
  7.  
  8. <!-- Capa 2 -->
  9. <div id="goleadores">
  10. <h2>Goleadores</h2>
  11. Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo.
  12. </div>

Como podemos ver, tenemos dos capas (la de equipos de fútbol y la de goleadores). Una cosa importante es que hemos dado un ID a las capas. Ya que mediante ese ID vamos a dar un ancho a dichas capas.

Si queremos definir el ancho de una capa con CSS deberemos de utilizar el atributo width. Así nuestra hoja de estilos CSS quedará de la siguiente forma:

  1. <style type="text/css">
  2. #equipos{
  3. width:100px;
  4. background:red;
  5. }
  6. #goleadores {
  7. width:100px;
  8. backgorund:blue;
  9. }
  10. </style>

Vemos que utilizamos los valores de los ID precedidos de una almohadilla (#) para dar el estilo CSS al elemento.

Hemos añadido un fondo a la capa, mediante el atributo background, con el fin de poder apreciar que hemos dado a las capas un ancho de 100px.

Inicialmente podríamos decir que ya tenemos resuelto nuestro problema y que era sencillo definir el ancho de una capa con CSS.

Veamos una captura de la imagen...

Bueno, viendo el resultado, quizás me asalten algunas dudas:

  • El texto "Goleadores" se sale de la capa. ¿Cómo debería de quedar ajustado?
  • Las capas están una debajo de otra. Yo pensaba que al definirlas un ancho, se situarían una detrás de otra.
  • ...

De momento dejamos definido el ancho de las capas con CSS. En siguientes artículos iremos viendo como ajustar esos pequeños detalles.

Noticias Web » La W3C crea el Web Performance Working Group

septiembre 1, 2010 por Víctor Cuervo 2 Comentarios Imprimir Imprimir

La W3C ha decidido crear el grupo Web Performance Working Group con el fin de estandarizar la forma de medir el rendimiento de los agentes de usuario.

Esto viene derivado del creciente desarrollo de aplicaciones más sofisticadas, con funcionalidades RIA y APIs de diferente índole. Con el fin de poder establecer una serie de métodos que faciliten el análisis del rendimiento.

Este nuevo grupo estará alineado con las tecnologías que rodean la W3C como HTML, SVG, CSS, WebApps,...

Leer la noticia en W3C...

JavaScript » Cambiar estilos dinámicamente

septiembre 12, 2009 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Desde que se pueden aplicar hojas de estilos en las páginas web se ha entrado en una dinámica en la cual los elementos de la página cambian de color, forma, aparecen y desaparecen, atendiendo a eventos de la propia página. Estos cambios son posibles gracias a que se pueden modificar las propiedades del estilo de un elemento.

Si queremos cambiar el estilo de un determinado objeto de la página dinámicamente. Entendiendo como objeto, cualquier elemento de la página identificado mediante un ID. Tenemos dos posibilidades:

Cambiar una a una cada una de las clases asociadas al estilo. Por ejemplo, el siguiente código realiza dicha función...

  1. objeto.style.color='#003366';
  2. objeto.style.fontFamily='Verdana,Arial,Helvetica,sans-serif';
  3. objeto.style.fontSize='12px';
  4. objeto.style.textDecoration='none';
  5. objeto.style.backgroundColor='#419ad4';

O bien, aplicar un estilo directamente sobre el objeto. Esta segunda forma es mucho más rápida y eficiente. Además, nos permite tener controlados los estilos de la aplicación web y que no se defina un nuevo estilo dentro del código de la página. En este caso deberemos de asignar un estilo a la propiedad className del objeto...

  1. objeto.className='estilo';

El estilo puede estar definido directamente en la misma página o importado de una hoja de estilos. Cuando queremos aplicarselo a un objeto del documento utilizamos el ID y el método .getElementById() para acceder al elemento. La función Javascript genérica quedaría de la siguiente forma:

  1.  
  2. <script type="text/javascript">
  3. function cambiarHojaEstilos (id,estilo) {
  4. document.getElementById(id).className=estilo;
  5. }
  6. </script>
  7.  

jQuery » Modificar el estilo con jQuery

enero 24, 2009 por Víctor Cuervo 7 Comentarios Imprimir Imprimir

Como ya sabemos, jQuery nos permite modificar el DOM de una página web de una forma sencilla. Una de las cosas que nos deja modificar de forma sencilla son los estilos CSS de los elementos.

Lo primero que vamos a hacer es crear un párrafo con texto. A posteriorí, dinámicamente, cambiaremos el color del texto, su tamaño, el color de fondo,... vamos, modificar el estilo con jQuery.

Pongamos el párrafo en HTML:

  1. <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper sem a justo. Aenean metus. Quisque eu purus at leo vehicula laoreet. Aenean et libero. Curabitur rhoncus erat non quam. Sed sodales fringilla diam. Nulla velit sapien, fringilla elementum, ultrices nec, fringilla id, erat. Morbi at nibh eget justo molestie mattis. Ut eleifend dapibus ante. Sed vitae risus in est suscipit congue. Mauris suscipit ligula at lectus.</P>

Además añadiremos un botón, que será el que nos permita modificar el estilo con jQuery. Es importante darle al botón un id, ya que jQuery utilizará el id para asignarle la funcionalidad.

  1. <button id="cambiar">Cambiar estilo</button>

Ahora cargaremos la librería jQuery.

  1. <script type="text/javascript" src="jquery-1.3.1.js"></script>

El código jQuery lo vamos a poner dentro de su función ready. Hay que recordar que la función ready es la que se empieza a ejecutar cuando tenemos cargada toda la página.

  1.  
  2. $(document).ready(function(){
  3. ...
  4. });
  5.  

Mediante la función $() accedemos al botón de la página. Para ello pasamos como parámetro el id del botón precedido de una almohadilla (#). El evento que disparará el resto del código será click.

  1.  
  2. $("#cambiar").click(function() {...}
  3.  

Ya solo nos queda poner el código que nos permite modificar el estilo con jQuery. Esto lo conseguimos con la función .css. Esta función nos permite pasarle por parámetro los atributos CSS que queremos modificar.

  1.  
  2. $("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
  3.  

Hay que ver tanto los atributos CSS como los valores asignados van entre comillas.

El código para modificar el estilo con jQuery completo sería:

  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("#cambiar").click(function() {
  5. $("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
  6. });
  7.  
  8. });
  9. </script>
  10.