Proyecto yensdesign.com: tutoriales para desarrolladores web

[yens]

Buenas gente.. ya sé que podría quedarme quieto y solo esperara que os pasarais por el planet stratos, pero era para dejar constancia de que por fin he abierto el grifo, y acabo de terminar el primer tutorial del blog... concretamente trata de cómo crear desde cero los típicos popups que aparecen en las webs mediante jQuery y un poquito de CSS.

Espero que os mole, y si encontráis muchos gazapos en inglés avisadme que mi nivel de inglés no da para más: http://yensdesign.com/2008/09/how-to-create-a-stuning-and-smooth-popup-using-jquery/

[Loover]

That's great, my friend.

[tewe76]

En IE8 no va... ::)

[RobiHm]

esto no es un proyecto de videojuego no?

por cierto hay un gazapo al poner el doble && el código esta traducido &

[yens]

En IE8 no va... ::)

Gracias por el aviso tewe! Me había dejado una coma en una de las funciones de carga del popup y firefox parece que lo habia obviado jeje! Ahora debería ir en todos los navegadores xD

@robin: Muchas gracias, lo acabo de solventar, parece que el plugin me hizo alguna cosilla rara al hacer el wrapper xD

[josepzin]

Buen artículo, ya lo probaré :)

[alberizo]

Te ha quedado muy chulo, algunas cosillas que he visto:

- No uses position:fixed si quieres que funcione en todos los navegadores, en ie6 no rula. Para un posicionamiento vertical, necesitas el innerHeight y si usas $(window).height() en Opera te devuelve el alto de toda la página (metele unos cuantos de línea y lo verás), en jquery nunca lo he obtenido como tú, pero a manubrio yo lo hago así:

Código (javascript) [Seleccionar] Expand


var _width = 0, _height = 0; // Ancho y alto útil del navegador

//---------------------------------------------------------------------
// Obtengo el ANCHO y ALTO útil del navegador
// Firefox, Opera, Safari..
if(typeof(window.innerWidth)=='number'){
_width  = window.innerWidth;
_height = window.innerHeight;
// IE6+
}else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
_width  = document.documentElement.clientWidth;
_height = document.documentElement.clientHeight;
// IE4
}else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
_width  = document.body.clientWidth;
_height = document.body.clientHeight;
}


- No puedes dar a un div cuyo padre es el body un height:100%, si el body no tiene tambien height:100%, pruebalo en ie6 y verás que no te pilla el alto.

- A nivel semántico no me parece correcto darle un h1 al titular de un popup, no creo que sea lo más importante de la página.

Para comprobar la sintaxis javascript te recomiendo javascript lint, en javascript con centenares de líneas es mano de santo :D Te lo puedes instalar en el ordenador para mayor comodidad :)

[yens]

Gracias de nuevo gente.

@alberizo:

- Sobre lo del tema semántico para los h1 y tal... podríamos discutirlo durante mucho tiempo, yo lo veo bien jeje.
- El position fixed es un truquillo que viene muy bien para cuando hay scrollbars que hace que el popup no se mueva mientras el resto de la página sí ;)
- Sobre el comportamiento con Internet Explorer 6... no lo he probado, es un navegador que he dejado de lado por motivos totalmente personales desde hace unos meses, me ha hecho perder demasiado tiempo, y no me lo puedo permitir, y por suerte o desgracia, salvo clientes que lo pidan explicitamente, yo me lo he dejado de lado xD
- Gracias por la recomendación esa, le echaré un vistazo ;)

[RobiHm]

- Sobre el comportamiento con Internet Explorer 6... no lo he probado, es un navegador que he dejado de lado por motivos totalmente personales desde hace unos meses, me ha hecho perder demasiado tiempo, y no me lo puedo permitir, y por suerte o desgracia, salvo clientes que lo pidan explicitamente, yo me lo he dejado de lado xD

debe de estar bien eso de no programar para uno de los navegadores más utilizados (deberías advertirlo en los códigos que hagas públicos)

[yens]

- Sobre el comportamiento con Internet Explorer 6... no lo he probado, es un navegador que he dejado de lado por motivos totalmente personales desde hace unos meses, me ha hecho perder demasiado tiempo, y no me lo puedo permitir, y por suerte o desgracia, salvo clientes que lo pidan explicitamente, yo me lo he dejado de lado xD

debe de estar bien eso de no programar para uno de los navegadores más utilizados (deberías advertirlo en los códigos que hagas públicos)

