Mostrar imágenes con información importante mediante estilos

Se trata de usar una imagen que contiene información (por ejemplo para los enlaces del menú) y mostrarla como fondo de un elemento y que no haya un texto que indique el contenido de la imagen.

Una solución es escribir el texto pero no hacerlo visible, para ello usaremos la propiedad text-ident, si le damos un valor negativo elevado el texto desaparecerá por la izquierda. Por ejemplo, tenemos una imagen titulo.png que tiene el título del blog con un diseño especial, lógicamente queremos que se vea así por temas de diseño e imagen. Ahora bien, si solo mostramos la imagen, no somos capaces de leer el contenido de esta. Por ello tendremos que hacer lo siguiente para que el texto aparezca sin que haya estilos y con estilos solo aparezca la imagen:

h1 {
background: url(titulo.png);
width: 200px;
height: 100px;
text-indent: -10000px;
}

<h1>Título</h1>

Usar el estilo blink sin el mecanismo para parar el parpadeo

Esta es corta, no uses jamás text-decoration: blink. Y si por un casual no te queda otra posibilidad que usarlo, crea un script que pare el parpadeo a los 3 segundos.

Usar un applet o un flash que parpadee sin el mecanismo para pararlos

Lo mismo que el punto anterior, pero enfocado a applets y a animaciones Flash.

Usar subtítulos que omiten parte del diálogo o sonidos importantes

Si vas a ofrecer un sonido, una conversación y no muestras los subtítulos con todo el contenido (conversación y sonidos destacados), no se trata de un buen subtítulo y puede haber información importante que se escape.

Más información

• F3: Failure of SC 1.1.1 due to using CSS to include images that convey important information
• F4: Failure of SC 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than three seconds
• F7: Failure of SC 2.2.2 due to an object or applet, such as Java or Flash, that has blinking content without a mechanism to pause the content that blinks for more than three seconds
• F8: Failure of SC 1.2.1 due to captions omitting some dialogue or important sound effects

Error 1: modificar el significado del contenido debido al posicionamiento mediante CSS

Se trata de cambiar el significado semántico de una etiqueta, modificando su posicionamiento mediante CSS. Por ejemplo, si queremos crearnos una lista de elementos:

• Elemento 1
  • Elemento 1.1
  • Elemento 1.2
  • Elemento 1.3
• Elemento 2
  • Elemento 2.1
  • Elemento 2.2

El fallo consiste en usar etiquetas no destinadas a ese sentido, cambiarle los estilos y representarlas como queremos. Por ejemplo podemos usar span para representar cada elemento y disponerlos en la posición que nos conviene:

<span class="cab1">Elemento 1</span>
<span class="cab2">Elemento 2</span>
<span class="ele1">Elemento 1.1</span>
<span class="ele2">Elemento 2.1</span>
<span class="ele3">Elemento 1.2</span>
<span class="ele4">Elemento 2.3</span>

Y con los estilos siguientes:

