nnatali

Enganchada a las series! necesito más!!

nnatali — Mon, 30 Jun 2008 15:39:29 +0000

Ya no me interesa la televisión para nada! En este mes lo único que he visto de la televisión ha sido el discovery channel (cazadores de mitos, sobrevivir en panamá,..) algún fin de semana en casa de mi amorsito y los tres últimos partidos de la Eurocopa (¡olé por españa!).. y para mí eso es increible!

Pero no lo puedo remediar, hay una cantidad de series buenísimas por internet (están por más sitios pero internet es mi proveedor xD) que me tienen super enganchada!

Estoy a la espera de nuevas temporadas de:
House: Que pasada los dos últimos capítulos de la cuarta temporada, me encanta el borde de House y me dió muchiiiiiiiiiiiiisima pena que muriera Humbert! Se me saltaban las lagrimas y todo :_(
Prison Break: Estoy deseando que empiece la cuarta temporada y es una mierda que hayan matado a Sara Tancredi! Quiero que vuelta Sara! Vuelve vuelve!
Heroes: Que cortitas se me hacen las temporadas de Heroes, y Sylar que siempre está metido en todos los berengenales.. pero que bien me cae xD

Y enganchadísima viendo los capítulos de:
Kyle XY: Con este me he quedado a medias, tengo los últimos capítulos de la segunda temporada en lista de espera pero en nada los continúo!
La teoría del Big Bang (The Big Bang Theory): Que frikada de serie! jaja me encanta, me río muchísimo y me siento reflejada en muchas cosas (de la chica y de los vecinos.. tengo una mezcla más mala xD)! Lástima que sólo he podido ver los 4 primeros capítulos, pero ya me estoy bajando toda la temporada en inglés.. vivan los subtítulos!
Sin cita previa (Private Practice): Hace tiempo me enganché a Anatomia de Gray.. y la verdad Allison no me caía nada bien.. pero ahora que se ha independizado y tiene una sería propia me cae genial.. aunque mi preferido en la serie es Paul Adelstein, desde que lo ví en Prison Break me chifló y en este personaje me gusta más : )

Y…. tengo los capítulos listos, pero a falta de tiempo, para ver Perdidos (me va a tocar maratón con tantas temporadas pendientes xD) y Dexter!

La verdad, con tanta basura en la televisión la mejor opción son las series (extranjeras).

¿Alguien más enganchado a las series?

Javascript vs CSS: Rollover de imágenes

nnatali — Mon, 16 Jun 2008 21:28:18 +0000

A la hora de hacer un rollover de una imagen, ¿qué es mejor? ¿Javascript o CSS? Estas preguntas las he visto en muchos sitios y me apetece dar mi versión ^^

De primeras creo que los dos métodos son geniales, sólo que hay que adaptarlos a su caso, vamos a ver los dos:

Rollover con CSS viene muy bien para una o unas cuantas imagenes, sin enlaces, ya que nos ahorramos tener que programar una función (tres en este caso) y resulta mucho más fácil de manipular.

Para hacer un rollover con css vamos ha hacer aparecer ésta cómo fondo de un bloque. El html:

Puedes ponerle el nombre que quieras, igual que si prefieres una ‘clase’ a una ‘id’. El css:

#miavatar {
width: 178px;
height: 178px;
background-imagen: url(imagena.jpg);
}
#miavatar:hover {
background-image:url(imagenb.jpg);
}

Con ‘hover’ especificamos que está el cursor encima de ese div.
El ejemplo de lo que acabo de poner sería tal que así..

(*) Aprovecho para poner mi careto en manga que está tanto de moda.. xD

Un problema de aplicar rollover a través de css es que si cargamos muchas imágenes (y pesadas) para que aparezcan, tardarán más de la cuenta en aparecer, por lo que cuando se pase el ratón por encima no aparecerán al momento, sino que tardarán.

Bueno, paso a la otra acera, rollover de imágenes con Javascript. Este es imprescindible cuando queremos cambiar una imagen sin que sea fondo, sino a través de la etiqueta img (muy útil si tenemos la imagen enlazada a alguna url).

Lo primero añadir las funciones dentro del , no són cosecha mía, éstas funciones las puedes encontrar en multitud de páginas, pero cómo funcionan realmente bien, voy a ahorrarme tiempo en reinventar lo inventado

La primera función la necesitaremos en la tercera, para que cree un objeto javascript de nuestras imagenes a cargar y así no tener que esperar a que aparezcan cuando pasemos el ratón por encima, de aquí no tenemos que modificar nada:

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

