Tips Sobre Diseño.

Consejos Para Mejorar Los Diseños.

1. Icono en su logo en la URL (Shortcut Icon)
2. La hora oficial en tu sitio
3. Solución para el problema de Flash en Internet Explorer
4. Toturial de robots.txt: Para qué siver y Cómo se usa
5. Cómo hacer una hoja de estilo css para imprimir una página

Icono en su logo en la URL (Shortcut Icon)

Desde la versión 5.0 del Internet Explorer tenemos la posibilidad de poner un icono (.ico) tanto en la barra de direcciones como en el menú de favoritos para una página en concreto.
Para enganchar el icono simplemente deberemos incluir la siguiente línea en el código (antes de cerrar el </head>):
<link rel="shortcut icon" src="nombreIcono.ico">
Eso si, deberemos de tener en cuenta una serie de consideraciones:

1. El archivo de imagen del icono deberá de tener una dimensión de 16x16 píxels .
2. Solamente aparecerá el icono en la barra de direcciones una vez hayamos añadido la dirección de la web que lo contiene a nuestros favoritos .
3. El archivo con el icono podrá estar en cualquier servidor o directorio. En tal caso podremos reflejarlo mediante direcciones absolutas (http://www.sudominio.com/logo.ico) o relativas (/imagenes/logo.ico).

La hora oficial en tu sitio

Los servidores de Allytech desde hace ya un buen tiempo están conectados con la hora oficial dada por un reloj atómico.
Hay una sencilla forma de mostrar la hora en cualquier página html sin tener que saber programación, ni usar Java Script (ya que éste daría la hora de la máquina del cliente ).

Estlo se logra a través de usar un SSI en los archivos html, simplemente escribiendo las siguientes líneas dentro del código de su sitio.

<!--#echo var="DATE_LOCAL" -->      
Esto va a dar un resultado así:    nombre dia, XX-Mes-Año XX:XX:XX ZZZ (ZZZ es la abreviatura de la zona horaria)

Este formato puede ser modificado para mejorar la lectura o el orden de los datos utilizando esta línea previa.

<!--#config timefmt="%H%M%S"-->  

Por ejemplo:
<!--#config timefmt="%d.%m.%Y" --><!--#echo var="DATE_LOCAL" -->
Imprime : 08.03.2007

Para ver también el nombre del  mes:<!--#config timefmt="%B" --><!--#echo var="DATE_LOCAL" -->
Imprime: March

A continuación listamos una tabla de los valores para manejar a gusto la forma en que se muestra la fecha:

Solución para el problema de Flash en Internet Explorer

Si utilizás Internet Explorer, es probable que las películas de Flash dejen de funcionar como antes en este navegador, requiriendo que des un click sobre el elemento de Flash para poder reproducirlo. Esto ocurrirá tanto para el Flash Player como para otros plugins, como QuickTime, Java, Windows Media, etc.

Este problema tiene su origen en demandas de patentes contra Microsoft sobre la tecnología utilizada para visualizar los elementos tipo Flash sobre código HTML.
Por esta razón, Internet Explorer ahora mostrará un marco gris alrededor de las películas en SWF (y otros plugins) y un texto en el cual se debe dar click sobre el elemento para empezar su ejecución.

Este conflicto de patentes sólo se aplica para los objetos que incrustamos en el código HTML, por lo que si insertamos nuestros SWFs usando Javascript, no habrá problema.

Una de las soluciones posibles es utilizar FlashObject, creado por Geoff Stearns, una pequeña librería en Javascript, con el que, en sencillos pasos, podés incluir SWFs en HTML sin necesidad de que escribas código.

Solo te bajás FlashObject y colocás en tu código algo como:

<script type="text/javascript" src="flashobject.js"></script>
<div id="flashcontent">
  Aquí puedes colocar la cosa alternativa que saldrá si no hay Flash Player
</div>
<script type="text/javascript">
    var pelicula = new FlashObject("pelicula.swf", "pelicula", "200", "100", "7", "#336699");
    fo.write("flashcontent");
</script>

La única línea especial es:

var pelicula = new FlashObject("pelicula.swf", "pelicula", "200", "100", "7", "#336699");

Donde cada parámetro significa lo siguiente:
- “película.swf”: Es la URL del swf que quieres insertar
- “película”: El nombre identificador del swf
- “200”: El ancho (En este caso, lo cambias por de tu SWF)
- “100”: El alto (Lo mismo de arriba)
- “7”: La versión del Flash Player necesaria (Puede ser 6, 8, etc)
- “#336699”: El color de fondo de la película
Este método válida perfectamente como XHTML estricto, es limpio, rápido y su única desventaja es que requiere Javascript, pero la mayoría de los navegadores actuales lo traen activado por defecto así que no debería representar mayor problema

Toturial de robots.txt: Para qué siver y Cómo se usa

Existen visitantes no deseados a los sitios web. No hablamos de seres humanos sino de programas que recorren la red acumulando información a costa de nuestro ancho de banda y de nuestra privacidad; a estos bichos los llamamos crawlers. Los hay buenos y malos: Googlebot, por ejemplo, lee las páginas para que puedan ser encontradas en Google, al igual que cualquier buscador. Pero otros... no se sabe muy bien a qué vienen.

Desde los principios de la Internet se llegó a un consenso en cómo dar reglas a estos robots, dado que mucha gente no quiere que la totalidad o algunas partes de su web sean indexados por buscadores. Para eso está el robots.txt, que es un fichero que contiene las normas de "buena educación" que deben seguir los crawlers. Es como las señales de tránsito que prohiben o habilitan el paso a las páginas; veamos cómo funciona este código de circulación.

Para empezar hay que crear un fichero de texto llamado robots.txt y colocarlo en el document root, es decir, en el primer directorio del dominio. Imaginemos que nuestra web se llama www.mi-dominio.com. Pues colocaremos el robots.txt de manera que sea visible en http://www.mi-dominio.com/robots.txt.
El formato de este fichero consiste en registros. Cada registro empieza por el nombre de un user-agent , dos puntos y una o varias líneas con el comando Disallow .
¡Atención! Hay que crear el robots.txt en modo Unix porque sino puede dar problemas. Hay muchos editores que permiten usar modo Unix en Windows, no se debe usar editores HTML o el Word.

El user-agent es el agente que nos visita (no, no es la policía; al menos no es probable). Agente se refiere al tipo de programa que nos visita, o al menos a cómo se identifica ese programa. Para especificar todos los agentes usamos un asterisco (*).
Ejemplo: si se quiere prohibir que entre cualquier tipo de crawler, da igual de dónde venga (de Google, de Yahoo, de la Universidad de Yale, etc...).
User-agent: *
Disallow: /
Es decir, esto indica "Seas el crawler que seas, sabé que no podés pasar a ninguna parte".

Si queremos dejar acceso libre a todos los crawler (si no se pone robots.txt es lo que se sobreentiende) se pondría:
User-agent: *
Disallow:
Es decir, "Seas el crawler que seas, sabá que podés mirar por donde quieras".

Ahora por ejemplo vamos a prohibir que los crawlers visiten nuestras imágenes y los cgi:
User-agent: *
Disallow: /cgi-bin/
Disallow: /images/

Otro ejemplo: le prohibimos a Googlebot que visite la página /productos.html :
User-agent: Googlebot
Disallow: productos.html

Así, en un robots.txt se pueden almacenar distintos registros (reglas) una tras otra para completar nuestra política de crawlers. Por ejemplo, el siguiente robots.txt:
User-agent: *
Disallow: /cgi-bin

User-agent: Feedster
Disallow: /feed.xml
Disallow: /feed-noticias.xml
Esto significa: "En general los crawlers pueden ver todo menos el directorio /cgi-bin/ y su contenido, y además en concreto Feedster no puede ver /feed.xml y /feed-noticias.xml.

Los crawlers standard (es decir, los buenos) seguirán obedientemente las indicaciones del robots.txt (lo leerán antes para saber qué pueden visitar). Existen sin embargo otros crawlers no standard o maliciosos que se dedican a saltarse los robots.txt. Por ejemplo, hay crawlers que recorren internet de link en link buscando direcciones de e-mail, anotándolas y siguiendo. Evidentemente esto no es legal, por lo que si de hecho están tomando e-mails para hacer SPAM...¿para qué iban a seguir las reglas? Pero bueno, para los crawlers normales sirve.

Cómo hacer una hoja de estilo css para imprimir una página

Muchas veces ocurre, que necesitamos imprimir nuestra página de modo diferente al que se visualiza en Internet. Por ejemplo, si tenemos una página que muestra un informe de datos y se desea guardar impreso en papel, es muy probable que tengamos que minimizar la fuente y así poder comprimir la hoja para que entre cómodamente. También es posible que en los informes deseemos que aparezca el logo de la empresa centrado en la cabecera del informe.
Todo esto se puede realizar con CSS. Las hojas de estilo en cascada, sirven para definir el aspecto de la página y estos estilos se pueden declarar de manera distinta a la hora de imprimir un documento y de visualizarlo en el navegador.
Con CSS se puede definir estilos en un documento externo, de esta manera:

<link href="estilos.css" rel="stylesheet" type="text/css">

Con esto suponemos que tenemos un archivo llamado estilos.css, que está en el mismo directorio de la página, donde se definen los estilos del documento.
De modo parecido, podemos asignar una hoja de estilos externa para definir el aspecto cuando un usuario imprime la página web:

<link href="estilos_impresion.css" rel="stylesheet" type="text/css" media="print">

Lo único que cambia es el atributo media="print", que indica que esta hoja de estilos es sólo para cuando se va a imprimir la web.

Ejemplo de dos hojas css distintas para impresión y visualización

Ahora veamos un ejemplo de página web que tiene dos hojas de estilo distintas, una para cuando se está en el navegador y otra cuando se va a imprimir.

Tenemos un HTML que incluye dos hojas de estilos y dispone varias capas, que luego maquetaremos o posicionaremos con CSS.

<html>
<head>
   <title>informe suempresa</title>
   <link rel="STYLESHEET" type="text/css" href="estilo.css">
   <link rel="STYLESHEET" type="text/css" href="estilo_imprimir.css" media="print">
</head>

<body>

<div id="contenedor">
    <div id="cabecera">
      Superpuzzles
    </div>
   <div id="logo">
       <img src="logo.gif">
   </div>
   <div id="cuerpo">
    <div id="lateral">
    <ul>
       <li><a href="#">Enlace 1</a>
       <li><a href="#">Vínculo 2</a>
    </ul>
    </div>
    <div id="derecha">
       <div id="principal">
Contenido de un posible informe
       </div>
    </div>
   </div>
    <div id="pie">
    SuEmpresa.com
    </div>
</div>

</body>
</html>


Como se ha podido ver en el HTML anterior, se han incluido dos archivos CSS con estilos. El primero es estilo.css, que es el estilo que se utilizará al visualizar la página en el navegador. El segundo link con una hoja de estilos CSS es estilo_imprimir.css, que definirá el aspecto de la página al imprimirla (fijarse en el atributo media="print" de la etiqueta).

Los códigos CSS son muy parecidos, simplemente hemos hecho un par de cambios para ilustrar lo que venimos diciendo. En la visualización de la página no se mostrará la capa con id="logo". Por su parte, al imprimir la página no se mostrará la barra de navegación de la izquierda y los contenidos centrales se mostrarán en todo el ancho del espacio de impresión. Tampoco se mostrará la capa id="cabecera".

El código CSS de visualización en navegador

BODY {
font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 10 0 10 0px;
text-align: center;
background-color: #ffffff;
}
#contenedor{
text-align: left;
width: 770px;
margin: auto;
}
#cabecera{
background-color: #d0d0ff;
color: #333300;
font-size:12pt;
font-weight: bold;
padding: 3 3 3 10px;
}

