Top 10 – Páginas criollas – Julio 2009

Este es el top 10 de páginas criollas (de República Dominicana) para Julio 2009.

Al parecer, el rediseño del website del Banco Popular Dominicano ha incrementado las visitas, mientras que el diario El Nacional e Emarket.com.do han ido perdiendo popularidad.

Los datos y parámetros considerados para realizar este top son proveidos por Alexa. El top es realizado según las visitas de usuarios únicos desde la República Dominicana a sitios criollos.

Si tienes alguna duda puedes escribirme en los comentarios.

jQuery tip: obtener el valor de un radio seleccionado

En un artículo anterior estuve comparando como obtener el valor de un option seleccionado con JavaScript puro y jQuery. Ahora, les muestro como podemos obtener el valor de un radio seleccionado via jQuery, pero primero veamos como lo hacíamos en JavaScript puro, considerando que estamos utilizando el siguiente HTML:

<form>
	<input type="radio" name="vegetales" value="1" /> berenjena
	<input type="radio" name="vegetales" value="2" /> zanahoria
	<input type="radio" name="vegetales" value="3" /> tomate
</form>

Entonces en Javascript puro escribiríamos el siguiente código:

// Obtener el valor de un radio seleccionado via JavaScript puro.
var radios = document.getElementsByName('vegetales');
for (var i = 0; i < radios.length; i++) {
	radio = radios[i];
	if (radio.checked == true) {
		var value = radio.value;
	}
}

Y ahora utilizando jQuery:

// Obtener el valor de un radio seleccionado via jQuery.
var value = $('[name="vegetales"]:checked').val();

Así es, tan solo una línea de código es suficiente para obtener el valor de un radio seleccioando con jQuery gracias a sus selectores.

Para más información sobre los selectores puedes visitar el capítulo 2 de la Introducción a jQuery.

jQuery tip: obtener el valor de un option seleccionado dentro de un select

Frecuentemente algunos de mis colegas y conocidos que comienzan a utilizar jQuery, me preguntan ‘¿cómo puedo obtener el valor del OPTION seleccionado dentro de un SELECT?’. Para algunos de nosotros esto podría parecer fácil pero para otros que programamos en JavaScript puro para poder logrado esto debíamos de escribir el siguiente código (sin jQuery):

// Obtener el valor de un option seleccionado dentro de un select.
window.onload = function() {
    var select = document.getElementById('animales');
    var options = select.getElementsByTagName('option');
    var option = select[select.selectedIndex];
    var value = option.value;
    ...
}

Sin embargo, fíjense que con jQuery lo mismo puede lograrse con el siguiente código:

// Obtener el valor de un option seleccionado dentro de un select
$(document).ready(function() {
    var value = $('#animales option:selected').val();
    ...
});

Voilà, eso es todo. Con esa simple línea puedes obtener el valor del OPTION seleccionado.

Problema 404 en CakePHP (XAMPP)

A continuación describo un problema que me enfrenté durante unos días. El problema es de XAMPP y no de CakePHP pero el comportamiento está descrito y puede ser reproducido utilizando los dos softwares previamente mencionados.

Circunstancias:

Problema:

Acabas de instalar XAMPP como de costumbre y creas un proyecto desde cero utilizando CakePHP. Configuras tu aplicación correctamente modificando el ’security salt’, y editando la conexión a la base de datos y lo demás. Cuando intentas acceder una acción de tus controladores recibes un error 404 de igual manera para los archivos remotos en JavaScript o CSS.

Solución:

Volver a instalar XAMPP utilizando el siguiente código:

tar xvfz xampp-linux-1.7.1.tar.gz -C /opt

Explicación:

Es esencial pasar al comando tar los parámetros xvfz ya que todos significan: extrae verbosamente los archivos filtrando por gzip. Mas detalles:

  • x – Extrae algo (se debe de espificar qué extraer).
  • v – Muestra los detalles de lo que se va extraer.
  • f – Especifica que se extraerá archivos.
  • z – Lo extraido será tratado como formato gzip.

