h@nz ...el Geek » Estándares Web

Panel emergente en una página web

h@nz — Mon, 14 Sep 2009 15:48:24 +0000

A ver, un tema bastante sencillo y que es a veces necesario pero poco conocido. En las páginas web ya debería eliminarse de forma permanente las molestosas ventanas popups, porque… son molestosas y sobretodo porque la mayoría de navegadores las bloquean y claro, al final, el usuaio no venuestra ventana. Lo idel sería cargar una pnale emergente que se vería mas o menos como se muestra en la siguiente imágen.

Ahora, hacer que este panel se cargue es bastante sencillo, y lo único que debemos hacer es definir un panel que servirá como fondo y darle atributos de opacidad, de manera que se vea como un fondo semi transparente y luego otro div que servirá para como contenido del panel emergente, definirlos con el atributo css display en none, para que no se visualicen y al hacer clic en el elemento que necesitemos, solo debemos decir que su atributo css display sea block.

Mas fácil, solo la tabla del 1, en fin, pueden descargar el código para revisarlo, y en este ejemplo he utilizado una librería de jQuery solo porque me agrada, pero se puede hacer sin jQuery utilizando document.getElementById.

Descargar Demo Ventana Emergente

Espero que les sea de utilidad.

Saludos.

24 mejores prácticas para trabajar con JavaScript

h@nz — Fri, 26 Jun 2009 21:15:55 +0000

Este artículo es por demás interesante; permite tener una visión mas clara de como trabajar eficientemente con javascript, y aunque creas que ya sabes mucho del tema, te sorprenderán algunas recomendaciones.

La url es: http://net.tutsplus.com/tutorials/javascript-ajax/24-javascript-best-practices-for-beginners/

Espero que les sea de utilidad.

Saludos.

Fuente: Gonzalo Perez – [Link] 24 Mejores Prácticas en el Desarrollo con JavasScript

Recomendaciones para crear Páginas ASP .Net

h@nz — Tue, 11 Nov 2008 16:13:25 +0000

Hoy en día ASP .Net se ha convertido en una de las tecnologías más utilizadas para el desarrollo de aplicaciones web, sin embargo, los diseños de páginas web con ASP .Net en muchos casos dejan mucho que desear. Una de las mayores atracciones (por así decirlo) para que los desarrolladores de aplicaciones de escritorio incursionasen con .Net en aplicaciones web era precisamente que con .Net desarrollar para web no era muy diferente que desarrollar para aplicaciones de escritorio; esto ha hecho que un gran número de personas que antes y por mucho tiempo trabajaban en aplicaciones de escritorio desarrollen aplicaciones web. Esto, que por un lado puede ser bueno, por el otro lado resulta contraproducente pues ahora tenemos a muchos desarrolladores web que no tienen criterio para su desarrollo.

Es utópico pensar que en todos los casos cuando se hace un desarrollo web, se cuenta con un diseñador web (que de paso DEBE saber ASP .Net) que hará la parte gráfica y que nosotros, haremos solo la lógica de la aplicación. En la vida real esto no es cierto, de manera que somos nosotros quienes debemos hacer el diseño, pues bien, Algunos puntos básicos que debemos tener en cuenta son:

Utiliza los controles Label solo cuando debas cambiar su texto a través de eventos del .Net. Los controles Label se procesan en el servidor y tener muchos en la página la harán más lenta.
No utilices tablas para maquetar tu diseño. recuerda que diseñar con tablas es estúpido.
Utiliza siempre los Temas y Skins y trata en lo posible de no utilizar hojas de estilo separadas. Ten orden en tu desarrollo.
Aprende a utilizar de forma corercta las Hojas de Estilo en Cascada.
Aprende a utilizar un Framework de JavaScript, como JQuery para controles elementos del lado del cliente.
Si vas a utilizar ASP .Net AJAX, recuerda que el UpdatePanel lo debes utilizar solo cuando sea necesario y no debes colocar todos los controles dentro de él. Hacer eso solo hará tu página mas lenta.
Si sabes que no puedes crear un diseño de forma correcta, apóyate en otra persona que te pueda ayudar. Tus usuarios te lo agradecerán.

