Archivo para Enero, 2009

Promociona tu web

29 de Enero de 2009

Si estáis pensando en realizar una página Web, seguro que os surgen un montón de dudas de como llevar a cabo el tema. Un de ellas puede ser como dar a conocer la Web y conseguir el máximo de visitas posibles. Muchas técnicas hay para mejorar el posicionamiento (SEO), para indexar la página lo más arriba posible en Google. A modo de anécdota,  es para comentar una página Web surgida aprovechando el éxito de Youtube en el que han aprovechado el nombre para dar salida a este proyecto.  Se trata de YouDoLink, ¿en qué consiste?, simplemente tu tienes tu página Web , vas a esta página entras la url una descripción y tu correo electrónico, entonces esta página lo que hará es proporcionarte 20 minutos de gloria. Hay un ranking de 20 páginas web que se muestran a modo de listado en el que se ocupa una posición cada minuto, el primer minuto estarás en la posición número 20 y último minuto estarás en las posición número 1. Esto puede servir para conseguir usuarios que entren y conozcan tu página web. Y si es una buena página tal vez esto puede generar que el numero de visitantes se multiplique exponencialmente.

jQuery Calculator, la calculadora definitiva

28 de Enero de 2009

En la mayoría de aplicaciones de gestión es muy últil disponer de una calculadora para introducir nuevos datos en un formulario o para realizar pequeñas comprobaciones. Si además podemos disponer de una calculadora dentro de la interfaz del programa y accesible vía un icono o al hacer click sobre un input, pues mejor que mejor. Hoy os presento jQuery Calculator.

Aspecto por defecto

Aspecto por defecto

Uso

1.Incluir jQuery

2.Descargar el plugin jQuery Calculator (v1.0.0) e incluir los archivos necesarios en la página

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

3.Realizar la invocación (ver más ejemplos)

$('input').calculator();

$('input').calculator({showOn: 'button'});

Se puede invocar desde un botón, una imágen, al hacer focus sobre un elemento. Además podemos personalizar la animación: show, slide, slideDown, fade… (gracias a jQuery UI).

Localización

jQuery Calculator además está disponible en varios idiomas, entre ellos, el español.  Basta con agregar el archivo de idioma correspondiente y cargar la calculadora indicando el idioma cómo parámetro de la llamada:

<script type="text/javascript" src="jquery.calculator-es.js"></script>
$('#l10nCalc').calculator($.calculator.regional['es']);

Estilos CSS

Por defecto, los colores y elementos gráficos de jQuery Calculator, la verdad, són un poco sosos, pero por suerte disponemos de una extensa guía de diseño para darle nuestro toque personal modificando el CSS directamente para conseguir darle algo más de vida.

)

Mismo plugin + CSS modificado = Nueva calculadora :)

Funciones Extra

jQuery Calculator es más potente de lo que parece a simple vista, podemos trabajar con diferentes bases, podemos añadir más botones y funciones a la calculadora para adaptarla 100% a lo que queremos hacer con ella, además de definir los callbacks adecuados para tratar los resultados obtenidos y ya se me olvidaba, también tiene funciones de “memória”.



Instalación de nuevos servidores

28 de Enero de 2009

Recientemente hemos realizado la sustitución de los anteriores servidores de una empresa por 5 nuevos servidores HP de la gama ProLiant DL y uno de la gama ProLiant ML todos ellos con procesador Intel Xeon Quad.

El desorden era evidente con la instalación anterior

El desorden era evidente con la instalación anterior

Aprovechando el cambio todos ellos se han instalado en un armario destinado especialmente para ellos, que además contiene instalado un switch (10/100/1000) de 24 puertos Dlink y un dispositivo KVM de 16 puertos.

Vista frontal del armario

Vista frontal del armario

El armario es de la marca Gesab con capacidad para 42U además dispone de un gran ventilador en la parte superior, con un flujo de aire de 1030m3/h. Al armario se le colocó una bandeja fija para soportar un monitor y una bandeja extensible para colocar el teclado y otros periféricos necesarios para la administración in-situ de los servidores.

Vista del KVM y del primer servidor instalado

Vista del KVM y del primer servidor instalado

Para mayor y mejor refrigeración, la habitación de los servidores dispone de aire acondicionado las 24 horas del día para evitar sobrecalentamientos.

Unidad DDS SAS de copia de seguridad interna

Unidad DDS SAS de copia de seguridad interna

Ya sólo faltan 2 servidores por instalar

