Este simple post indica cómo solucionar el molesto problema que tenemos al sincronizar nuestro ipod/iphone con itunes en windows.
Es bastante fácil hacerlo, bueno, manos a la obra:
Solo deben ir a "Propiedades de Fecha y Hora" (2 clicks en el reloj) luego a zona horaria, y verificar si está correcta de acuerdo a su zona geográfica.
Ahora el truco; deben marcar o desmarcar el check que dice "Cambiar la hora automáticamente según el horario de verano". Esto dependerá de cómo funcione en su caso, en el mío tuve que marcar el check y santo remedio.
Que fácil no?
domingo, septiembre 14, 2008
martes, agosto 12, 2008
Convertir tamaño de imagenes de píxeles a ems
Los desarrolladores web sabemos que hacer una página es relativamente fácil, pero hacerla cumpliendo la mayoría de las exigencias de las normas internacionales a veces nos da dolores de cabeza, sobre todo al trabajar con medidas relativas como es la em.
Por eso creé este script que convierte los tamaños de las imágenes de una página a ems, sin tener que hacerlo por css, y me he dado cuenta que facilita bastante el trabajo. He pensado también ampliarla a las capas, es decir, nosotros seguir utilizando píxeles y que esta librería se encargue de hacer el trabajo duro, aunque no sé si sería conveniente.
Este script lo creé en la fecha que publico el post, así que si tienen más ideas o reparaciones me informan para cambiarlo.
Algunos datos técnicos:
Descargar convertImgSizes
Por eso creé este script que convierte los tamaños de las imágenes de una página a ems, sin tener que hacerlo por css, y me he dado cuenta que facilita bastante el trabajo. He pensado también ampliarla a las capas, es decir, nosotros seguir utilizando píxeles y que esta librería se encargue de hacer el trabajo duro, aunque no sé si sería conveniente.
Este script lo creé en la fecha que publico el post, así que si tienen más ideas o reparaciones me informan para cambiarlo.
Algunos datos técnicos:
- Utiliza mootools 1.2
- Está basado en yui css foundation, tamaño fuente 13px (aunque se puede cambiar)
- Para no aplicar el script a una imagen determinada deben asiganarle la clase (fantasma) 'no-convert'
- La página debe pasar la prueba w3c.
Descargar convertImgSizes
miércoles, mayo 07, 2008
Reproductor Audio Ubuntu (Audacious+XMMS)
Bueno inicio esta nueva categoría (Ubuntu) ya que me decidí migrar a este SO que me ha impresionado bastante por su rapidez y funcionalidad. Conozco muy poco sobre linux y sus distribuciones pero publicaré mis descubrimientos en este blog para quien le sirva...
Después de una búsqueda con varias decepciones en cuanto a reproductor de música que se parecira bastante al winamp me topé con este simple reproductor pero que con sus pugins podemos hacer muchas cosas. Aunque lo que no he encontrado es la opción de rankear mis temas (asignarle estrellas).
La apariencia es muy similar al winamp y la funcionalidad igual.
Cómo instalarlo:
Primeros debemos instalar el XMMS, abrimos synaptic y buscamos xmms. Les dejo un screen de lo que instalé...
Cuando seleccionen los plugin para audacious les dirá que también es necesario instalarlo, aceptamos.
Si quieren agregar más plugins a audacious, sólo deben buscar en sinaptic 'audacious' y eligen los que quieran, lo mismo con xmms. suerte!
Y si activan los plugin 'echo plugin' y 'Extra Stereo Plugin' no extrañarán al DFX para winamp... ;)
Después de una búsqueda con varias decepciones en cuanto a reproductor de música que se parecira bastante al winamp me topé con este simple reproductor pero que con sus pugins podemos hacer muchas cosas. Aunque lo que no he encontrado es la opción de rankear mis temas (asignarle estrellas).
La apariencia es muy similar al winamp y la funcionalidad igual.
Cómo instalarlo:
Primeros debemos instalar el XMMS, abrimos synaptic y buscamos xmms. Les dejo un screen de lo que instalé...
Cuando seleccionen los plugin para audacious les dirá que también es necesario instalarlo, aceptamos.
Si quieren agregar más plugins a audacious, sólo deben buscar en sinaptic 'audacious' y eligen los que quieran, lo mismo con xmms. suerte!
Y si activan los plugin 'echo plugin' y 'Extra Stereo Plugin' no extrañarán al DFX para winamp... ;)
viernes, abril 18, 2008
Firefox: css background image, height:100%, height:auto SOLUCIONADO!!!
Este es un problema que tenemos cuando queremos darle fondo a una capa con contenido y que en Internet Explorer se ve bien pero en Firefox no, cuando usamos una altura dinámica o al 100%.
Bueno la solución es tan simple que no requiere ejemplo. Sólo deben agregar este atributo al estilo de la clase o identificador:
overflow:auto;
Qué fácil ¿no?
fuente
Bueno la solución es tan simple que no requiere ejemplo. Sólo deben agregar este atributo al estilo de la clase o identificador:
overflow:auto;
Qué fácil ¿no?
fuente
domingo, abril 06, 2008
Haz magia con realtive absolute!!!
Todos sabemos que trabajar con tablas está obsoleto por muchos motivos; accesibilidad, carga de contenido, estándar, etc.
Ahora lo común es usar XHTML strict con CSS. Esto trae muchas ventajas, por la potencia de CSS, pero también nos da muchos dolores de cabeza, y uno de ellos es la posición de los elementos.
Bueno he estado practicando y probando esta técnica por bastante tiempo, y lo bueno es que pasa las pruebas de W3C y accesibilidad, se ve igual en la mayoría de los navegadores (IE 6-7, FF 1-2, Opera, Safari, entre otros) y es muy fácil de aprender a usarla.
La técnica:
Esto no es algo nuevo ni una revolución pero quiero divulgarla por si alguien no la conoce. En mi caso yo la descubrí iterando con los valores de la propiedad position.
El código:
Es muy simple de implementar, debemos usar un div que contenga todo, aplicarle position:relative y darle el ancho del diseño de la página, y a cada div interior position:abolute.
Y si quieren que el contenido se vea centrado sólo deben usar el modo que explico en mi anterior post de centrado.
Que fácil no?!
Si usas Dreamweaver es mucho mas fácil trabajar ya que en modo de diseño sólo arrastras las capas.
Descarga el ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative absolute</title>
<style type="text/css">
#contenedor {
position:relative;
width: 940px;
margin-right: auto;
margin-left: auto;
}
#cabecera {
position:absolute;
top:0px;
width: 940px;
height: 76px;
left:0px;
color: #FFFFFF;
background-color: #003366;
}
#menuIz {
position:absolute;
top:79px;
left:1px;
width: 117px;
height: 163px;
background-color: #CCCCCC;
}
#contenido {
position:absolute;
top:79px;
left:125px;
width: 816px;
height: 163px;
background-color: #99CC99;
color: #333333;
}
#pie {
position:absolute;
top:246px;
left:1px;
width: 940px;
height: 77px;
background-color: #666666;
color: #FFFFCC;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 align="center">Cabezcera</h1>
</div>
<div id="menuIz">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contenido">Contenido del documento...</div>
<div id="pie">
<div align="center">
<h3>Pie de página</h3>
</div>
</div>
</div>
</body>
</html>
Ahora lo común es usar XHTML strict con CSS. Esto trae muchas ventajas, por la potencia de CSS, pero también nos da muchos dolores de cabeza, y uno de ellos es la posición de los elementos.
Bueno he estado practicando y probando esta técnica por bastante tiempo, y lo bueno es que pasa las pruebas de W3C y accesibilidad, se ve igual en la mayoría de los navegadores (IE 6-7, FF 1-2, Opera, Safari, entre otros) y es muy fácil de aprender a usarla.
La técnica:
Esto no es algo nuevo ni una revolución pero quiero divulgarla por si alguien no la conoce. En mi caso yo la descubrí iterando con los valores de la propiedad position.
El código:
Es muy simple de implementar, debemos usar un div que contenga todo, aplicarle position:relative y darle el ancho del diseño de la página, y a cada div interior position:abolute.
Y si quieren que el contenido se vea centrado sólo deben usar el modo que explico en mi anterior post de centrado.
Que fácil no?!
Si usas Dreamweaver es mucho mas fácil trabajar ya que en modo de diseño sólo arrastras las capas.
Descarga el ejemplo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>relative absolute</title>
<style type="text/css">
#contenedor {
position:relative;
width: 940px;
margin-right: auto;
margin-left: auto;
}
#cabecera {
position:absolute;
top:0px;
width: 940px;
height: 76px;
left:0px;
color: #FFFFFF;
background-color: #003366;
}
#menuIz {
position:absolute;
top:79px;
left:1px;
width: 117px;
height: 163px;
background-color: #CCCCCC;
}
#contenido {
position:absolute;
top:79px;
left:125px;
width: 816px;
height: 163px;
background-color: #99CC99;
color: #333333;
}
#pie {
position:absolute;
top:246px;
left:1px;
width: 940px;
height: 77px;
background-color: #666666;
color: #FFFFCC;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">
<h1 align="center">Cabezcera</h1>
</div>
<div id="menuIz">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="contenido">Contenido del documento...</div>
<div id="pie">
<div align="center">
<h3>Pie de página</h3>
</div>
</div>
</div>
</body>
</html>
miércoles, marzo 12, 2008
Botones accesibles
Explicaré como hacer un botón con comportamiento sin perder la accesibilidad.
Existen varias maneras de crear un botón con rollover, por ejemplo con javascript y/o css.
Bueno la pregunta es ¿Que pasa si el navegador no soporta javascript?. Usamos CSS.
¿Y si tampoco soporta CSS? ¿Se nos acabaron la opciones?
Aquí una solución simple:
En realidad seguimos usando CSS pero preocupandonos de que el link siga "visible" aún si el navegador no soporta CSS.
EL código HTML:
El CSS:
Explicación
El truco es la utilización de la etiqueta span, ya que al utilizarla tenemos la seguridad de que el usuario podrá ver el botón incluso cuando su navegador no soporte CSS.
Además estamos generando codigo compatible con las exigencias del W3C y WCAG AAA, algo muy importante en estos tiempos.
Para este ejemplo usé un botón pero puede ser aplicado a varios elementos con una clase CSS.
Deben preocuparse de que el tamaño del link debe ser igual que la imagen a utilizar.
Descarga el ejemplo
Existen varias maneras de crear un botón con rollover, por ejemplo con javascript y/o css.
Bueno la pregunta es ¿Que pasa si el navegador no soporta javascript?. Usamos CSS.
¿Y si tampoco soporta CSS? ¿Se nos acabaron la opciones?
Aquí una solución simple:
En realidad seguimos usando CSS pero preocupandonos de que el link siga "visible" aún si el navegador no soporta CSS.
EL código HTML:
<a href="#" title="Click Acá!" id="miBoton"><span>Click Acá!</span></a>
El CSS:
<style type="text/css">
#miBoton {
background-image: url(botonAccesible.gif);
height: 30px;
width: 130px;
display: block;
}
#miBoton:hover {
background-image: url(botonAccesibleH.gif);
}
#miBoton span {
display: none;
}
</style>
Explicación
El truco es la utilización de la etiqueta span, ya que al utilizarla tenemos la seguridad de que el usuario podrá ver el botón incluso cuando su navegador no soporte CSS.
Además estamos generando codigo compatible con las exigencias del W3C y WCAG AAA, algo muy importante en estos tiempos.
Para este ejemplo usé un botón pero puede ser aplicado a varios elementos con una clase CSS.
Deben preocuparse de que el tamaño del link debe ser igual que la imagen a utilizar.
Descarga el ejemplo
martes, febrero 26, 2008
Mootools, ¡Que Fácil!
Colegas les dejo un archivo de ejempplo de cómo usar esta fantástica librería.
No es un manual de uso o un tutorial, sólo un ejemplo más de los tantos que hay. Solo deben ser observadores y se darán cuenta lo fácil que es manipular este framework.
Los métodos que utilicé:
Si saben manejar bien CSS no tendrán muchos problemas al utilizar mootools ya que los efectos trabajan sobre las propiedades de estilo de los elementos.
Además fijense que no toqué el html para añadir eventos, la libreria se encarga de eso, quedando una página más limpia y estandar.
No quiero decir que esta es la unica y mejor, pero luego de probar y tratar de aprender a usar otras me quedo con esta. Imagínense sólo me costo unas horas para entender la lógica y empezar a jugar con la librería.
Y una de las cosas que encontré muy buena fue que puedes mezclarlo con javascript directamente, cosa que con otros frameworks no lo puedes hacer.
El archivo:
Ejemplo mootools
Y mi del.icio para compartir lo que he encontrado:
http://del.icio.us/porquero/mootools
Suscribirse a:
Entradas (Atom)