.cab1 {
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .cab2 {
    position: absolute;
    top: 0px;
    left: 200px;
  }
  .ele1 {
    position: absolute;
    top: 20px;
    left: 0px;
  }
  .ele2 {
    position: absolute;
    top: 20px;
    left: 200px;
  }
  .ele3 {
    position: absolute;
    top: 40px;
    left: 0px;
  }
  .ele4 {
    position: absolute;
    top: 40px;
    left: 200px;
  }

obtendríamos el mismo resultado visual, pero si quitaramos los estilos obtendríamos lo siguiente:

Elemento 1 Elemento 2 Elemento 1.1 Elemento 2.1 Elemento 1.2 Elemento 2.3

lo cual no tendría mucho sentido.

Error 2: modificar el aspecto del texto para mostrar algo que ya representa una etiqueta

Existen varias etiquetas de texto que tiene diferentes funcionalidades, pero aún así es típico encontrarse textos con sus estilos modificados para mostrar el resultado de una etiqueta ya existente. Un ejemplo muy común es este:

<span class="negrita">Título</span>

.negrita {
font-weight: bold;
}

Lo correcto sería usar la etiqueta strong.

Más información

• F1: Failure of SC 1.3.2 due to changing the meaning of content by positioning information with CSS
• F2: Failure of SC 1.3.1 due to using CSS to create variations in presentation of text that conveys information without also using the appropriate markup or text

• Usa el comando explain: el comando explain te puede ayudar a identificar los índices que se usan y además te proporciona más información útil.
• Usa permisos menos complejos: usar permisos más sencillos evita que se comprueben muchas condiciones en cada ejecución de una sentencia.
• Comando benchmark: este comando nos permite saber cuánto tiempo tarda en ejecutarse una expresión.
• Optimiza tus cláusulas: ya sea quitando paréntesis innecesarios, usando count(*) sin condiciones en el where ya que tira de tablas internas de MyQSL o usando la opción SQL_SMALL_RESULT para usar tablas temporales en memoria.
• Ejecuta optimize table: defragmenta una tabla después de varios borrados, el acceso a disco es algo importante a tener en cuenta.
• Evita campos de longitud variable: en tablas de frecuente actualización evita campos como VARCHAR, BLOB o TEXT.
• Usa insert delayed: solo cuando sea no importe cuando se inserten los datos.
• Prioridades en las sentencias: usa INSERT LOW_PRIORITY para darle a las consultas mayor prioridad, o usa SELECT HIGH_PRIORITY para ejecutar una consulta aunque haya otros clientes esperando.
• Haz múltiples inserciones en una única sentencia: en vez de varias sentencias de una única inserción.
• Sincroniza tipos de datos: mismos datos en tablas diferentes deben ser del mismo tipo de datos.

Yo siempre he tenido una duda, que no he resuelto por pereza, sobre el caso de ejecutar count(*) o count(1). La leyenda urbana dice que es mejor count(1), ya que de la otra forma obtienes que enviar todas las columnas, al igual que haces en un select *. Un consultor en Oracle nos dijo que era falsa esa afirmación porque tardaba lo mismo, yo creo que también, entre otras cosas porque seguro que ese punto está optimizado, pero claro, que sea consultor o que sea de Oracle no quiere decir nada, y menos aún si hablamos de otras bases de datos.

10 tips for optimizing mysql queries

Vía / Alex Sancho

• Cambia el puerto: por defecto el puerto de escucha es el 22, cámbialo para que dificultar los ataques, sobre todo si es mayor a 1024, ya que la mayoría de los scanners no admite valores tan altos.
• Admite solo el protocolo 2: SSH admite dos protocolos, permite tan solo el 2 ya que es más seguro.
• Permite solo usuarios específicos: no admitas al usuario root ya que es aumentar los riegos de ataque.
• Especifica tu propio aviso: si quieres que cualquier usuario pueda ver un aviso de acceso denegado crea tu propio fichero de texto que muestre el mensaje. Este punto no lo comprendo muy bien, está claro que me tengo que meter más a fondo con el SSH.
• Usa clave pública DSA: puedes usar para la autenticación claves públicas DSA en vez de usuario y contraseña.
• Usa TCP wrappers: permitiendo así conectarse solo a ciertos hosts.
• Usa iptables para permitir acceso a hosts: como alternativa a los TCP wrappers.
• Limita el acceso a periodos de tiempo

Advanced SSH security tips and tricks

Vía / dzone

Vamos a ir paso a paso, explicando la estructura, los distintos ficheros y sus contenidos, siempre dentro de mi limitado conocimiento, ya que lo que he aprendido ha sido destripando otras extensiones y mirando la documentación que hay sobre XUL.

Según dicen en Google Webmaster Central lo correcto es mandar un código de red no disponible (503), pero el autor de este post recomienda también enviar un Retry-After para que vuelva a pasarse más tarde. También recomienda que a los motores de búsqueda se les envie a una página 503 y a los visitantes (menos a él) a una página 404 (página no encontrada).

Instruct Search Engines to come back to site after you finish working on it

Parece más enfocada a aquellos que van a pasar de Windows a Ubuntu, por lo que gracias a sus pantallazos y animaciones (¡dios mio, son GIFs animados) nos explica paso a paso lo necesario para realizar estas acciones y no perdernos.

Empieza a explicarnos el package manager y sobre todo las diferencias con Windows, lo cual es algo muy importante si nuestro caso es el de pasarnos de un sistema a otro. Después se centra en la instalación mediante Synaptic, después mediante el terminal y por último manualmente.

How to install ANYTHING in Ubuntu

Vía / Digg