Stratos: Punto de Encuentro de Desarrolladores

¡Bienvenido a Stratos!

Acceder

Foros





Proyecto yensdesign.com: tutoriales para desarrolladores web

Iniciado por yens, 26 de Septiembre de 2008, 07:54:48 PM

« anterior - próximo »

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

IndieLib Libreria 2.5d utilizando aceleración por hardware para la programación de juegos 2d.
Indie Rover The monkeys are reading!

tewe76

Tewe
www.TAPAZAPA.com : Funny and easy to play games for all ages! - Fairy Match - Brain Crash
www.LaRebelionDelBiberon.com : Experiencias de unos padres primerizos

RobiHm

esto no es un proyecto de videojuego no?

por cierto hay un gazapo al poner el doble && el código esta traducido &
Web : Indómita
Blog : MiBlog
Evobas : Evobas
Kobox : Kobox

yens

Cita de: tewe76 en 27 de Septiembre de 2008, 02:57:06 PM
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


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]

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

Cita de: yEnS en 28 de Septiembre de 2008, 02:03:09 PM
- 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)
Web : Indómita
Blog : MiBlog
Evobas : Evobas
Kobox : Kobox

yens

Cita de: RobiHm en 28 de Septiembre de 2008, 02:11:18 PM
Cita de: yEnS en 28 de Septiembre de 2008, 02:03:09 PM
- 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.
IndieLib Libreria 2.5d utilizando aceleración por hardware para la programación de juegos 2d.
Indie Rover The monkeys are reading!

alberizo

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

yens


StraT

Citar- 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
quot;Solo hay dos cosas infinitas, el universo y la estupidez humana, aunque de lo primero no estoy muy seguro\\\" Einstein

yens

Cita de: StraT en 29 de Septiembre de 2008, 06:10:55 PM
Citar- 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






Stratos es un servicio gratuito, cuyos costes se cubren en parte con la publicidad.
Por favor, desactiva el bloqueador de anuncios en esta web para ayudar a que siga adelante.
Muchísimas gracias.