Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for abril, 2007

Probar un sitio web en varias versiones de Firefox

Fecha de publicación: 2007/04/23

Cuando se prueba una página en Firefox es interesante probarla en varias versiones, no solo en la última, ya que hay usuarios que siguen utilizando versiones antiguas. Además, la versión 1.5 aun tiene soporte.

Y como no se pueeden tener abiertas dos o más versiones de Firefox de forma simultánea resulta muy incómodo tener que estar abriendo y cerrando Firefox.

Una solución interesante es utilizar versiones equivalentes otros navegadores basados en Gecko, como Mozilla o SeaMonkey. No hay más que buscar una versión de esos navegadores en los que la versión de Gecko coincida con la utilizada en Firefox.

Equivalencia de versiones de Firefox con SeaMonkey y Mozilla:

  • Firefox 2.0.0.3:
    • Versión de Gecko: 1.8.1.3
  • Firefox 1.5.0.10:
  • Firefox 1.0.8:

Datos del artículo:

Outbook v4.1: ligero rediseño

Fecha de publicación: 2007/04/22

Esta vez no he realizado cambios significativos, simplemente he corregido algunos errores del rediseño anterior, arreglando fallitos de Internet Explorer, pasando las medidas de px a em en la hoja de estilos, facilitando la interacción del usuario en el área de navegación y quitando alguna que otra chapuza.

Las imágenes de cabecera y de suscripción son anteriores a este rediseño, aunque no formaron parte del rediseño anterior.

Captura
Captura de pantalla del diseño actual.

Datos del artículo:

  • Etiquetas: ,
  • Publicado en categorías: Sin categoría
  • Comentarios desactivados en Outbook v4.1: ligero rediseño

Deja colgado tu Linux de una forma muy sencilla

Fecha de publicación: 2007/04/21

En bastantes sistemas operativas basados o derivados de Unix (sistemas Linux incluidos) no hay más que introducir en modo de línea de comandos la siguiente secuencia de caracteres: :(){ :|:& };:

Una vez introducidos se produce un DoS (denegación de servicio) mediante un proceso que colapsa los recursos del sistema, dejándolo totalmente inutilizable hasta resetearlo.

Visto en Kriptópolis: Denegacion de Servicio en Unix (Linux, BSD, etc)

Datos del artículo:

  • Etiquetas: , ,
  • Publicado en categorías: Sin categoría
  • Comentarios desactivados en Deja colgado tu Linux de una forma muy sencilla

Nueva versión de Kubuntu (y de Ubuntu): Feisty Fawn

Fecha de publicación: 2007/04/20

Ayer salió la versión 7.04 de Kubuntu (y Ubuntu), Feisty Fawn.

Esta versión es LTS (soporte de 3 años), por lo que se pueden pedir LiveCD (de forma gratuita) de la misma:

Yo ya los he pedido :-).

Datos del artículo:

HTML: uso del atributo accesskey

Fecha de publicación: 2007/04/17

Actualizado 2011-03-10.

¿En que elementos se usa?

Lo primero que hay que saber es en que elementos puede utilizarse el atributo accesskey:

  • a
  • area
  • button
  • input
  • label
  • legend
  • textarea

Excepto a y area se trata de elementos de formulario.

¿Cómo funciona?

Activando las teclas de acceso y pulsando la tecla de acceso (depende de cada navegador):

Pressing an access key assigned to an element gives focus to the element. The action that occurs when an element receives focus depends on the element. For example, when a user activates a link defined by the A element, the user agent generally follows the link. When a user activates a radio button, the user agent changes the value of the radio button. When the user activates a text field, it allows input, etc.

Comportamiento en distintos navegadores

  • Internet Explorer: ALT + [Tecla de acceso] y despues ENTER.
  • Firefox: ALT + MAYUSCULAS + [Tecla de acceso].
  • Opera: MAYUSCULAS + ESC para activar teclas de acceso, y después la tecla de acceso.
  • Chrome, Safari: ALT + [Tecla de acceso].

Se puede probar con la tecla de acceso 7. Enlace de prueba con la tecla de acceso 7.

Referencias y enlaces relacionados

Datos del artículo:

Diseño de URLs, publicidad en Internet y Adblock

Fecha de publicación: 2007/04/15

Siempre que he tenido que instalar Firefox la primera extensión que le añado es Adblock.

Adblock es una extensión que sirve para bloquear elementos en las páginas que se visitan: imágenes, javascript, flash, etc., que resulta muy útil para la gente que aun usa conexión de 56K.

Esta es la descripción que aparece en la página de la extensión:

Once installed, it’s a snap to filter elements at their source-address…

Once installed, it’s a snap to filter elements at their source-address. Just right-click: Adblock: done. Filters use either the wildcard character (*) or full Regular Expression syntax. Hit the status-element and see what has or
hasn’t been blocked.

El bloqueo de los elementos se realiza especificando su dirección URL exacta o bien creando un filtro mediante un fragmento de URL y el caracter * (asterisco).

