Outbook

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

Inicio que contiene a 2008 que contiene a abril

Datos de búsqueda

Archive for abril, 2008

Tabla para generar expresiones regulares

Fecha de publicación: 2008/04/22

Expresión Descripción
. Cualquier caracter
\ Indica que el caracter que le sigue ha de ser interpretado como tal, y no como parte de la sintaxis de la expresión regular. Por ejemplo, "\." indica que debe interpretarse como punto.
() Para agrupar operadores
{n} Busca la cadena especificada n veces. Por ejemplo, a{2} devuuelve ‘aa’.
{n,m} Busca la cadena especificada entre n y m veces. Por ejemplo: a{2,4} devuelve ‘aa’, ‘aaa’, or ‘aaaa’.
{n,} Busca la cadena especificada n o más veces.
* Devuelve 0 o más veces la cadena especificada.
+ Devuelve 1 o más veces la cadena especificada.
? Devuelve 0 o 1 vez la cadena especificada.
| Devuelve o bien la cadena que haya a la izquierda o la que haya a la derecha (como un operador booleano OR).
[aeiou] Devuelve la cadena que contenga caracteres entre los especificados.
[a-z] Similar al anterior, pero ahora se especifica un intervalo (de la "a" a la "z")
[^aeiou] Excluye las cadenas con caracteres entre los especificados.
$ Se pone al final, señalando el final de la línea. De esta forma se busca línea por línea, y ninguna de las cadenas que devuelve estará en más de una línea.

Saber más sobre las expresiones regulares en MSDN y saber más en Regular-Expressions.info.

Datos del artículo:

PHP: redondeo de números decimales hacia arriba (ceil)

Fecha de publicación: 2008/04/21

Actualizado: 2008-11-30

La función PHP ceil permite eliminar la parte decimal de un número redondeándolo hacia arriba. Por ejemplo, 11.22 se redondearía a 12, 11.9999 se redondearía a 12:

echo ceil(11.22); // 12
echo ceil(11.9999); // 12

Para realizar el redondeo hacia abajo se usa floor.

Saber más sobre ceil.

Datos del artículo:

Redimensionar imagenes con Batch Picture Resize

Fecha de publicación: 2008/04/16

Batch Picture Resize es una sencilla aplicación para realizar cambios de tamaño de imágenes.

Tan solo hay que arrastrar la imagen o las imágenes que se desee redimensionar sobre el icono de la aplicación (inicialmente con el nombre "PhotoResize400.exe") y automáticamente se creará una copia redimensionada de las imágenes en el directorio donde se encuentren las originales.

Además se puede seleccionar el nuevo tamaño de las imágenes simplemente renombrando a la aplicación:

  • PhotoResize[maximo].exe cambiará el tamaño de la imagen de forma que la altura o la anchura máxima sea el número que se defina. Por ejemplo, para una imagen con una dimensión máxima en altura o anchura de 400px se renombraría la aplicación a PhotoResize400.exe. Se conservan las proporciones de la imagen.
  • PhotoResize[ancho por alto].exe establece tanto la anchura como la altura. Por ejemplo, para una imagen con una anchura de 400px y una altura de 300px se renombraría la aplicación a PhotoResize400x300.exe. Podría no conservar la proporción original.
  • PhotoResizeW[ancho].exe establecerá el ancho a las dimensiones dadas conservando la proporción. Por ejemplo para conseguir una imagen de 360px de ancho se renombraría la aplicación a PhotoResizeW360.exe.
  • PhotoResizeH[alto].exe establecerá el alto a las dimensiones dadas conservando la proporción. Por ejemplo para conseguir una imagen de 160px de alto se renombraría la aplicación a PhotoResizeW160.exe.
  • PhotoResizeK[tamaño en KB].exe cambia el tamaño de la imagen para que su tamaño en KB coincida con el valor dado. Por ejemplo, para conseguir una imagen de 100KB habría que renombrar la aplicación a PhotoResizeK100.exe.
  • PhotoResizeP[porcentaje].exe redimensionará la imagen a un porcentaje dado. Por ejemplo, para redimensionar la imagen al 50% habría que renombrar la aplicación a PhotoResizeP50.exe. El valor de porcentaje puede ir de 1 a 1000.

Tiene soporte multiprocesador y versión 64 bits.

Descargar Batch Picture Resize.

Datos del artículo:

HTML: Comentarios condicionales en Internet Explorer

Fecha de publicación: 2008/04/11