Si alguien tiene alguna recomendación adicional y que en estos momentos no esté en esta pequeña lista, hágala, de seguro que a alguien le ha de servir.

Saludos.

Ofuscar Email en una página web con CSS

h@nz — Tue, 23 Sep 2008 19:46:40 +0000

Estaba yo revisando mi lector de feeds y me encontré con un excelente artículo de José M. Aguilar en el que muestra y explica las diferentes formas de ofuscar una dirección de correo electrónica para colocarla en una página web y que no sea rastreada por los spammers (utilizando spambots, bots, etc.).

Una de estas alternativas es la que me pareció mas sencilla y según los dice José una de las mas efectivas es la que hace escribiendo el e-mail al revés y cambiando la presentación del texto con CSS, el resultado sería como se ve en la imágen:

Como se puede apreciar en la parte superior se encuentra la página con la dirección de correo “normal”, pero como se ve en el código fuente, esta escrito al reves… esa es una de las tantas maravillas conseguidas con CSS.

De hecho que a mas de uno le va a resultar de utilidad esta técnica.

Saludos.

URL: Variable not found en Geeks.ms – Formas efectivas de ofuscar emails en páginas web

CSS Vista – Comparar estilos en IE y FF

h@nz — Thu, 21 Aug 2008 21:37:20 +0000

Yo no soy diseñador web, eso ya esta claro desde hace mucho tiempo, pero hay ocasiones en las que se necesita hacer un diseño web usando para ello las Hojas de Estilo en Cascada (CSS – Cascade Style Sheet); Internet Explorer y Firefox son los dos navegadores que se utilizan con más frecuencia y no siempre el diseño que se hace queda bien en ambos.

CSS Vista es un software gratuito que te permite hacer pruebas de tus webs utilizando ambos navegadores pero sin salir de la aplicacion tal y como puedes ver en la siguiente imágen, en la que estoy probando yo mi propio proyecto.

La mejor ventaja de esta aplicación es que puedes editar el archivo CSS y ver el resultado en ambos navegadores al mismo tiempo. Definitivamente será de gran ayuda. Para descargar este software solo debes registrar tu cuenta de correo electrónico en la que te llegará un enlace para que puedas realizar tu descarga.

URL: CSS Vista

Saludos.

Crea tu FavIcon en linea

h@nz — Fri, 09 May 2008 17:49:09 +0000

Para los diseñadores web, algo que hace la diferencia en un site es el famoso FavIcon (Favorite Icon), que es la imágen que aparece en la barra de direcciones de los navegadores y que identifica a un sitio web.

Pues bien, si lo que deseas es crear tu favicon a partir de una imágen común y silvestre, te puede interesar esta herramienta en línea llamada FavIcon Generator, en la cual podrás subir una imágen cualquiera que pese menos de 150 KB (más que suficiente creo yo) y te dará la imágen en formato ico y con el tamaño necesario para utilizarlo como FavIcon en tu sitio web.

Si lo deseas, Cristalab tiene una pequeña descripión sobre lo que es un FavIcon y como usarlo para ayudarte a entender algo sobre el tema.

Espero que te sea de utilidad.

Saludos.

Libros gratuitos sobre tecnología web

h@nz — Fri, 22 Feb 2008 21:37:27 +0000

Juraría que ya he publicado esto pero luego de buscarlo entre los antiguos posts no lo he encontrado, siendo así, procederé a comentarlo.

Si te interesa el desarrollo de páginas web entonces debes mantenerte al día con la lectura de alguno de estos interesantes libros:

Referencia completa de CSS 2.1
Sympony, la guía interactiva
Introducción a AJAX
Introducción a JavaScript
Introducción a CSS
Introducción a XHTML

Yo ya me he descargado algunos y debo confesar que son bastante buenos, completamente gratis y bastante completos.

URL: http://www.librosweb.es/

Espero que les sea de utilidad.

Saludos.

