|

Addons para desarrolladores e IE

ByLuis

IESi ya hace tiempo hablábamos de la posibilidad de bajarse Addons para IE7, ahora vamos a mencionar unos pocos que ayudarán a los desarrolladores web que usen IE.

  • Internet Explorer Developer Toolbar: desarrollado por Microsoft, nos permite navegar por el DOM, desactivar opciones de IE como el javascript o los pop-ups, remarcar tablas, capas y otros elementos para localizarlos de forma sencilla en la página, validación de CSS y XHTML, redimensionar el navegador y limpiar la caché.
  • Fiddler: permite capturar las peticiones HTTP de entrada y salida y depurarlas antes de que se reciban o envíen.
  • HttpWatch: igual que el anterior, pero con una interfaz más amigable e integrado directamente con IE.
  • IE Powertoys for WebDevs: desarrollado por Microsoft, válido para IE6 e IE7 aunque diga que lo es para IE5, permite ver el código fuente parcialmente mediante el menú contextual.
  • Inline Search: imita la fucnionalidad de búsqueda de Firefox en el IE.

Invaluable IE Addon Tools

Vía / dzone

Similar Posts

Elements of Design: showcase de elementos web

ByLuis

Elements of Design es una galería de elementos contenidos en páginas web que nos puede ayudar a diseñar partes de la página y añadirlas al diseño general. Es como CSSMania pero en vez de diseños completos, enfocado únicamente a elementos.
elementsofdesign.png
Podremos encontrar diseños de formularios para comentarios de blogs, comentarios de blogs, calendarios, código, iconos, texto entrecomillado, formularios de registro, cajas de búsqueda y tipología de cabeceras.
Elements of Design

Método para crear acortadores de URLs

ByLuis

Buen método para crear acortadores de URLs, el truco está en usar números en base36 (incluye todos los números y letras): http://dominio.com/258j

El número 248j se traducirá a base 10 y nos dará el id de la tabla que almancena las URLs (que tendrá una primary key numérica y preferiblemente autoincremental). Así, por ejemplo, 258j equivale a 100099, por lo que sólo habría que obtener la URL que tenga esa ID.

How URL shortening scripts work?

Vía / DZone

|

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Google pretende indexar AJA

ByLuis

Aunque es de hace unos días la noticia, ni me había enterado. Google pretende hacer crawlable las páginas basadas en AJAX, para que sus páginas sean accesibles por los resultados de búsqueda.

Lo que pretende es que tanto los usuarios como los motores de búsqueda puedan ver el mismo contenido, incluso que te lleve a la URL Ajax y no a una copia estática. Del mismo modo, el diseñador podrá comprobar que todo su contenido se indexa y que se reproduce correctamente.

Desgraciadamente, Google ya nos indica cómo debemos realizar nuestro AJAX para que podamos tenerlo indexado en Google, por lo que al final lo deberemos hacer tal y cómo ellos lo piden para que no nos penalice por temas de SEO y esas cosas.

Aquí nos dejan una presentación: http://docs.google.com/present/view?id=dc75gmks_120cjkt2chf

A proposal for making AJAX crawlable

5 consejos para reducir la carga de la página enfocado a imágenes

ByLuis

Una cosa es realizar una aplicación o tener un blog y otra es que el número de visitas aumenten y tengamos que optimizar la carga de la página. Hay que intentar ganar rendimiento de cualquier forma, y una de estas formas es mediante imágenes, por eso estos consejos (que quizás sean un poco obvios) no vienen mal:

  • Evita usar imágenes complejas o grandes: cuanto más ligeras sean antes cargarán.
  • Optimiza las imágenes: existe diferentes formatos, y cada cual es conveniente en un caso. Los más usados son GIF, PNG y JPEG. JPEG y PNG tienen un valor de calidad de la imagen, reducirlo puede hacernos ganar algunos Kb y no perder en calidad.
  • Indica el tamaño de las imágenes en el HTML: así el navegador sabrá como repartir el espacio para la imagen antes de que cargue por lo que el render de la página será más rápido.
  • Precarga imágenes: aquí el autor dice un consejo un tanto peculiar, no sé si bueno o malo, pero sí interesante. Se trata de cargar imágenes grandes en páginas anteriores y asignarle el tamaño 1×1 para que no se vean y así esté cargada anteriormente. Eso sí, forzaría a que tire de caché para que no te la cargue dos veces.
  • Animaciones flash: si tienes que usar una animación no uses GIFs animados (sí, algunos te encuentras aún), usa flash, pero tampoco te pases.

Top 5 tips to decrease the load time of your websites via images

Consejos para realizar un login seguro

ByLuis

Buena serie de consejos a tener en cuenta cuando desarrollamos nuestro sistema de login. Algunos son ya conocidos, pero no está mal recordarlos:

  • Logitud de la contraseña y nombre de usuario: tiene que tener mínimo 6-8 caracteres.
  • Encriptar la contraseña: aunque casi todo el mundo usa MD5 o SHA-1, no está mal del todo usar SHA-2 (disponible en PHP5), ya que las anteriores ya no son tan seguras como hace tiempo.
  • Añade una semilla a la contraseña: cuando encriptes la contraseña es recomendable añadirle un texto para que el hash sea mas seguro.
  • No uses nombres sencillos para el administrador: evita usar nombres como “admin”, “root”, …
  • Registra los intentos de login: así se podrá detectar cuando estamos siendo atacados.
  • Maneja los errores: cuando se produce un login fallido, o evita que se produzca un error, o muestra un error personalizado, no muestres errores de código que puedan dar pistas al atacante.
  • Filtra la entrada: filtra lo que el usuario meta en su usuario para evitar inyecciones de código y no compruebes si la contraseña es correcta mediante SQL.
  • Usa LIMIT o WHERE 1: es importante para evitar comprometer muchas cuentas si sufrimos un ataque.
  • Usa nonce: nonce es un número único para la sesión, así nos aseguramos de que no se realicen ataques de fuerza bruta usando diccionario.
  • Usa sólo $_POST: $_GET es más sencillo de usar que $_POST, aunque no quita que usando $_POST no nos encontremos con problemas.
  • Cuentas MySQL: utiliza un usuario con permiso de select para realizar el login, así, si rompen tu seguridad, no podrán hacer deletes, updates o inserts.
  • Auto logout: Si quieres darle mayor seguridad, desconecta al usuario automáticamente pasado un cierto tiempo de inactividad. Aunque desde el punto de vista de la usabilidad no es muy recomendable.
  • Bloque la cuenta: si se han intentado varios logins consecutivos y han sido fallidos, se debería bloquear la cuenta.

PHP Secure Login Tips And Tricks

Vía / DZone