#logo{
visibility:hidden;
display: none;
}

#cuerpo{
margin: 10 0 10 0px;
}
#lateral{
width: 160px;
background-color: #d0d0ff;
float:left;
}
#lateral ul{
margin : 0 0 0 0px;
padding: 0 0 0 0px;
list-style: none;
}
#lateral li{
background-color: #ffffff;
margin: 2 2 2 2px;
padding: 2 2 2 2px;
font-weight: bold;
}
#lateral a{
color: #3333cc;
text-decoration: none;
}

#pie{
background-color: #cccccc;
padding: 3 10 3 10px;
text-align:right;
clear: both;
}

#principal{
background-color: #ffffff;
padding: 0 0 0 20px;
width: 580px;
float: left;
}

#principal table{
background-color: #ffffff;
width: 580px;
border: 2px solid #cccccc;
font-size:10pt;
}


El código CSS que se utilizará para la impresión de la página

BODY {
   font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
   margin: 10 0 10 0px;
   text-align: center;
    background-color: #ffffff;
}
#contenedor{
    text-align: left;
    width: 600px;
    margin: auto;
}
#cabecera{
   visibility:hidden;
   display: none;
}

#logo{
   visibility:visible;
   display: block;
   margin-left: 20px;
}

#cuerpo{
    margin: 10 0 10 0px;
}
#lateral{
   visibility:hidden;
   display: none;
}

#pie{
    background-color: #cccccc;
    padding: 3 10 3 10px;
    text-align:right;
   clear: both;
}

#principal{
    background-color: #ffffff;
    padding: 0 0 0 20px;
    width: 600px;
    float: left;
}

#principal table{
   background-color: #ffffff;
    width: 600px;
   border: 2px solid #cccccc;
   font-size:10pt;
}


De este modo, cada vez que desee modificar el estilo de la página para imprimir, con este tip podrás hacerlo de modo fácil y rápido.