Sea de los más utilizados o no, es una limitación muy gorda y una pérdida de tiempo en mis proyectos personales y es mi forma de intentar que la gente se actualice y no usen un navegador arcaico, si se quieren aplicaciones actuales y novedosas no se puede tener algo asi por navegador.

De todas formas, gracias por preocuparte por mis visitas y advertirme de que es un navegador muy utilizado ;)

[Loover]

Facebook dejó de lado IE6 hace unos meses. Facebook no es dios, pero casi, casi: es de las aplicaciones web más brutas que he visto. Si ellos han tomado esa decisión y tienen un equipo de 400 personas detrás, creo que un individuo aislado lo tiene fácil a la hora de decidirse también. Creo que es hora de ir mandándolo a la mierda. Renovarse o morir.

[alberizo]

¿A que te refieres con que facebook dejase de lado IE6 Loover?

[yens]

¿A que te refieres con que facebook dejase de lado IE6 Loover?

http://www.kryogenix.org/days/2008/08/27/facebook-doesnt-really-support-ie6

En Google, busca por "Facebook + Internet Explorer 6" y tienes mucha más info.

[StraT]

- Sobre lo del tema semántico para los h1 y tal... podríamos discutirlo durante mucho tiempo, yo lo veo bien jeje.

Pues yo creo que no hay mucho que discutir, lo cierto es que un h1 para el titular de un pop-up que está dentro del código fuente de una página más grande -no me he mirado mucho el código, pero apuesto a que es así- es un claro error semántico, alberizo tiene razón.

Lo de Internet Explorer 6... bueno, te pondré un ejemplo clarificador. En la empresa en la que trabajo -empresa dedicada al desarrollo web- a veces usamos códigos de terceros para efectos concreto del tipo "crear un pop up". Pues bien, jamás usaríamos el tuyo, no porque no esté bien hecho o no sea bonito -eso es aparte-, sino porque no funciona en Internet Explorer 6. En la empresa donde trabajo intentamos no sacar nada que no soporte Internet Explorer 6 o superior, Mozilla Firefox, Safari, Opera y Chrome. Y como nosotros, muchos más. A partir de ahí, tú decides, ;)

Por lo demás, muy bien el tutorial, me gusta el plug in que usas para mostrar código fuente, cuál es?

Saludos

[yens]

- Sobre lo del tema semántico para los h1 y tal... podríamos discutirlo durante mucho tiempo, yo lo veo bien jeje.

Pues yo creo que no hay mucho que discutir, lo cierto es que un h1 para el titular de un pop-up que está dentro del código fuente de una página más grande -no me he mirado mucho el código, pero apuesto a que es así- es un claro error semántico, alberizo tiene razón.

Lo de Internet Explorer 6... bueno, te pondré un ejemplo clarificador. En la empresa en la que trabajo -empresa dedicada al desarrollo web- a veces usamos códigos de terceros para efectos concreto del tipo "crear un pop up". Pues bien, jamás usaríamos el tuyo, no porque no esté bien hecho o no sea bonito -eso es aparte-, sino porque no funciona en Internet Explorer 6. En la empresa donde trabajo intentamos no sacar nada que no soporte Internet Explorer 6 o superior, Mozilla Firefox, Safari, Opera y Chrome. Y como nosotros, muchos más. A partir de ahí, tú decides, ;)

Por lo demás, muy bien el tutorial, me gusta el plug in que usas para mostrar código fuente, cuál es?

Saludos

Sí, pensándolo mejor, un h1 saldría demasiado destacado para un popup... lo tendré en cuenta para próximos códigos xD

Sobre Internet Explorer 6, respeto tu opinión como la del resto, pero me la "suda ese razonamiento", es una decisión personal de cara a no dar soporte para Internet Explorer 6 por mi parte siempre que pueda evitarlo, como ya comenté si la gente que hace encargos lo pide, no queda más remedio, pero si puedo enseñar a programar y a evitar ese navegador, trataré de hacerlo siempre que pueda. Si tu empresa tiene clientes anticuados toca comerse el marrón como me pasa a mí en el trabajo, es lo que nos queda hasta que la gente se conciencie de que hay que actualizarse o que conozcan otras alternativas mejores.

El plugin tiene un fallito cuando editas los posts que se te come algunos caracteres, pero está bastante bien, puedes encontrarlo aquí mismo: http://code.google.com/p/syntaxhighlighter/


Me alegro de que te guste el tutorial, espero sacarlos de forma más o menos contínua y que os sean lo más útiles posibles... sin contar con el IE6  xD >:D