Blog de Futurízate

Tratando de descubrir cómo funcionaba el pageflip de una página, me he topado con esta web: www.showmycode.com . Ellos mísmos se definen como Decodificador/Decompilador online gratuito. A mi me ha resultado muy útil para decompilar el código del fichero SWF pero según pone en la web también lo consigue con .php, .class, .exe, .dll y barra de códigos QR.

Espero que os pueda resultar tan útil como a mi.

Estaba rebuscando en la red un programa que me transformara de MP4 a FLV para mostrar un video en sitio web de un cliente y me he topado con una web muy interesante. El sitio web es www.mediaconverter.org y permite conversiones de video entre diferentes formatos pero vía online. Subimos nuestro fichero y en poco tiempo nos aparece el botón de “Download” para descargarlo. Muy útil.

Soporta:
- Dispositivos móviles: MP3, MP4 y 3GP.
- Windows: FLV, WMV y WMA.
- Mac: MP3, MP4 y MOV.
- Linux: VLC, MP3 y MPEG.

(Ver especificaciones en su web)

Una web accesible se caracteriza por no necesitar ni estilos (CSS) ni javascript para poder visualizar su contenido perfectamente.

El uso desmesurado de librerías que simplifican el acceso a elementos HTML como puede ser jQuery (una de las más utilizadas) provoca que sitios web ricos en contenidos, no visualicen toda su información por generarse dinámicamente con este tipo de librerías.

Los efectos visuales, que hacen más atractivo nuestro sitio web, provocan algunos inconvenientes al convinarlo con la Accesibilidad.

Veamos un ejemplo para escenificar más claramente este caso:

- Pongamos que tenemos la siguiente estructura en nuestro sitio web:

   - Inicio
   - Quiénes somos
   - Desarrollo web
      - Plan Tarjeta de visita
      - Plan Básico
      - Plan Intermedio
      - Plan Estándar
      - Plan Profesional
      - Plan Empresa
      - Plan Empresa Plus
      - Plan Tienda Virtual
      - Plan Gran Portal
   - Packs específicos
   - Noticias
   - Blog
   - Contacto

- Pasamos esta estructura a HTML:

   <ul id=”menuIzquierda”>
      <li>Inicio</li>
      <li>Quiénes somos</li>
      <li>
         Desarrollo web
         <ul class=”hijosMenu”>
            <li>Plan Tarjeta de visita</li>
            <li>Plan Básico</li>
            <li>Plan Intermedio</li>
            <li>Plan Estándar</li>
            <li>Plan Profesional</li>
            <li>Plan Empresa</li>
            <li>Plan Empresa Plus</li>
            <li>Plan Tienda Virtual</li>
            <li>Plan Gran Portal</li>
         </ul>
      </li>
      <li>Packs específicos</li>
      <li>Noticias</li>
      <li>Blog</li>
      <li>Contacto</li>
   </ul>

En este caso, el menú debe visualizarse completamente ya que si inicialmente apareciera escondido y con jQuery se mostrara, la gente que no tuviera el javascript activado no podría navegar por nuestro sitio web. Ejemplo de ocultar parte del menú en jQuery:

   $(document).ready(function(){
      $(”#menuIzquierda .hijosMenu”).hide();
   });

Este cambio de estado visual del menú en cada click que se hace en la página provoca el rechazo del usuario.

Para poder solventar esta problemática, utilizaremos la librería jQuery para conseguir agilizar los accesos a elementos de la página.

   1.- Incluimos el fichero de Google Code directamente o lo guardamos en nuestro servidor:

      <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>

   2.- Cargaremos los estilos generales del sitio web (estilos.css) y seguidamente los estilos de la precarga (precarga.css). Este último archivo contiene los elementos web que van a tener efectos visuales y no queremos que se visualicen inicialmente.

      <link type=”text/css” rel=”stylesheet” href=”estilos.css” media=”all”/>
      <link type=”text/css” rel=”alternate stylesheet” href=”precarga.css” title=”precarga”/>

            Contenido precarga.css:

               /* Menu izquierda */
               #menuIzquierda {
                  display:none;
               }

   3.- El archivo precarga.js, si tenemos activado el javascript, nos permitirá habilitar el fichero precarga.css que esconderá los elementos visuales que nos interese ocultar.

      <script type=”text/javascript” src=”precarga.js”></script>

            Contenido precarga.js:

               function precarga(opcion) {
                  // Inicialmente activamos el CSS precarga y al finalizar la carga de la página lo ponemos como “CSS alternativo”
                  if ( opcion ) {
                     $(’link[title="precarga"]‘).attr(’rel’, ’stylesheet’);
                  } else {
                     $(’link[title="precarga"]‘).attr(’rel’, ‘alternate stylesheet’);
                  }
               });

               precarga(true);

   4.- Por un tema de optimización y rapidez en la carga de la página, ubicaremos el fichero funciones.js justo antes de cerrar el tag BODY. Este fichero, además de contener las funciones que creamos oportunas para el buen funcionamiento de nuestro sitio web, activará la función precarga que deshabilitará el fichero precarga.css mostrando así los elementos ocultados.

      <script type=”text/javascript” src=”funciones.js”></script>

            Contenido funciones.js:

               $(document).ready(function(){
                  precarga(false);
               });