Los elementos más susceptibles de ser bloqueados son los publicitarios, que en muchas ocasiones tienen URLs que los identifican como tales.

Un sencillo ejemplo sería la URL http://www.servidor.com/banners/759489.gif: bastaría con introducir el filtro */banners/* en Adblock para bloquear toda la publicidad de cualquier servidor en Internet que estuviese alojada en un directorio llamado banners.

Además Adblock permite la exportación e importación de listados de filtros.

Si el uso de este tipo de utilidades se extiende entre los usuarios de Internet se va a poner difícil el asunto de los ingresos publicitarios en los sitios que subsisten mediante ellos.

Soluciones:

  1. Crear URLs enrevesadas, que no sean descriptivas como lo era la URL del ejemplo anterior, y que cambien frecuentemente para los elementos publicitarios, de forma que sea imposible el bloqueo de los mismos a largo plazo, como ocurre actualmente en la mayor parte de los casos.
  2. Mezclar las imágenes del sitio web con la publicidad, que compartan la misma jerarquía en los directorios del servidor, de forma que si el usuario bloquea la publicidad también bloquea las imágenes del sitio. La consecuencia es que el usuario desiste de realizar el bloqueo siempre que le interese poder ver las imágenes del sitio.

Datos del artículo:

XHTML: Pautas para generar un marcado más correcto

Fecha de publicación: 2007/04/13

Unas cuantas pautas para mejorar el marcado HTML según 456 Bereast (algunas de ellas un poco obvias):

  • Orientación a la máxima simplicidad que sea posible.
  • No usar tablas para la maquetación.
  • Evitar la inclusión de un atributo class a cada elemento al que se quiera dar un estilo. Es mejor usar selectores descendentes, evitando así bastante complejidad en el documento.
  • La estructura semántica del documento es lo primero, ha de anteponerse siempre a la presentación.
  • Conocer bien la especificación de HTML 4.01, y si no se conoce echarle unos cuantos vistazos, para saber bien que etiquetas y que atributos emplear. No está de más ver la referencia de XHTML 1.0 una vez que se sepa lo que es HTML (se trata de ver las pequeñas diferencias entre XHTML 1.0 y HTML 4.01).
  • Validar todo lo que se haga.

Validación

Estas son los medios que uso para validar:

Referencias y enlaces relacionados

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web
  • Comentarios desactivados en XHTML: Pautas para generar un marcado más correcto

Hacks CSS mediante selectores

Fecha de publicación: 2007/04/13

Esta página está obsoleta y contiene algunas imprecisiones. Ir a nuevo listado de selectores (en inglés).

Para Internet Explorer 6 y anteriores:

* html {}

Solamente Internet Explorer 7

* + html/*/ * /**/ body {}

Internet Explorer 7 y superior:

*:first-child+html {}

Para Internet Explorer 8 y anteriores se usan los dos selectores anteriores:

*:first-child+html {}
* html {}

Solamente Internet Explorer 8:

head/*/+body/**/ {}

Para Internet Explorer 5.5 (y creo que también para el 5), se introduce el siguiente CSS dentro de una regla, de forma que lo que hay a partir de ese fragmento no puede ser leído por IE 5.5 (valida en el W3C CSS Validator):

voice-family: ""}""; voice-family:inherit;

Para el hack de IE 5.5 no hay que usar necesariamente la propiedad CSS voice-family, en principio se puede usar cualquier otra (yo he probado con color y background, entre otras), siempre que no descoyunte nada.

Para navegadores actuales (Firefox, Opera, etc.) e Internet Explorer 7/8:

html>body {}

Solo navegadores actuales (se excluye a Internet Explorer 7 pero no al 8):

html>/**/body {}

Solo navegadores actuales (excluye todos los Internet Explorer):

html>/*/*/body {}

Para Opera 9.2x y anteriores (hasta el 7.2x):

html:first-child {}

Para Safari 2 y 3 y Konqueror (valida CSS3):

html[xmlns*=""] body:last-child {}

Para Safari 3 y otros basados en Webkit (valida CSS3):

body:not(:root:root) {}

Para Opera 9.5, Safari 3 (probado en Safari 3.1 de Windows) y Konqueror 3.5.x:

body:only-of-type {}

Referencias

Actualizaciones

Actualizado 2007-04-21: verificado hack para Konqueror.

Actualizado 2007-05-16: añadido hack para IE 5/5.5.

Actualizado 2007-09-11: añadida explicación de hack para IE 5/5.5.

Actualizado 2008-05-14: añadido hack para Safari 3.

Actualizado 2008-08-05: actualización para Internet Explorer 8 beta 1 y de las versiones para las que sirve el de Opera.

Actualizado 2008-08-07: actualización para Opera 9.5, Safari 3 y Konqueror 3.5.x.

Actualizado 2008-12-02: Se añade el enlace a la tabla de hack css de Unistallme.com.

Actualizado 2009-09-03: Se añade el enlace a css-class.com.

Datos del artículo:

Información del sitio