Ya sólo faltan 2 servidores por instalar

Select con imágenes de fondo para internet explorer

26 de Enero de 2009

Hace un par de semanas escribimos un post, de como poner imágenes de fondo en un Select, pero el método que se explicó se podía aplicar solamente a las combos para firefox. Entonces se nos comentó como se podría hacer para dar soporte a internet explorer. Para conseguir aplicar esto para este navegador, necesitaremos la ayuda del javascript y una de sus librerias, en concreto una llamada jDrop (aquí adjuntamos el enlace de la página): http://doctorfilter.com/jDrop/. Aquí nos podremos descargar un paquete con todo lo necesario en un .zip comprimido.

A continuación  debrmos incluir los js i los css correspondientes para poder aplicar esta libreria, en este caso incluiriamos estos casos en el head:

<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-personalized-1.5.1.packed.js”></script>
<script type=”text/javascript” src=”js/jquery.dimensions.js”></script>

<script type=”text/javascript” src=”js/jquery.jdrop.js”></script>
<link rel=”stylesheet” media=”screen” type =”text/css” href=”css/screen.css” >
<script type=”text/javascript”>
$(document).ready(function(){
$(”select”).jdrop()
$(”.dragDiv”).css({top:’100px’}).draggable()
})
</script>

Seguidamente al select le debemos poner la clase class=”comboJDrop”. Finalmente en cada una de las options del select se debe poner un atributo html en el que adjuntaremos la ruta de la imagen que pertenece a la opción, pero teniendo en cuenta que debe estar incuida enel tag img de HTML. Ver ejemplo:

<select name=”prova” style=”width:150px;” class=”comboJDrop” >
<option value=”1″ html=”<img src=’styles/imgs/checked.gif’ />”>Opción 1</option>
<option value=”2″ html=”<img src=’styles/imgs/calendar.png’ />”>Opción 2</option>
<option value=”3″  html=”<img src=’styles/imgs/page_go.png’ />” >Opción 3</option>
<option value=”4″  html=”<img src=’styles/imgs/anterior.gif’ />”>Opción 4</option>
</select>

Finalmente mostraremos el resultado que se puede obtener en internet explorer para esta combo:

Dale un toque de estilo a las imágenes de tu Web.

23 de Enero de 2009

Prácticamente todas las páginas Web constan de galerias de imágenes o de imágenes que ilustran los contenidos de la Web. Dependiendo de la página las imágenes se pueden mostrar de diferentes maneras. Hoy en día se puede mostrar con carruseles de javascript, animaciones, slide show, también tenemos el Light Box (el famoso efecto que se usa para ampliar las imágenes de la Web). Hoy os voy a proponer una manera un poco más original de poder mostrar las fotos que salen en cualquier página Web que esteis desarrollando. Hoy en día que parece se van a quitar del mercado las camaras Polaroid, siempre es un buen momento para recuperar el formato de esas míticas fotografias. La dirección a la que teneis que acceder es la siguiente:

http://www.netzgesta.de/instant/

Ya veréis que su uso es muy simple,  se debe descargar unas librerias en javascript y incluirlas en el head del fichero. Finalmente sólo se debe incluir una class a la imagen (tag img).

class = “instant itiltleft icolorFFFCE9 ishadow40 historical” para que la imagen se vea como sifuera antingua.

class = “instant nocorner itxtalt” para polaroid con esquinas redondeadas

class = “instant itxtalt” papa polaroid con las esquinas quadradas

class = “instant” para tener la imagen con margen en blanco

Simplemente acceded a la página, bajad el paquete de javascript y haced pruebas a ver si algun formato os convence.

Los Cinco Elementos Básicos de Diseño Web

16 de Enero de 2009

Los elementos y principios básicos que participan en diseño web son aplicables para todos los demás tipos de diseño. Estos principios le mostrarán de forma eficaz como reunir los diversos elementos de diseño para obtener un buen resultado.

El balance es la distribución igualitaria de los elementos ligeros y pesados en una página por separado. Usted debe conseguir el equilibrio visual en el diseño de su web en oda la página, no sólo en la vista inicial.

Hay tres tipos de equilibrio que pueden lograrse cuando se diseña una página.

* Simétrico. Esto se logra mediante la colocación de todos los elementos en una forma – un elemento fuerte de la izquierda se corresponde con otra de la derecha.