Código completo:

   <html>
      <head>
         <link type=”text/css” rel=”stylesheet” href=”estilos.css” media=”all”/>
         <link type=”text/css” rel=”alternate stylesheet” href=”precarga.css” title=”precarga”/>
         <script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
         <script type=”text/javascript” src=”precarga.js”></script>
      </head>
      <body>
         <ul id=”menuIzquierda”>
            <li>Inicio</li>
            <li>Quiénes somos</li>
            <li>
               Desarrollo web
               <ul class=”hijosMenu”>
                  <li>Plan Tarjeta de visita</li>
                  <li>Plan Básico</li>
                  <li>Plan Intermedio</li>
                  <li>Plan Estándar</li>
                  <li>Plan Profesional</li>
                  <li>Plan Empresa</li>
                  <li>Plan Empresa Plus</li>
                  <li>Plan Tienda Virtual</li>
                  <li>Plan Gran Portal</li>
               </ul>
            </li>
            <li>Packs específicos</li>
            <li>Noticias</li>
            <li>Blog</li>
            <li>Contacto</li>
         </ul>
         <script type=”text/javascript” src=”funciones.js”></script>
      </body>
   </html>

Esperamos que os sea de utilidad.

Gracias a nuestro amigo jQuery podemos obtener fácilmente el contenido de una capa o de cualquier elemento que necesitemos de una página de nuestro servidor o externa.

En el siguiente ejemplo podemos observar cómo recuperamos los LI que contiene el elemento con ID “jq-p-Getting-Started” de nuestra página “/Main_Page”. Ese resultado lo cargamos en nuestra UL con ID “links”.

Más sencillo no puede ser.

  <html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(document).ready(function(){
        $("#links").load("/Main_Page #jq-p-Getting-Started li");
      });
    </script>
  </head>
  <body>
  <b>jQuery Links:</b>
  <ul id="links"></ul>
  </body>
  </html>

Enlace: http://docs.jquery.com/Ajax/load

¿Quién no ha necesitado alguna vez buscar un icono? Pues en iconfinder.net podemos encontrar de todo y de buena calidad. El mismo icono se puede descargar en formato 12px, 16px, 24px, 32px, 48px, 64px y 128px así que con este gran avanico seguro que satisface nuestras necesidades.

También comentar que puedes filtrar por “Permitido para uso comercial” lo que supone una gran ventaja para los que creamos webs comerciales.

Sin duda un gran descubrimiento en el mundo de los iconos.

Enlace: http://www.iconfinder.net/

Hace tiempo que estamos esperando que IE6 llegue al 10% y así forzar el fin de su uso pero paralelamente se ha fijado el 18 de Octubre de 2010 como fecha límite. Esta es una iniciativa de los desarrolladores que llevamos bastante tiempo creando estilos específicos (CSS) para que en este navegador se vieran bien nuestras webs.

Gracias a que Firefox forzó una estandarización hace un tiempo, Microsoft ha tenido que ir renovándose poco a poco. Con IE7 y ahora con IE8 ha llegado a conseguirlo y esto provoca que la versión 6 haya quedado más que obsoleta.

El uso de Internet Explorer 6 hace tiempo que está en caída libre y vemos como el uso de Firefox sigue en cuotas increíbles con un 46,6%. Google Chrome gana adeptos sobretodo gracias a su campaña para fomentar su uso, veremos como avanza. Safari, como navegador principal de Mac avanza ligeramente y Opera se mantiene. Así están las cosas.

¡¡Es un pequeño paso para el usuario pero un gran paso para los desarrolladores!!

Estadísticas de navegadores 2009 mes a mes

Nota: Información extraida de http://www.w3schools.com/browsers/browsers_stats.asp

El fichero .htaccess está ubicado al mismo nivel que el directorio donde se encuentra la web. Por defecto, el fichero se encuentra vacio con lo que no ejercerá ningún tipo de filtrado previo a mostrar los contenidos de tu web.

Incluyendo el siguiente código, activaremos una regla que consiste en añadir la cadena de texto www. si en el enlace no estaba incluida:

RewriteEngine on
   RewriteCond %{HTTP_HOST} !^www\.futurizate\.com [NC]
   RewriteRule ^(.*)$ http://www.futurizate.com/$1 [R=301,L]

Nota: cambiar el dominio de ejemplo futurizate por el que nos interese