Lo esencial es descomprimir XAMPP tratando sus archivos en formato gzip, de no ser así podrías tener una serie de problemas con tu servidor de aplicaciones.

Cosas que leí

Durante esta semana leí unas cuantas cosas interesantes que quiero compartir:

¡Buen fin de semana!

Utiliza las fuentes que quieras con TypeSelect

TypeSelect - Javascript-based Selectable Typefaces

TypeSelect es un plugin para jQuery que te permite utilizar las fuentes tipográficas que más te gustan. Sin embargo, no es nuevo escuchar que ya existen soluciones como estas desde hace tiempo (véase sIFR, FLIR, Typeface.js, Cufon). Entonces ¿qué características nuevas hay al usar TypeSelect? La más aclamada y todavía no implementada es: la selección del texto. Esto significa que los usuarios ya pueden seleccionar y copiar los textos con fuentes tipográficas customizadas y pegarlas en cualquier lugar, como si fueran un texto cualquiera.

Pueden probar a TypeSelect en acción a través de las demos interactivas.

Glow, otra librería en JavaScript

Glow

Los desarrolladores de BBC han optado por desarrollar una librería en JavaScript llamado Glow. Luego de utilizar y evaluar las diferentes librerías populares (jQuery, prototype, etc…) han llegado a la conclusión de que ningunas de éstas cumplen con los estándares y lineamientos de BBC, siendo el soporte a navegadores el problema principal para ellos.

Glow tiene como objetivo facilitar la interacción de JavaScript con el DOM. Para esto, la librería provee funciones que encapsulan tareas comunes (como animaciones), también aislará los problemas de algunos navegadores menos utilizados (IE5.5, IE6, Safari 1.3) y ofrecerá un paquete de widgets para enriquecer la experiencia de los usuarios.

Es bueno, destacar que no es la primera librería desarrollada por el equipo de la BBC, sino que, desde 1999 ya estaban utilizando sus propias librerías, de las cuales sus códigos estaban ofuscados y no eran compartidos a segundos mediante licencias. Sin embargo, hace poco que decidieron que esta librería originalmente desarrollada por ellos sería open source bajo una licencia de Apache que te permite utilizarla de manera personal o comercial, modificarla y mejorarla.

Puedes visitar la página oficial de Glow, leer la documentación o ver las demos.

7 estilos para tus check boxes

¿Algunas vez has visto unos check boxes diferentes a los que sueles ver? Sea este tu caso o no, te presento 7 formas de “customizarlos” para que tengas los mejores formularios de la web. 

Filament GroupFilament Group

Basado en jQuery, diseño atractivo, están trabajando para agregarle un efecto visual para los enfoques por teclado.

Ryan FaitRyan Fait

Estilo wine MAC, está hecho con JavaScript puro sin ningún uso de frameworks populares.

Widow MakerWidow Maker

Un diseño inspirado en los widgets de los móviles con pantallas táctiles, al estilo Android o el iPhone.

No Margin For ErrorsNo Margin For Errors

Un diseño simple y escrito como plugin para jQuery.

flog.co.nzFlog

Visualmente no parece el mejor, pero tienen una demo con diferentes usos que podrían darte muchas ideas.

Aaron WeyenbergAaron Weyenberg

Muy creativo y diferente a lo que comúnmente han visto, miren la demo para que vean de lo que estoy hablando.

Chris ErwinChris Erwin

Que sea este el último no quiere decir que este sea el peor, personalmente me gusta bastante. Lo único que no me gusta es que no está llevado como plugin a jQuery.

¿Y a ti, cuál te gusta más? o ¿conoces a otras maneras de poner los check boxes originales? Déja tu opinión en los comentarios.

Top 10 – Páginas criollas – Junio 2009

Este es el top 10 de páginas criollas (de República Dominicana) para Junio 2009.