* Asimétrico. Estos son más difíciles de construir, pero hay estrategias para lograr este objetivo que puede incluir la variable de textura, color y tamaño de imagen y posicionamiento para llegar a una agradable vista de la página.

* Discordantes. Estos sitios Web que están fuera del equilibrio sugieren acción o movimiento, por lo que puede crear discordacia.

El contraste es algo más que unos colores como blanco y negro, también implica contrastar formas, tamaños y texturas. Puede sacar el máximo provecho de contraste al cambiar el tamaño de la fuente, el peso y la familia y cambio de texto y también las imágenes de diferentes tamaños y elementos. Sin embargo, tenga cuidado de no hacer saltar por los aires a sus lectores o asustarlos con colores contrastantes.

El énfasis implica saber colocarlo en los puntos principales que queremos destacar. Tenga en cuenta que si todo el diseño tiene el mismo énfasis, la totalidad de página suelen aparecer demasiado ocupada y puede terminar siendo caótica. Debe centrarse en crear una jerarquía visual del diseño y poner énfasis sólo en los elementos que quiere que destaquen mas.

El ritmo, también conocido como la repetición, aporta la tan necesaria coherencia interna en su sitio web. Casi todos los elementos en su diseño se pueden repetir con el fin de crear un ritmo agradable. Por ejemplo, puede repetir el título un par de veces para obtener más énfasis, repetir la misma imagen a través de la página, crear un fondo o repetir un estilo particular para proporcionar un diseño del sitio con coherencia.

La unidad, también considerada como proximidad, es lo que mantiene todos los elementos similares en el sitio por igual y los más diversos entre sí. La unidad cuando se trata de diseño web se consigue principalmente a través de la correcta colocación en la disposición. Usted puede aplicarla de muchas maneras. Puede, por ejemplo, ajustar el diseño de sus elementos para ponerlos cerca o muy lejos el uno del otro. En el cuerpo de su página, puede cambiar el espaciado alrededor del texto en su página de contenidos.

Como el diseñador, es importante que conserve estos elementos en cuenta y los aplique de manera adecuada a su página web.

Validar el código HTML completo de nuestro blog Wordpress

15 de Enero de 2009

Que el HTML de nuestro blog o cualquier página web sea válido es el primer paso para conseguir que funcione como esperamos (especialmente en dispositivos típicamente poco flexibles como son los teléfonos móviles u otros dispositivos de nueva generación).

Un código correcto es una buena muestra de rigor de cara a los usuarios y a nosotros mismos, si son las normas estandarizadas de la web, ¿por qué no cumplirlas?.

El problema es mantener esa validez post tras posts, he explico, si nuestro código de la plantilla es válido, no significa que lo vaya a ser siempre, ya que a veces ocurre por integrar objetos incrustados mal codificados (vídeos de YouTube, galerías fotográficas, etc.) ya no valida como debería.

Ejemplo de validación

Ejemplo de validación

Para verificar la validez de todas y cada una de las entradas de nuestro blog viene tenemos Validated para WordPress, es tan sencillo como instalarlo y ponerlo a trabajar para descubrir todas las entradas con problemas.

Además este plugin nos enlaza directamente con el validador de W3C para ver el detalle de los fallos de cada entrada y así saber donde tenemos los problemas y poder remediarlo.

Lanzamiento de jQuery 1.3

15 de Enero de 2009

Los chicos de jQuery (uno de los mejores framewoks javascript), han lanzado una nueva versión en los últimos días. Se trata de la versión 1.3.

En esta nueva versión de jQuery se ha visto incrementada sustancialmente la velocidad en la mayoría de aspectos. Básicamente la mejora de velocidad de ha mejorado cambiando el selector de elementos, ahora se utiliza Sizzle. Por otro lado se ha reescrito la inyección de HTML haciendo hasta 6 veces más rápida esta.

Para conocer más sobre esta versión de jQuery no olvides visitar la documentación oficial.

Descargar

jQuery Minified / jQuery Regular


Select con imágenes de fondo

13 de Enero de 2009

Uno de los controles más utilizados a nivel web son los selects o también llamados combos. Se usan constantemente en formularios (para que los usuarios introduzcan sus datos), en listados (para determinar que filtro lequeremos aplicar al listado), etc… De hecho este control nos permite dar opciones a los usuarios de interactuar con la página Web, pero  a la vez al ofrecer opciones acotadas al usuario para escoger, es una manera mucho mas segura (en el sentido de evitar errores en la web, o evitar injección de codigo sql) de lo que lo es un campo de texto.

