Barra de Progreso JQuery

Belen — Wed, 03 Mar 2010 15:26:29 +0000

Estaba investigando JQuery, buscando ejemplos para compartir y encontré esta barra de progreso animada realizada en JQuery, no contiene imágenes, solamente código Javascript, HTML y CSS.

Explico un poco:

var bar1 = new ProgressBar("id-div-contenedor", 10, "progressTable", "cell1", "size");
bar1.Start();

id-div-contenedor: es el ID que contiene a la barra que armaremos.

10: es el número de celdas que va a tener nuestra barra. Cuantas más celdas tenga más larga va a ser.

progressTable: se refiere a la clase CSS para darle estilo exterior a la barra.

cell1: es el estilo de cada celda

size: el tamaño de cada celda

_______________________

El código Completo:




    Barra de progreso animada con jQuery

Espero que les salga!

Leer entrada original

HTML 5 y CSS 3

Belen — Thu, 25 Feb 2010 21:21:31 +0000

Les dejo un buen video explicativo de HTML 5 y CSS 3.

Los motores de renderizado de los navegadores

Belen — Thu, 25 Feb 2010 21:08:31 +0000

La constante lucha que tenemos nosotros, los desarrolladores web, es con los navegadores. Nuestros diseños deben verse bien en todos los browsers para que la mayor cantidad de personas lleguen a ellos y los puedan visualizar correctamente.

Entonces..¿Por qué se ve una cosa en IE y otra diferente en FF? Esto es debido a los motores de renderizado que ellos poseen.

Existen varios, pero los más comunes son Gecko, Webkit, Trident y Presto, cada uno de ellos pertenecientes a los navegadores que conocemos. Y ellos trabajan diferente, por eso no se ve igual en cada navegador.

Veamos cada uno más en detalle.

¿Que es un motor de renderizado?, pues es la parte de un navegador que toma el contenido marcado, (como XML o HTML), lo interpreta de manera visual y lo presenta visualmente a los usuarios. Todos los navegadores web incluyen algún motor de renderizado.

El termino motor de renderizado, (layout engine o rendering engine en ingles), se hizo popular cuanto Mozilla, desarrolló el suyo de manera libre y diferenciado del propio navegador, siendo posible de esta manera reutilizarlo para otros navegadores. Ahora veremos algunos de los motores más importantes.

Gecko

Gecko es un motor multiplataforma y libre originalmente desarrollado por Netscape. Actualmente su desarrollo es gestionado por la Fundación Mozilla.

Solía ser criticado por su enorme complejidad y uso de memoria. La mayor parte de estas debilidades se subsanaron en Firefox 3 con el nuevo motor Gecko 1.9 Con este motor se logró disminuir drásticamente el uso de memoria, incluso superando a Safari y Opera. Estos cambios permitieron a Gecko pasar el test Acid2 y soportar algunos elementos de CSS 3 (ya implementados en WebKit). Con la llegada de Firefox 3.1, se implementó Gecko 1.9.1 que incluía TraceMonkey, el nuevo intérprete JavaScript. Las futuras mejoras, harán que Gecko sigua siendo una opción muy sólida frente a WebKit.

WebKit

WebKit es un motor de render HTML de código abierto, desarrollado por Apple sobre la base del código KHTML, para Konqueror. Se trata de un motor sumamente liviano, reconocido por tener un código compacto, simple, claro y riguroso por su respeto a los estándares HTML, además usar poca memoria para su funcionamiento.

Desde Google Chrome también lo adaptó, WebKit está ganando popularidad a pasos agigantados. Y es justamente esta creciente popularidad que, para algunos, comienza a poner en duda la relevancia de Mozilla Gecko como motor HTML.

Trident (también conocido como MSHTML)

El Motor de renderizado Trident de Microsoft es considerado por la mayoría de desarrolladores como el cáncer de Internet. Es el motor menos compatible con los estándares, lo que durante mucho tiempo ha supuesto que un gran número de páginas web no estén diseñadas para ser compatibles con los estándares, sino para ser compatibles con Explorer.

La versión 4.0 de Trident, que acompaña Internet Explorer 8, fue la primera versión en pasar el test Acid2 ,(casi 5 años después que safari), cuando todos los demás motores pasan sin problemas el test Acid3 .

Entonces la pregunta del millón es , si es tan malo, ¿porque se empecina Microsoft en seguir desarrollándolo? . Lo más lógico es que no hayan querido romper con todas las webs diseñadas para su navegador, por aquello de no dejar en la estacada a sus clientes más fieles.

Presto

Es el motor de código cerrado desarrollado por Opera Software para el navegador Opera. Fue introducido en la versión 7.0 de este navegador reemplazando al motor Elektra que se usó para las versiones 4, 5 y 6 de este navegador.

La versión 2.2 de Presto fue el primer motor en lograr pasar las pruebas Acid3Test al 100%. Esto hace que Opera 10 sea probablemente en el navegador con mejor soporte para los estándares web.

Leer artículo original

Visualizar tus sitios en diferentes navegadores.

Belen — Wed, 08 Jul 2009 01:36:27 +0000

Bueno, encontré esta página que me parece bastante útil para poder visualizar nuestro diseño en diferentes browsers.

Aquí el link: http://browsershots.org

Espero que les sirva.

Bienvenidos.

Belen — Tue, 07 Jul 2009 21:06:27 +0000

Bienvenidos a mi Blog profesional!

Mi nombre es Belén, soy de Argentina y soy Diseñadora Web.
Estoy estudiando en la Escuela Multimedial Da Vinci y me recibo a fin de este 2009.

La idea del blog, como tantos otros es compartir mis conocimientos con ustedes, mostrar algunos de mis trabajos y poder ampliar mis conocimientos junto a sus comentarios.

Los espero por acá!

- Belén - Diseños Web