Los datos y parámetros considerados para realizar este top son proveidos por Alexa. El top es realizado según las visitas de usuarios únicos desde la República Dominicana a sitios criollos.

Si tienes alguna duda puedes escribirme en los comentarios.

14 maneras de mostrar fechas de posts

A veces nos sucede que no sabemos como mostrar las fechas de nuestros artículos o posts. Aquí les presento 14 maneras inspiradoras de mostrar las fechas de publicación de artículos.

Learning jQueryLearning jQuery

Este blog tiene una forma muy creativa de desplegar las fechas. De hecho, ha sido mi fuente de inspiración para mariuzzo.com. Este está  basado en la manipulación de imágenes con la conocida técnica de manipulación de sprites en CSS.

Web Designer DepotWeb Designer Depot

Una forma sencilla y diferente de mostrar fechas. Da la impresión que las fechas están fuera del contenido, de seguro el diseñador estaba ‘pensando fuera de la caja’ como se menciona en The Management.

Blog Theme ForestIn the Woods

Diseño clásico de mostrar las fechas al pie de cada artículo. In the Woods suele desplegar la fecha de publicación de sus artículos junto al enlace de los comentarios y otras informaciones relevantes.

MariuzzoMariuzzo

El diseño es una liga de la técnica utiliza en ‘Learning jQuery’ con el estilo de ‘Web Designer Depot’. Ni más ni menos. Es un ejemplo de manipulación de sprites en CSS y ‘pensar fuera de la caja’.

http://garcya.us/blog/Garcya.us

Estructura similar a Mariuzzo. Sin embargo utiliza los colores para contrastar las partes relevantes de las fechas. También tiene en el fondo un diseño vectorial que le agrega estilo.

Web Design Blog by Smiley Cat Web DesignSmiley Cat

Diseño sencillo basado en texto. La fecha estar dentro de los márgenes del contenido del diseño formando parte del título de cada artículo.

A List Apart: A List ApartA List Apart

Muy simple, lo que lo hace diferente es su posición encima de los títulos de cada artículos. Está centrado y delimitado por un borde en CSS.

Meyer WebMeyer Web

Otro diseño no muy espectacular pero diferente. Está alineado a la izquierda y debajo del título de cada artículo.

Snook.caSnook.ca

El diseño de este web site es totalmente original. Y el formato de fecha está adaptado a su estilo. Está alineado a la derecha de los títulos y tiene una apariencia 3D.

ParticletreeParticletree

Formato adecuado para blogs que no suelen publicar muchos artículos durante un mes. Particletree solo muestra el mes y el año en un caja donde una de las esquinas opuestas son redondas.

Design blog by COLOURSloversDesign blog by COLOURlovers

Siguiendo el patrón de In The Woods, COLOURlovers coloca la fecha de publicación de los artículos de su blog al pie de página junto al enlace para comentarios y algunos widget de redes sociales.

Kris ColvinKris Colvin

Diseño muy original de mostrar las fechas sobre una tapa metálica de botella de soda. Está en armonía con los demás elementos de su web site. Esto nos da la idea de que no hay límites para mostrar nuestras fechas.

Matt MullenwegMatt Mullenweg

Julien Morel es el diseñador de este web site, y realmente sabe como llamar la atención en cuanto a detalles pequeños como mostrar las fechas de los artículos en el blog de Matt Mullenweg. El diseño es totalmente genial.

AbduzeedoAbduzeedo

Solo texto para desplegar la fecha junto al autor y debajo del título de los artículos. Una forma diferente de mostrar fechas donde no se quiere llamar mucha la atención.

Con estas muestras podemos aprender que podemos poner una pizca de originalidad a nuestros blogs con tan solo prestar atención en detalles más pequeños como las fechas de publicación de nuestros artículos.

¿Y a ti cuál te gusta más? ¿Conoces otros? ¡Coméntalo!