Entradas etiquetadas ‘html’

Cómo crear un favicon.ico

17 de Julio de 2009

Cuando usted visita un sitio web como Google, Youtube o Facebook, es posible que observe que hay un pequeño icono situado a la izquierda de la barra de direcciones. Esto se conoce como un favicon.

Pasos

1. Crear una imagen que es 16×16 píxeles de tamaño. Debe ser una imagen sencilla, para que sea inmediatamente reconocible.
2. Convertir la imagen a un archivo favicon.ico. Debe ser exactamente esto, o el navegador no lo reconoce. Una manera fácil de hacerlo es utilizar un Generador online, hay muchos de ellos.
3. Subir el archivo generado a su sitio web.
4. Agregue el siguiente código a su sitio web HTML. Usted lo debe poner en la sección <head> del código, y asegúrese de que la ruta hacia el icono es la correcta, en relación con la página web.

Código:

* <link Rel=”shortcut icon” href=”/favicon.ico” />

5. Actualizar la página y comprobar que visualizamos el icono.

jQuery Visualize

10 de Julio de 2009

jQuery Visualize, es un plugin de jQuery que nos permite generar gráficas dinámicas usando <canvas /> para alogar los gráficos.

Lo curioso de este plugin es que carga los datos desde tablas <html>y el resultado no puede ser más accesible, ya que en caso de que el usuario no tenga el Javascript activo, este podrá ver la tabla con los datos, posibilitando así su comprensión.

Y lo “malo”… tu navegador debe ser HTML5 compatible, de lo contrario no podrás ver funcionar este plugin.

Fuente: anieto2k

Baja los scripts al final del fichero

3 de Julio de 2009

Según cuenta anieto2k una de las tecnicas más usadas para reducir el tiempo de carga de una página es la de bajar el Javasciprt al final de fichero HTML, concretamente antes del tag </body>.

¡Podemos reducir un 47% el tiempo de carga de la página!

Antes:

Después:

Fuente: anieto2k

Lo que trae el nuevo Firefox 3.5

25 de Junio de 2009

Tras publicar la última RC (Release Candidate) de Firefox 3.5, Mike Beltzner, Director de Desarrollo de Firefox presenta este vídeo que describre lo nuevo en la versión 3.5:

Resumiendo:

  • Mayor velocidad de navegación, Firefox 3.5 será la versión más rapida creada por Firefox.
  • La privacidad ante todo: Firefox 3.5 traerá el popularmente conocido “modo porno” que no deja rastro de tus andadas por la red ya que borrará todos los elementos “sensibles” de la sesión.
  • El historial podrá ser eliminado basado en tiempo, es decir, borrar solo lo que hace 24h qué visitaste o 1 semana…
  • El ¡deshacer cerrar ventana!
  • Podremos ver los vídeos en línea sin ningún complemento “extra” gracias al soporte HTML5.
  • Firefox 3.5 incorpora un “geolocalizador” (se puede desactivar) incorporado que permitirá a los sitios Web detectar de forma exacta el lugar desde donde procede la visita.

Fuente: Mozilla.com

7 reglas para realizar Javascript de calidad

19 de Junio de 2009
  • No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
  • Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
  • Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
  • Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
  • Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
  • Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
  • Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y comprensible.

Fuente: The seven rules of unobstrusive JavaScript

La línea del tiempo del desarrollo Web

16 de Junio de 2009

El gráfico creado por Felipe Micaroni Lalli, representa la historia de las tecnologías, estándares y navegadores que han hecho posible el crecimiento de la Web.

Lo más probable es que el gráfico deberá ser reescrito en breve ya que poco a poco vemos llegar HTML5, Silverlight 3 está a punto de ver la luz (programado para el 10 de Julio ) y por si fuera poco, Opera hoy acaba de reinventar la Web con su ¡navegador-servidor!

Explicación gráfica: HTML5 vs HTML4

5 de Junio de 2009

Ya lo tenemos aquí, el HTML5 está entre nosotros, quizás sea porqué Google lo anuncia a bombo y platillo.. (página de demo en Youtube, controles multimedia para mostrar vídeos), claro que de momento el invento sólo funciona en Chrome, Safari4, Webkit, Firefox 3.5 y no sé cual otro más….

En la explicación gráfica se ve claramente la diferencia que implica el paso a esta nueva revisión del estándar HTML. Vamos a poder llamar cada cosa por su nombre, lo que se supone una mejora en la representación de la información y la estructura de las páginas en general.

Fuente: anieto2k

Resaltado de mapas con jQuery

29 de Mayo de 2009

Los mapas de imágenes HTML són muy útiles para por ejemplo una página con un mapa político y de las diferentes oficinas de una empresa, etc… también está la posibilidad de usar google maps para tal caso, pero eso ya es otro tema. Con jQuery maphilight podemos hacer estos mapas más atractivos muy fácilmente, el resultado:

[Demo 1] [Demo 2]

[Documentación]

[Descargar]

Fuente: jQuery Maphi

Validar el código HTML completo de nuestro blog Wordpress

15 de Enero de 2009

Que el HTML de nuestro blog o cualquier página web sea válido es el primer paso para conseguir que funcione como esperamos (especialmente en dispositivos típicamente poco flexibles como son los teléfonos móviles u otros dispositivos de nueva generación).

Un código correcto es una buena muestra de rigor de cara a los usuarios y a nosotros mismos, si son las normas estandarizadas de la web, ¿por qué no cumplirlas?.

El problema es mantener esa validez post tras posts, he explico, si nuestro código de la plantilla es válido, no significa que lo vaya a ser siempre, ya que a veces ocurre por integrar objetos incrustados mal codificados (vídeos de YouTube, galerías fotográficas, etc.) ya no valida como debería.

Ejemplo de validación

Ejemplo de validación

Para verificar la validez de todas y cada una de las entradas de nuestro blog viene tenemos Validated para WordPress, es tan sencillo como instalarlo y ponerlo a trabajar para descubrir todas las entradas con problemas.

Además este plugin nos enlaza directamente con el validador de W3C para ver el detalle de los fallos de cada entrada y así saber donde tenemos los problemas y poder remediarlo.

Lanzamiento de jQuery 1.3

15 de Enero de 2009

Los chicos de jQuery (uno de los mejores framewoks javascript), han lanzado una nueva versión en los últimos días. Se trata de la versión 1.3.

En esta nueva versión de jQuery se ha visto incrementada sustancialmente la velocidad en la mayoría de aspectos. Básicamente la mejora de velocidad de ha mejorado cambiando el selector de elementos, ahora se utiliza Sizzle. Por otro lado se ha reescrito la inyección de HTML haciendo hasta 6 veces más rápida esta.

Para conocer más sobre esta versión de jQuery no olvides visitar la documentación oficial.

Descargar

jQuery Minified / jQuery Regular