En esta ocasión cito a las combos para comentar como se puede hacer para que estas tengan un estilo más elegante o más visual o más intuitivo con las opciones que ofrece a los usuarios de la aplicación. A parte de ver la apliación de estilos a un select, la idea es la de introducir imágenes a cada uno de los elementos que podremos seleccionar.

En primer lugar vamos a definir una combo con 4 opciones distintas, a cada una de las opciones vamos a asignarle un identificador para poder asociarle estilos distintos a cada una de ellas.

<select name=”prueba” style=”width:150px;” >
<option id=”opcion1″>Opción 1</option>
<option id=”opcion2″>Opción 2</option>
<option id=”opcion3″>Opción 3</option>
<option id=”opcion4″>Opción 4</option>
</select>

Una vez ya tenemos el select definido con las 4 opciones distintas y los identificadores asociados a cada una de ellas, ya podemos pasar a tratar los estilos que darán un toque especial a este habitual control. Vamos a poner una posible hoja de estilos para este select, y a continuación, comentaremos lo que se está tratando.

<style type=”text/css”>
SELECT{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #666666;

}
#opcion1 {
background-image: url(/styles/imgs/checked.gif);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion2 {
background-image: url(/styles/imgs/calendar.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;
}
#opcion3 {
background-image: url(/styles/imgs/page_go.png);
background-repeat:no-repeat;
padding-left:25px;
line-height:50px;
margin-bottom:2px;

}
#opcion4 {
background-image: url(/styles/imgs/anterior.gif);
background-repeat:no-repeat;
padding-left:25px;
margin-bottom:2px;
}
</style>

En primer lugar le damos estilo a toda la combo con la etiqueta SELECT que hace referencia al tag en cuestión. Simplemente le asignamos un estilo de fuente, tamaño y un borde de 1píxel de un color concreto, que aunque no lo parezca dará una toque elegante al elemento. A continuación tenemos los estilos asociados a cada una de las opciones. De hecho son todos iguales, lo único que varia son las rutas de las imágenes de fondo que se usarán para cada una. Designamos que esta imagen no se repita para que no se confunda con el texto de la opción (ya que en este caso combinaremos texto e imagen).  El padding-left se usa para que el texto de la opción empiece justo después de la imagen evitando solapaciones. Finalmente tenemos un margin bottom de 2 píxels que simplemente lo usamos para que haya una mínima separación vertical entre opciones. Finalmente mostraremos una posible imagen final de lo que podria ser este select.

Optimizar imágenes sin perder calidad con Smush.it

10 de Enero de 2009

Con Smush.it con solo tan solo un click, mediante la instalación de una extensión del Firefox o a través de una URL o un Uploader, se puede optimizar las imágenes de un sitio Web sin perder su calidad. Solo exprimiendo al límite los bytes que la componen.

Es muy fácil de usar:

  • Podemos entrar en la Web de Smush.it y subir nuestras imágenes con el navegador Web.
  • Utilizar el Bookmarklet de Smush.it, lo que le permite a extraer todas las imágenes de la Web que estamos viendo.
  • Entrar en la Web de Smush.it y escribir las URL de nuestras imágenes.
  • O usar la extensión de Firefox de Smush.it, que con tan solo un click pasa todas las imágenes de la Web que estamos viendo a Smush.it para que las procese en cuestión de segundos.

Viendo la portada de la Web de A2SISTEMAS y activando con un click el plugin del Firefox de Smash.it, podremos apreciar el resultado de la optimización de las imágenes de la portada en la siguiente captura:

Resultado de la optimización con Smush.it

Resultado de la optimización con Smush.it

El resultado representa un ahorro de casi un 10% del peso total de todas las imágenes. Un verdadero revés a la optimización cotidiana, teniendo en cuenta que todas y cada una de la imágenes que componen esta portada fueron debidamente optimizadas para ganar en tiempo de carga sin perder su calidad con programas de edición de imágenes profesionales como el Gimp y el Photoshop.

También podemos apreciar que al final del listado, la última imagen estaba en un formato GIF que Smush.it automáticamente ha convertido al formato PNG. Lo que no representa un problema, pero sí un cambio, ya que tendríamos que actualizar el HTML para actualizar a este nuevo formato. ¡Es la hora de dejarnos de GIF!

El resultado es una carpeta comprimida con todas las imágenes optimizadas, que se descarga del sitio Web de Smush.it. Así de fácil.