En un mundo en el que los dispositivos móviles ganan terreno a un ritmo asombroso, aquí tenemos un código con el que podremos detectar fácilmente, desde PHP, si nuestra web se está ejecutando desde unos de estos dispositivos. Una vez detectado, podremos realizar una acción específica, mostrar un aviso, redireccionar a otra página o lo que nos interese.

<?php

   // Función para detectar dispósitivos móviles
   function siEsDispositivoMovil(){

      $useragent = $_SERVER['HTTP_USER_AGENT'];

      //Listado de user-agent(UA) de dispositivos móviles
      $useragents = array(
         'PIE4' => 'compatible; MSIE 4.01; Windows CE; PPC; 240x320',
         'PIE4_Smartphone' => 'compatible; MSIE 4.01; Windows CE; Smartphone;',
         'PIE6' => 'compatible; MSIE 6.0; Windows CE;',
         'Minimo' => 'Minimo',
         'OperaMini' => 'Opera Mini',
         'AvantGo' => 'AvantGo',
         'Plucker' => 'Plucker',
         'NetFront' => 'NetFront',
         'SonyEricsson' => 'SonyEricsson',
         'Nokia' => 'Nokia',
         'Motorola' => 'mot-',
         'BlackBerry' => 'BlackBerry',
         'WindowsMobile' => 'Windows CE',
         'PPC' => 'PPC',
         'PDA' => 'PDA',
         'Smartphone' => 'Smartphone',
         'Palm' => 'Palm'
      );

      foreach($useragents as $nav=>$ua){
         if(strstr($useragent, $ua)!=false){
            return $nav;
         }
      }

      return "NoMovil";
   }

   $navegadorMovil = siEsDispositivoMovil();

   if ( $navegadorMovil != "NoMovil" ) {
      echo "La web se ha cargado desde un dispositivo no móvil.";
   } else {
      echo "La web se ha cargado desde el dispositivo móvil: " . $navegadorMovil;
   }
?>

Desde hace bastante tiempo, cuando necesitábamos que una URL se redireccionara hacia otra automáticamente utilizábamos el típico Javascript:

<script type="text/javascript">
   document.location = "http://www.nuetroejemplo.com/nuevodirectorio";
</script>

o si lo queríamos mejorarlo, ya que si tienes el javascript desactivado no se redireccionaría a la nueva dirección, utilizábamos el Tag Meta Refresh:

<META HTTP-EQUIV=Refresh CONTENT='0; URL=http://www.nuetroejemplo.com/nuevodirectorio'>

Si nuestro servidor únicamente permite ejecutar páginas HTML esta es sin duda la mejor opción. En cambio si disponemos de un servidor que tenga PHP, la mejor opción es la siguiente:

<?php
   // Permanent redirection
   header("HTTP/1.1 301 Moved Permanently");
   header("Location: http://www.nuetroejemplo.com/nuevodirectorio");
   exit();
?>

además de forzar la redirección desde servidor, el cliente no interviene, solventamos posibles problemas a la hora del posicionamiento web (SEO) con URLs diferentes que muestran el mismo contenido. Normalmente los buscadores penalizan que distintas URLs se redirijan al mismo contenido.

Gracias a Ojobuscador nos llega la traducción del interesante artículo 21 Great SEO Tips From Google’s Matt Cutts:

1. Es mejor usar guiones que “guiones bajos” en las URL’s
2. Es mejor no usar redirecciones JavaScript
3. Google actualiza su índice constantemente
4. Esisten sistemas de detección de colores iguales (o muy cercanos) que el fondo
5. Los enlaces que se venden devalúan los sitios web
6. Google no puede acceder a zonas de registrados… así que “dale algo” como entradilla
7. Si usas Flash, haz una versión HTML y bloquea la flash con los robots.txt
8. Utiliza fiesdly URL’s con texto comprensible (sin pasarse)
9. Cada página ha de tener su propio título
10. Minimizar el número de redirecciones hasta llegar a una URL
11. Minimizar el número de parámetros de una URL
12. No usar el parámetro “id=…” o de sesiones
13. Google noconsidera de calidad los enlaces comprados para aumentar PageRank
14. Los “malos” SEO’s pueden ser recelosos a usar Analytics.
15. Google no está a favor de la compra-venta de enlaces
16. Google está enfocando sus sistemas a combatir spam en otros idiomas (no inglés)
17. Las redirecciones 302 se están comenzando a considerar redirecciones 301
18. Se recomienda no usar subdominios con contenido duplicado, y usar redirecciones 301 para corregirlo.
19. No usar la herramienta para eliminar dominios de Google para quitar un dominio canónico
20. Los buscadores pueden hacer tareas para solucionar la canonicación o quitar las sesiones de foros
21. Mucha gente usa error 404 (webs que pueden volver) contra el error 410 (webs que no van a volver)