En la segunda es donde está la chicha, aquí se indica que se tiene que hacer el cambio de imagen:

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

Y en la tercera y última, indicamos las imagenes que se tienen que cargar al entrar en la página, se pueden poner tantas cómo quieras, cada una con un nombre distinto, eso sí.

var preloadFlag = false;
function preloadImages() {
if (document.images) {
imagenb = newImage(”imagenb.jpg”);
preloadFlag = true;
}
}

Por último indicamos que se cargen al entrar en la web:

window.onLoad=preloadImages();

Y este es tódo el código que iría en nuestro head, una vez puestas las funciones ya podemos usarlas en todas las imágenes que queramos, adaptándolas de esta forma:

Donde imagena es la imagen que aparece por defecto, e imagenb la que aparece al pasar el ratón por encima, recordad que cada imagen (y su enlace) deben de llevar un ‘name’ único, mientras se vayan añadiendo más, hay que ponerles nuevos ‘names’.
También decir que onmouseover aplica la función cuando está el ratón por encima y que onmouseout lo hace cuando el ratón sale de encima..

Y.. creo que no me dejo nada, el ejemplo de javascript no lo pongo ya que es practicamente “igual” al de css.. supongo que os haréis una idea

Pixar: saltar, saltar y el cielo tocar!

nnatali — Sat, 14 Jun 2008 23:01:05 +0000

No puedo remediarlo, por más que tenga años y lo haya visto 100 veces.. me encanta este corto!
En cuanto empieza me da por cantar y saltar! jaja

Que suerte que hay conejílopes aquí! xD

Web: estándares (w3c) y accesibilidad (taw)

nnatali — Sat, 14 Jun 2008 22:42:07 +0000

Hoy en día hay que tener en cuenta muchas cosas a la hora de comenzar a programar/maquetar una web (nada de abrir el dreamweaver y arrastrar elementos por favor!!), desde seguir unos estándares para validar nuestro código hasta comprobar la accesibilidad de todos los elementos, ya que no queremos que ningún usuario se quede sin poder ver nuestro contenido..

Para que eso no ocurra voy a intentar ayudaros a resolver algunos problemas que aparecen cuando se mide la accesibilidad de una web, recomiendo tener los estándares w3c y el test de accesibilidad taw (o en su caso los complementos para firefox ^^) siempre a mano mientras vas metiendo código, ya que ir resolviendo los conflictos mientras van apareciendo es mejor que tener la web lista, comprobarlo, y que te dé el bajón!

Bueno, voy al lío, cómo solucionar algunos errores de accesibilidad:

(*) No existe el atributo “lang” o “xml:lang”: No se ha indicado el idioma principal de este documento.

Debemos específicar el idioma de nuestra web, para hacerlo simplemente añadimos el atributo correspondiente a la etiqueta quedándonos así:

“es” para español, “en” para ingles,.. podéis ver todos en la informacion oficial.

(*) Proporcione un texto equivalente para todo elemento no textual.

Es muuuy importante que todas nuestras imágenes tengan el atributo “alt”, ya que en él debemos especificar lo que representa nuestra imagen, así si no se puede visualizar, el usuario no deja de recibir la información. Si además la imagen tiene información muy importante, podemos añadirle el atributo “longdesc” donde se le especifica una URL con más datos sobre la imagen (sólo puede contener una url, nada de texto).
Una etiqueta de imagen válida y accesible sería:

Acordaros que la etiqueta img se cierra “ella misma”, tiene que llevar la barra / siempre al final!

(*) No existen teclas de acceso rápido (atributo “accesskey”) para ningún control ni enlace de este documento. Compruebe si son necesarias
(*) Indique el significado de abreviaturas y acrónimos mediante el atributo “title” la primera vez que aparezcan en un documento.

A la hora de insertar enlaces, debemos agregarles el atributo “title” indicando información sobre donde nos llevará, también es conveniente añadir “acceskey”, ya que se podrá acceder a todo el contenido de la web sin necesidad de tener ratón, sólo con el teclado. Un ejemplo de enlace completito sería:

enlace

Para utilizar la tecla de acceso al enlace en windows debemos hacerlo manteniendo pulsado “alt”, para mac pulsamos “control” (más la letra de acceso claro).

(*) No existe el elemento “noscript” con contenido alternativo para “scripts”. Compruebe si es necesario para no perfer funcionalidad o información.

Siempre que tengamos scripts, debemos tener noscripts, ya que si un navegador no ejecuta el script dispone de una alternativa con esta etiqueta.