Nueva imágen de MSDN Perú

h@nz — Tue, 29 May 2007 20:13:24 +0000

Hace un tiempo hice un brevísimo comentario respecto al rediseño de la web de Microsoft, que ahora se ve mejor, pues bien, ahora además de mejorar su página principal, han remodelado la página del MSDN (Microsoft Solution Developer Network) Perú, y a decir verdad se ve mas ligera y elegante, aunque no me agrada mucho el color que utilizaron, uno medio color ladrillo o algo asi.

Como pueden ver en la imágen, ese colorcito no es algo que quede del todo bien pero es una mejora en cuanto al diseño, creo que particularmente me había acostumbrado al color celeste/azul que tenía antes; según su propia nota, no es lo único que ha mejorado, sino que ahora también encontrarán una mejora en las búsquedas y en la navegación.

Se ve elegante, hay que admitirlo, ahora solo es cuestión de usarlo mucho para ver como se comporta.

Saludos.

Crear menús con CSS

h@nz — Sat, 26 May 2007 15:26:39 +0000

Un compañero de trabajo me pasó esta dirección en la cual se muestra una amplia colección de menús creados solo con las etiquetas

y harto CSS, incluye el código con el que se hicieron y algunos tutoriales sobre como crearlos, aunque esta en inglés, no es complicado de entender.

La dirección es: http://css.maxdesign.com.au/. Espero que les sirva.

Saludos.

PD: El nombre de dicho compañero es Edgar Villalta, listo gordo! para que veas que aquí se respetan los copyrights

El "Nombre para mostrar" en MSN Messenger

h@nz — Wed, 07 Mar 2007 13:17:28 +0000

Lo había experimentado, pero no me había dado cuenta del trauma psicológico que me estaba produciendo el hecho de ver a varios de mis contactos del Mensajero de Hotmail (mas conocido como Messenger) con un “nombre para mostrar” demasiado largo. En realidad no me había percatado de este dañino detalle hasta que leí un post en el blog de Elías Izarnótegui Lay respecto a este tema y coincido totalmente con él. Sin irnos mas lejos les muestro a la izquierda una imagen de algunos de mis contactos para que vean que esto nos ocurre a la mayoría, a mi me fastidia y estoy seguro que a muchos también les incomoda. De 10 contactos que muestra la imágen solo 3 pueden ser reconocidos.

No entiendo porque la gente me pone cosas raras en su “nombre para mostrar”, me cansa tener que poner el bendito puntero de mouse sobre el nombre para enterarme de quien es. Teniendo un lugar que dice “Mensaje personal” en el que pueden poner sus comentarios, biografía, curriculum o lo que quieran. Fíjense solo en sus contactos de messenger para que vean que realmente esta mala costumbre ocurre.

Obviamente cuando uno empieza a chatear con esta persona de largo “nombre para mostrar”, un hola se convierte en algo ilegible pues primero debo leer su bendito nick y ya con eso me marea el leer su mensaje y no entiendo ni un poco de lo que dice.

También estan los que escriben en otro idioma, no entiendo, conozco personas que a duras penas hablan el español y escriben su nick en ingles y hasta en francés (o tratan de hacerlo), esos dan cólera. Otros utilizan caracteres especiales para escribir sus nicks… estos son mas odiosos aún, vean estos ejemplos de algunos de mis queridos contactos…

¿Ustedes no saben quienes son?… yo tampoco sé quienes serán. Ojalá puedan cambiar esta pésima costumbre. Mientras, se me ocurre que pondré como NO ADMITIR a estos contactos.

Un comentario en el blog al que hago referencia dice que se puede cambiar la forma de ver los contactos de Messenger para que muestre el e-mail en vez de el nombre para mostrar, pero si veo un mail tu_papirriqui@hotmail.com, soytuamigodetodalavida@hotmail.com o alguno de esos medios raros tampoco me ayudará mucho a saber quien esta en la lista. Ojalá entiendan esto y cambien sus “malos hábitos“.

El post completo de Elias lo pueden ver haciendo clic aquí.

Saludos.