Los comentarios condicionales solo funcionan en Internet Explorer de Windows (el basado en Trident), y sirven para insertar fragmentos de HTML que solo funcionarán en la versión que se indique, de forma que se excluya al resto de versiones y a otros navegadores.

Se puede acotar la versión de Internet Explorer de las siguientes formas:

  • Escogiendo una sola versión.
  • Escogiendo una versión y las superiores
  • Escogiendo versiones superiores a la versión dada.
  • Escogiendo una versión y las inferiores
  • Escogiendo versiones inferiores a la versión dada.

Escoger una sola versión

Se escogerá solamente la versión especificada:

<!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->
<!--[if IE 6]>Para internet explorer 6<![endif]-->
<!--[if IE 7]>Para internet explorer 7<![endif]-->
<!--[if IE 8]>Para internet explorer 8<![endif]-->

Escoger una versión y las superiores

Se escoge la versión especificada y las que sean superiores:

<!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
<!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
<!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
<!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

Escoger las versiones superiores

Se escogen las versiones que sean superiores a la especificada:

<!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
<!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
<!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
<!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

Escoger una versión y las inferiores

Se escoge la versión especificada y las que sean inferiores:

<!--[if lte IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
<!--[if lte IE 6]>Para internet explorer 6 e inferiores<![endif]-->
<!--[if lte IE 7]>Para internet explorer 7 e inferiores<![endif]-->
<!--[if lte IE 8]>Para internet explorer 8 e inferiores<![endif]-->

Escoger las versiones inferiores

Se escogen las versiones que sean inferiores a la especificada:

<!--[if lt IE 5.5]>Para versiones inferiores a internet explorer 5.5<![endif]-->
<!--[if lt IE 6]>Para versiones inferiores a internet explorer 6<![endif]-->
<!--[if lt IE 7]>Para versiones inferiores a internet explorer 7<![endif]-->
<!--[if lt IE 8]>Para versiones inferiores a internet explorer 8<![endif]-->

Aclaración final

  • gt: greater than (mayor que).
  • gte: greater than equal (igual o mayor que).
  • lt: lower than (menor que).
  • lte: lower than equal (igual o menor que).

Actualizado 2009-02-02: Corregido error en la selección de versiones inferiores.

Datos del artículo:

Accesibilidad en los rastros de migas

Fecha de publicación: 2008/04/01

Ejemplo de rastro de migas

Es algo habitual ver rastros de migas creados mediante listas ordenadas:

<div id="migas">
 <p>Estás en:</p>
 <ol>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ol>
</div>

O parecido, como lista desordenada (cambiamos solo el OL por el UL):

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Sección A</a></li>
  <li><a href="#">Sección B</a></li>
  <li><a href="#">Sección C</a></li>
 </ul>
</div>

Pero estos dos ejemplos no expresan la jerarquia de una forma semántica. Este otro si:

<div id="migas">
 <p>Estás en:</p>
 <ul>
  <li><a href="#">Inicio</a>
   <ul>
    <li><a href="#">Sección A</a>
     <ul>
      <li><a href="#">Sección B</a>
       <ul>
        <li><a href="#">Sección C</a></li>
       </ul>
      </li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Listas anidadas que si reflejan la jerarquía de la navegación. Para una máquina (un buscador que indexe el sitio) está muy bien, pero para un humano puede no estar tan bien. Una persona que vea bien le va a dar igual como esté hecho para entenderlo (solo le influye como esté presentado visualmente). Alguien que use un lector de pantalla, con cualquiera de los tres ejemplos puede que no se entere muy bien de la jerarquía que hay.

Pero veamos ahora un ejemplo que en principio no parece accesible:

<div id="migas">
 <p>Estás en: <a href="#">Inicio</a> <img src="#" alt="que engloba a" /> <a href="#">Sección A</a> <img src="#" alt="que engloba a" /> <a href="#">Sección B</a> <img src="#" alt="que engloba a" /> <a href="#">Sección C</a></p>
</div>

Es un párrafo. Los símbolos "mayor que" en este caso no son fondo, sino imagen, con un texto alternativo que encadena los enlaces. Este párrafo nos explica con mayor detalle que los anteriores ejemplos en que parte de la estructura del sitio nos encontramos.

A un usuario que necesite un lector de pantalla probablemente le sirva mejor esta última forma de hacer un rastro de migas.

Entonces, ¿cual de estas formas de crear un rastro de migas es más accesible?

Actualización: Lo pregunté en AccesoWeb.

Saber más

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: